H-ui.admin v3.1多图片预览上传的问题解决

H-ui.admin v3.1多图片预览上传的问题解决
这个模板的多图片上传我搞了好久，之前忙的时候都放弃了模板给的多图片上传，现在有时间研究下终于解决了，话不多说上代码。

(function( $ ){
// 当domReady的时候开始初始化
$(function() {
var $wrap = $(’.uploader-list-container’),

        // 图片容器$queue = $( '<ul class="filelist"></ul>' ).appendTo( $wrap.find( '.queueList' ) ),// 状态栏，包括进度和控制按钮$statusBar = $wrap.find( '.statusBar' ),// 文件总体选择信息。$info = $statusBar.find( '.info' ),// 上传按钮$upload = $wrap.find( '.uploadBtn' ),// 没选择文件之前的内容。$placeHolder = $wrap.find( '.placeholder' ),$progress = $statusBar.find( '.progress' ).hide(),// 添加的文件数量fileCount = 0,// 添加的文件总大小fileSize = 0,// 优化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;} )(),// 检测是否已经安装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);// 压根就没有安转。} 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/*'// },// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。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: '继续添加'});uploader.on( 'uploadSuccess', function( file , response) {if(response.status == "success"){imagePath = response.filePath;//获取每次上传图片的名称img.push(response.filePath);//将所有上传图片的名称放到一个数组里面}else if(response.status == "error")alert(response.error);});uploader.on('ready', function() {window.uploader = uploader;});// 当有文件添加进来时执行，负责view的创建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">向右旋转</span>' +'<span class="rotateLeft">向左旋转</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( '预览中' );uploader.makeThumb( file, function( error, src ) {var img;if ( error ) {$wrap.text( '不能预览' );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("预览出错");}});}}, 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 );}// 负责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( '继续上传' );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 {// 没有成功的图片，重设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 );
使用模板的上传控件，预览，我限制上传是6张图片
选中图片点击上传，如果不上传会提示没有图片具体代码在html中，点击上传后会进入到后台 server: ‘addInformation2.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("您上传的文件大小已经超出范围");  }  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("您上传的文件大小已经超出范围");  }  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();  //包含网站的全路径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提交到后台，后台接收图片名称的工具类，下面是接收方法
这样就能接收到所有图片了，然后将图片相应的保存到自己的数据库就行了。
第一次写，有不足之处望谅解。

H-ui.admin v3.1多图片预览上传的问题解决相关推荐

java图片预览上传_java实现文件上传、下载、图片预览
这篇文章主要介绍了java实现文件上传.下载.图片预览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下多文件保存到本地: @ResponseBody ...
PHP仿微信多图片预览上传
本文演示了手机微信端常用的多图片上传及时预览功能,点击上传的图片可立即删除. 生产图片区域,上传按钮#btn可替换自己想要的图片 <ul id="ul_pics" class ...
php仿微信上传图片压缩,PHP仿微信多图片预览上传实例代码
生产图片区域,上传按钮#btn可替换自己想要的图片 plupload上传 var uploader = new plupload.Uploader({//创建实例的构造方法 runtimes: 'ht ...
H5实现多图片预览上传，可点击可拖拽控件介绍
在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用. 先看看他的样式: 选择图片后: $( ...
java图片预览上传_Java实现图片上传预览（使用ajax提交）
html: 图片上传: js: function changepic(){ var reads = new FileReader(); f = document.getElementById('fil ...
php 防微信照片上传,PHP仿微信多图片预览上传功能
[html] view plain copy 在CODE上查看代码片派生到我的代码片 plupload上传 [javascript] view plain copy 在CODE上查看代码片派生到我的代 ...
php仿微信多图片预览上传,PHP仿微信多图片预览上传功能
[html] view plain copy 在CODE上查看代码片派生到我的代码片 plupload上传 [javascript] view plain copy 在CODE上查看代码片派生到我的代 ...
php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...

H-ui.admin v3.1多图片预览上传的问题解决

H-ui.admin v3.1多图片预览上传的问题解决相关推荐

最新文章

热门文章