H-ui.admin v3.1多圖片預(yù)覽上傳的問題解決
這個模板的多圖片上傳我搞了好久，之前忙的時候都放棄了模板給的多圖片上傳，現(xiàn)在有時間研究下終于解決了，話不多說上代碼。

(function( $ ){
// 當domReady的時候開始初始化
$(function() {
var $wrap = $(’.uploader-list-container’),

// 圖片容器$queue = $( '<ul class="filelist"></ul>' ).appendTo( $wrap.find( '.queueList' ) ),// 狀態(tài)欄，包括進度和控制按鈕$statusBar = $wrap.find( '.statusBar' ),// 文件總體選擇信息。$info = $statusBar.find( '.info' ),// 上傳按鈕$upload = $wrap.find( '.uploadBtn' ),// 沒選擇文件之前的內(nèi)容。$placeHolder = $wrap.find( '.placeholder' ),$progress = $statusBar.find( '.progress' ).hide(),// 添加的文件數(shù)量fileCount = 0,// 添加的文件總大小fileSize = 0,// 優(yōu)化retina, 在retina下這個值是2ratio = window.devicePixelRatio || 1,// 縮略圖大小thumbnailWidth = 110 * ratio,thumbnailHeight = 110 * ratio,// 可能有pedding, ready, uploading, confirm, done.state = 'pedding',// 所有文件的進度信息，key為file idpercentages = {},// 判斷瀏覽器是否支持圖片的base64isSupportBase64 = ( function() {var data = new Image();var support = true;data.onload = data.onerror = function() {if( this.width != 1 || this.height != 1 ) {support = false;}}data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";return support;} )(),// 檢測是否已經(jīng)安裝flash，檢測flash的版本flashVersion = ( function() {var version;try {version = navigator.plugins[ 'Shockwave Flash' ];version = version.description;} catch ( ex ) {try {version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');} catch ( ex2 ) {version = '0.0';}}version = version.match( /\d+/g );return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );} )(),supportTransition = (function(){var s = document.createElement('p').style,r = 'transition' in s ||'WebkitTransition' in s ||'MozTransition' in s ||'msTransition' in s ||'OTransition' in s;s = null;return r;})(),// WebUploader實例uploader;if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {// flash 安裝了但是版本過低。if (flashVersion) {(function(container) {window['expressinstallcallback'] = function( state ) {switch(state) {case 'Download.Cancelled':alert('您取消了更新！')break;case 'Download.Failed':alert('安裝失敗')break;default:alert('安裝已成功，請刷新！');break;}delete window['expressinstallcallback'];};var swf = 'expressInstall.swf';// insert flash objectvar html = '<object type="application/' +'x-shockwave-flash" data="' + swf + '" ';if (WebUploader.browser.ie) {html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';}html += 'width="100%" height="100%" style="outline:0">' +'<param name="movie" value="' + swf + '" />' +'<param name="wmode" value="transparent" />' +'<param name="allowscriptaccess" value="always" />' +'</object>';container.html(html);})($wrap);// 壓根就沒有安轉(zhuǎn)。} else {$wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');}return;} else if (!WebUploader.Uploader.support()) {alert( 'Web Uploader 不支持您的瀏覽器！');return;}// 實例化uploader = WebUploader.create({pick: {id: '#filePicker-2',label: '點擊選擇圖片'},formData: {uid: 123},dnd: '#dndArea',paste: '#uploader',swf: 'lib/webuploader/0.1.5/Uploader.swf',chunked: false,chunkSize: 512 * 1024,server: 'addInformation2.action',//自己的action// runtimeOrder: 'flash',// accept: {// title: 'Images',// extensions: 'gif,jpg,jpeg,bmp,png',// mimeTypes: 'image/*'// },// 禁掉全局的拖拽功能。這樣不會出現(xiàn)圖片拖進頁面的時候，把圖片打開。disableGlobalDnd: true,fileNumLimit: 6,fileSizeLimit: 200 * 1024 * 1024, // 200 MfileSingleSizeLimit: 50 * 1024 * 1024 // 50 M});// 拖拽時不接受 js, txt 文件。uploader.on( 'dndAccept', function( items ) {var denied = false,len = items.length,i = 0,// 修改js類型unAllowed = 'text/plain;application/javascript ';for ( ; i < len; i++ ) {// 如果在列表里面if ( ~unAllowed.indexOf( items[ i ].type ) ) {denied = true;break;}}return !denied;});uploader.on('dialogOpen', function() {console.log('here');});// uploader.on('filesQueued', function() {// uploader.sort(function( a, b ) {// if ( a.name < b.name )// return -1;// if ( a.name > b.name )// return 1;// return 0;// });// });// 添加“添加文件”的按鈕，uploader.addButton({id: '#filePicker2',label: '繼續(xù)添加'});uploader.on( 'uploadSuccess', function( file , response) {if(response.status == "success"){imagePath = response.filePath;//獲取每次上傳圖片的名稱img.push(response.filePath);//將所有上傳圖片的名稱放到一個數(shù)組里面}else if(response.status == "error")alert(response.error);});uploader.on('ready', function() {window.uploader = uploader;});// 當有文件添加進來時執(zhí)行，負責(zé)view的創(chuàng)建function addFile( file ) {var $li = $( '<li id="' + file.id + '">' +'<p class="title">' + file.name + '</p>' +'<p class="imgWrap"></p>'+'<p class="progress"><span></span></p>' +'</li>' ),$btns = $('<div class="file-panel">' +'<span class="cancel">刪除</span>' +'<span class="rotateRight">向右旋轉(zhuǎn)</span>' +'<span class="rotateLeft">向左旋轉(zhuǎn)</span></div>').appendTo( $li ),$prgress = $li.find('p.progress span'),$wrap = $li.find( 'p.imgWrap' ),$info = $('<p class="error"></p>'),showError = function( code ) {switch( code ) {case 'exceed_size':text = '文件大小超出';break;case 'interrupt':text = '上傳暫停';break;default:text = '上傳失敗，請重試';break;}$info.text( text ).appendTo( $li );};if ( file.getStatus() === 'invalid' ) {showError( file.statusText );} else {// @todo lazyload$wrap.text( '預(yù)覽中' );uploader.makeThumb( file, function( error, src ) {var img;if ( error ) {$wrap.text( '不能預(yù)覽' );return;}if( isSupportBase64 ) {img = $('<img src="'+src+'">');$wrap.empty().append( img );} else {$.ajax('lib/webuploader/0.1.5/server/preview.php', {method: 'POST',data: src,dataType:'json'}).done(function( response ) {if (response.result) {img = $('<img src="'+response.result+'">');$wrap.empty().append( img );} else {$wrap.text("預(yù)覽出錯");}});}}, thumbnailWidth, thumbnailHeight );percentages[ file.id ] = [ file.size, 0 ];file.rotation = 0;}file.on('statuschange', function( cur, prev ) {if ( prev === 'progress' ) {$prgress.hide().width(0);} else if ( prev === 'queued' ) {$li.off( 'mouseenter mouseleave' );$btns.remove();}// 成功if ( cur === 'error' || cur === 'invalid' ) {console.log( file.statusText );showError( file.statusText );percentages[ file.id ][ 1 ] = 1;} else if ( cur === 'interrupt' ) {showError( 'interrupt' );} else if ( cur === 'queued' ) {percentages[ file.id ][ 1 ] = 0;} else if ( cur === 'progress' ) {$info.remove();$prgress.css('display', 'block');} else if ( cur === 'complete' ) {$li.append( '<span class="success"></span>' );}$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );});$li.on( 'mouseenter', function() {$btns.stop().animate({height: 30});});$li.on( 'mouseleave', function() {$btns.stop().animate({height: 0});});$btns.on( 'click', 'span', function() {var index = $(this).index(),deg;switch ( index ) {case 0:uploader.removeFile( file );return;case 1:file.rotation += 90;break;case 2:file.rotation -= 90;break;}if ( supportTransition ) {deg = 'rotate(' + file.rotation + 'deg)';$wrap.css({'-webkit-transform': deg,'-mos-transform': deg,'-o-transform': deg,'transform': deg});} else {$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');}});$li.appendTo( $queue );}// 負責(zé)view的銷毀function removeFile( file ) {var $li = $('#'+file.id);delete percentages[ file.id ];updateTotalProgress();$li.off().find('.file-panel').off().end().remove();}function updateTotalProgress() {var loaded = 0,total = 0,spans = $progress.children(),percent;$.each( percentages, function( k, v ) {total += v[ 0 ];loaded += v[ 0 ] * v[ 1 ];} );percent = total ? loaded / total : 0;spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );updateStatus();}function updateStatus() {var text = '', stats;if ( state === 'ready' ) {text = '選中' + fileCount + '張圖片，共' +WebUploader.formatSize( fileSize ) + '。';} else if ( state === 'confirm' ) {stats = uploader.getStats();if ( stats.uploadFailNum ) {text = '已成功上傳' + stats.successNum+ '張照片至XX相冊，'+stats.uploadFailNum + '張照片上傳失敗，<a class="retry" href="#">重新上傳</a>失敗圖片或<a class="ignore" href="#">忽略</a>'}} else {stats = uploader.getStats();text = '共' + fileCount + '張（' +WebUploader.formatSize( fileSize ) +'），已上傳' + stats.successNum + '張';if ( stats.uploadFailNum ) {text += '，失敗' + stats.uploadFailNum + '張';}}$info.html( text );}function setState( val ) {var file, stats;if ( val === state ) {return;}$upload.removeClass( 'state-' + state );$upload.addClass( 'state-' + val );state = val;switch ( state ) {case 'pedding':$placeHolder.removeClass( 'element-invisible' );$queue.hide();$statusBar.addClass( 'element-invisible' );uploader.refresh();break;case 'ready':$placeHolder.addClass( 'element-invisible' );$( '#filePicker2' ).removeClass( 'element-invisible');$queue.show();$statusBar.removeClass('element-invisible');uploader.refresh();break;case 'uploading':$( '#filePicker2' ).addClass( 'element-invisible' );$progress.show();$upload.text( '暫停上傳' );break;case 'paused':$progress.show();$upload.text( '繼續(xù)上傳' );break;case 'confirm':$progress.hide();$( '#filePicker2' ).removeClass( 'element-invisible' );$upload.text( '開始上傳' );stats = uploader.getStats();if ( stats.successNum && !stats.uploadFailNum ) {setState( 'finish' );return;}break;case 'finish':stats = uploader.getStats();if ( stats.successNum ) {alert( '上傳成功' );} else {// 沒有成功的圖片，重設(shè)state = 'done';location.reload();}break;}updateStatus();}uploader.onUploadProgress = function( file, percentage ) {var $li = $('#'+file.id),$percent = $li.find('.progress span');$percent.css( 'width', percentage * 100 + '%' );percentages[ file.id ][ 1 ] = percentage;updateTotalProgress();};uploader.onFileQueued = function( file ) {fileCount++;fileSize += file.size;if ( fileCount === 1 ) {$placeHolder.addClass( 'element-invisible' );$statusBar.show();}addFile( file );setState( 'ready' );updateTotalProgress();};uploader.onFileDequeued = function( file ) {fileCount--;fileSize -= file.size;if ( !fileCount ) {setState( 'pedding' );}removeFile( file );updateTotalProgress();};uploader.on( 'all', function( type ) {var stats;switch( type ) {case 'uploadFinished':setState( 'confirm' );break;case 'startUpload':setState( 'uploading' );break;case 'stopUpload':setState( 'paused' );break;}});uploader.onError = function( code ) {alert( '最多上傳6張圖片');};$upload.on('click', function() {if ( $(this).hasClass( 'disabled' ) ) {return false;}if ( state === 'ready' ) {uploader.upload();} else if ( state === 'paused' ) {uploader.upload();} else if ( state === 'uploading' ) {uploader.stop();}});$info.on( 'click', '.retry', function() {uploader.retry();} );$info.on( 'click', '.ignore', function() {alert( 'todo' );} );$upload.addClass( 'state-' + state );updateTotalProgress(); });

})( jQuery );
使用模板的上傳控件，預(yù)覽，我限制上傳是6張圖片
選中圖片點擊上傳，如果不上傳會提示沒有圖片具體代碼在html中，點擊上傳后會進入到后臺 server: ‘a(chǎn)ddInformation2.action’,//自己的action
后臺是這樣接收的看代碼如下
WebuploaderUtil工具類如下
package com.bttc.utils;

/**
*Project Name: QDLIMAP
*File Name: WebuploaderUtil.java
*Package Name: com.ltmap.platform.cms.util
*Date: 2017年4月13日 下午6:30:45
*Copyright ? 2017,578888218@qq.com All Rights Reserved.
*/

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.multipart.MultipartFile;

/**
*Title: WebuploaderUtil

*Description:
*@Company: 勵圖高科

*@author: 劉云生
*@version: v1.0
*@since: JDK 1.8.0_40
*@Date: 2017年4月13日 下午6:30:45

*/
public class WebuploaderUtil {
private String allowSuffix = “jpg,png,gif,jpeg”;//允許文件格式
private long allowSize = 2L;//允許文件大小
private String fileName;
private String[] fileNames;

public String getAllowSuffix() { return allowSuffix; } public void setAllowSuffix(String allowSuffix) { this.allowSuffix = allowSuffix; } public long getAllowSize() { return allowSize*1024*1024; } public void setAllowSize(long allowSize) { this.allowSize = allowSize; } public String getFileName() { return fileName; } public void setFileName(String fileName) { this.fileName = fileName; } public String[] getFileNames() { return fileNames; } public void setFileNames(String[] fileNames) { this.fileNames = fileNames; } /** * * @Title: getFileNameNew * @Description: TODO * @param: @return * @return: String * @author: 劉云生 * @Date: 2017年4月14日 上午10:17:35 * @throws */ private String getFileNameNew(){ SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS"); return fmt.format(new Date()); } /** * * @Title: uploads * @Description: TODO * @param: @param files * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: 劉云生 * @Date: 2017年4月14日 上午10:17:14 * @throws */ public void uploads(MultipartFile[] files, String destDir,HttpServletRequest request) throws Exception { String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; try { fileNames = new String[files.length]; int index = 0; for (MultipartFile file : files) { String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); int length = getAllowSuffix().indexOf(suffix); if(length == -1){ throw new Exception("請上傳允許格式的文件"); } if(file.getSize() > getAllowSize()){ throw new Exception("您上傳的文件大小已經(jīng)超出范圍"); } String realPath = request.getSession().getServletContext().getRealPath("/"); File destFile = new File(realPath+destDir); if(!destFile.exists()){ destFile.mkdirs(); } String fileNameNew = getFileNameNew()+"."+suffix;// File f = new File(destFile.getAbsoluteFile()+"\\"+fileNameNew); file.transferTo(f); f.createNewFile(); fileNames[index++] =basePath+destDir+fileNameNew; } } catch (Exception e) { throw e; } } /** * * @Title: upload * @Description: TODO * @param: @param file * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: 劉云生 * @Date: 2017年4月14日 上午10:16:16 * @throws */ public void upload(MultipartFile file, String destDir,HttpServletRequest request) throws Exception { String path = request.getContextPath(); //http://localhost:8088/huahangString basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; try { String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); int length = getAllowSuffix().indexOf(suffix); if(length == -1){ throw new Exception("請上傳允許格式的文件"); } if(file.getSize() > getAllowSize()){ throw new Exception("您上傳的文件大小已經(jīng)超出范圍"); } String realPath = request.getSession().getServletContext().getRealPath("/upload"); File destFile = new File(realPath+destDir); if(!destFile.exists()){ destFile.mkdirs(); } String fileNameNew = getFileNameNew()+"."+suffix; File f = new File(destFile.getAbsoluteFile()+"/"+fileNameNew); file.transferTo(f); f.createNewFile(); //包含網(wǎng)站的全路徑http://localhost:8080/QDLIMAP/upload/user/20170414104142667.png //fileName = basePath+destDir+fileNameNew; //返回相對路徑upload/user/20170414104142667.png fileName = destDir+fileNameNew; } catch (Exception e) { throw e; }

}
}
這個工具類作用是將每次上傳的圖片保存。
這基本上就完成了圖片的保存了，下一步就是提交審核了

通過ajax提交到后臺，后臺接收圖片名稱的工具類，下面是接收方法
這樣就能接收到所有圖片了，然后將圖片相應(yīng)的保存到自己的數(shù)據(jù)庫就行了。
第一次寫，有不足之處望諒解。

總結(jié)

以上是生活随笔為你收集整理的H-ui.admin v3.1多图片预览上传的问题解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。