js插件+UploadFile类实现图片的批量上传
来源：互联网 发布：excel表xy轴怎么填数据 编辑：程序博客网 时间：2024/05/28 15:22
文件上传无疑是web应用中一个非常常用的功能，下面小编给大家分享一下diyUpload.js+ThinkPHP中的UploadFile类实现图片的批量上传。
首先，给大家介绍展示一下具体操作页面：
html代码如下：
<div class="stepsTop"> <!--进度条--> <ul class="steps clearfix" id="steps"> <li class="active"><span>1</span>上传图片</li> <li><span>2</span>上传图片信息文件（可省略）</li> <li class="complete"><span>完成</span></li> </ul> <!--图片上传过程中，图片上传动态提示--> <div class="pic_operation clearfix" style="display:none"> <div class="lf_cont"> <em>已选中<span class="num" id="slNum">'+slNum+'</span>张图片<!--图片上传总数--> </div> <div class="btns"> <strong>正在上传第<span class="num" id="nowNum">'+nowNum+'</span>张图片...</strong><a href="javascript:;" class="add " id="prevStep">继续添加</a><a href="javascript:;" class="nextStep" id="nextStep">开始上传</a> </div> </div> <ul class="stepsCont" id="stepsCont"> <!--选择图片按钮--> <li class="cur"> <div class="upload"> <p class="pic_con"><img src="/NewWanbu/App/Photo/Tpl/Public/image/i_pic.jpg" alt=""></p> <p class="up_btn"><a href="javascript:;" id="slPicBtn">点击选择图片</a></p> <p>支持JPG、PNG、GIF格式图片，最多上传50张，图片文件名不能重复</p> </div> </li> </ul> </div>
如图，最上方有操作进度条提示当前进度，下方是一个选择图片的按钮，点击按钮选择图片之后效果如下图所示：
如果还想选择其他图片可以点击‘继续添加’按钮，选择想要上传的图片；或者已选中的图片不想要了，可以点击图片上的“X”按钮删除，如下：
页面上js代码如下：
/* * 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯; * 其他参数同WebUploader */ $('#slPicBtn').diyUpload({ //插件中的方法名 url:'/NewWanbu/App/Photo/index.php/Photo/upload', success:function( data ) { console.info( data ); }, error:function( err ) { console.info( err ); } });//全部上传结束后触发;if($('#stepsCont').children().eq(1)){ //控制进度条的代码$('#nextStep').click(function(){ $('#steps').children().eq(2).addClass('active'); $('#prevStep').remove(); $('#stepsCont').children().eq(1).hide();})} function hasAlreadyFinish(n){ var nowNum = $('.diySuccess').length; var n = 1; if(n<=nowNum){ n++; } $('#nowNum').text(n); }js插件中代码：
(function( $ ) { $.fn.extend({ /* * 上传方法 opt为参数配置; * serverCallBack回调函数 每个文件上传至服务端后,服务端返回参数,无论成功失败都会调用 参数为服务器返回信息; */ diyUpload:function( opt, serverCallBack ) { if ( typeof opt != "object" ) { alert('参数错误!'); return; } var $fileInput = $(this); var $fileInputId = $fileInput.attr('id'); //组装参数; if( opt.url ) { opt.server = opt.url; delete opt.url; } if( opt.success ) { var successCallBack = opt.success; delete opt.success; } if( opt.error ) { var errorCallBack = opt.error; delete opt.error; } //迭代出默认配置 $.each( getOption( '#'+$fileInputId ),function( key, value ){ opt[ key ] = opt[ key ] || value; }); if ( opt.buttonText ) { opt['pick']['label'] = opt.buttonText; delete opt.buttonText; } var webUploader = getUploader( opt ); if ( !WebUploader.Uploader.support() ) { alert( ' 上传组件不支持您的浏览器！'); return false; } //绑定文件加入队列事件; webUploader.on('fileQueued', function( file ) { createBox( $fileInput, file ,webUploader); }); //进度条事件 webUploader.on('uploadProgress',function( file, percentage ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); $diyBar.show(); percentage = percentage*100; showDiyProgress( percentage.toFixed(2), $diyBar); }); //全部上传结束后触发; webUploader.on('uploadFinished', function(){ $('.diyButton').remove(); $fileInput.hide(); $('#stepsCont').children().eq(1).show(); $('#stepsCont').children().eq(0).hide(); $('#steps').children().eq(1).addClass('active'); $('.pic_operation').find('em').html('上传成功'); $('#prevStep').remove(); $('#nextStep').text('完成'); }); //绑定发送至服务端返回后触发事件; webUploader.on('uploadAccept', function( object ,data ){ if ( serverCallBack ) serverCallBack( data ); }); //上传成功后触发事件; webUploader.on('uploadSuccess',function( file, response ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); $fileBox.removeClass('diyUploadHover'); $diyBar.fadeOut( 1000 ,function(){ $fileBox.children('.diySuccess').show(); }); if ( successCallBack ) { successCallBack( response ); } }); //上传失败后触发事件; webUploader.on('uploadError',function( file, reason ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); showDiyProgress( 0, $diyBar , '上传失败!' ); var err = '上传失败! 文件:'+file.name+' 错误码:'+reason; if ( errorCallBack ) { errorCallBack( err ); } }); //选择文件错误触发事件; webUploader.on('error', function( code ) { var text = ''; switch( code ) { case 'F_DUPLICATE' : text = '该文件已经被选择了!' ; break; case 'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ; break; case 'F_EXCEED_SIZE' : text = '文件大小超过限制!'; break; case 'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!'; break; case 'Q_TYPE_DENIED' : text = '文件格式不支持!'; break; default : text = '未知错误!'; break; } if(text != "该文件已经被选择了!"){ alert( text ); } }); } }); //Web Uploader默认配置; function getOption(objId) { /* * 配置文件同webUploader一致,这里只给出默认配置. * 具体参照:http://fex.baidu.com/webuploader/doc/index.html */ return { //按钮容器; pick:{ id:objId, label:"点击选择图片" }, //类型限制; accept:{ title:"Images", extensions:"gif,jpg,png", mimeTypes:"image/*" }, //swf路径 swf: '/NewWanbu/App/Photo/Tpl/Public/Uploader.swf', disableGlobalDnd: true, //配置生成缩略图的选项 thumb:{ width:170, height:150, // 图片质量，只有type为`image/jpeg`的时候才有效。 quality:70, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. allowMagnify:false, // 是否允许裁剪。 crop:true, // 为空的话则保留原有图片格式。 // 否则强制转换成指定的类型。 type:"image/jpeg" }, //文件上传方式 method:"POST", //服务器地址; server:"", //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容 sendAsBinary:false, // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失; chunked:true, // 分片大小 chunkSize:512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节); fileNumLimit:50, fileSizeLimit:50 * 2097152, fileSingleSizeLimit: 2097152 //2M }; } //实例化Web Uploader function getUploader( opt ) { return new WebUploader.Uploader( opt );; } //操作进度条; function showDiyProgress( progress, $diyBar, text ) { if ( progress >= 100 ) { progress = progress + '%'; text = text || '上传完成'; }else{ progress = progress + '%'; text = text || progress; } var $diyProgress = $diyBar.find('.diyProgress'); var $diyProgressText = $diyBar.find('.diyProgressText'); $diyProgress.width( progress ); $diyProgressText.text( text ); } //取消事件; function removeLi ( $li ,file_id ,webUploader) { webUploader.removeFile( file_id ); if ( $li.siblings('li').length <= 0 ) { $li.parents('.parentFileBox').remove(); } else { $li.remove(); } } //创建文件操作div; function createBox( $fileInput, file, webUploader ) { var file_id = file.id; var $parentFileBox = $fileInput.next('.parentFileBox'); //添加父系容器; if ( $parentFileBox.length <= 0 ) { var div = '<div class="parentFileBox"> \ <ul class="fileBoxUl"></ul>\ </div>'; $fileInput.after( div ); $parentFileBox = $fileInput.next('.parentFileBox'); } //创建按钮 if ($('.up_btn').find('.diyButton').length <= 0 ) { var div = '<div class="diyButton"> \ <a class="diyStart" href="javascript:void(0)">开始上传</a> \ <a class="diyCancelAll" style="display:none" href="javascript:void(0)">全部取消</a> \ </div>'; $('.up_btn').append( div ); var $startButton = $('.up_btn').find('.diyStart'); var $cancelButton = $('.up_btn').find('.diyCancelAll'); //开始上传,暂停上传,重新上传事件; var uploadStart = function (){ webUploader.upload(); $('.btn').find('strong').show(); } //绑定开始上传按钮; $startButton.one('click',uploadStart); } //添加子容器; var li = '<li id="fileBox_'+file_id+'" class="diyUploadHover"> \ <div class="viewThumb"></div> \ <div class="diyCancel"></div> \ <div class="diySuccess"></div> \ <div class="diyFileName">'+file.name+'</div>\ <div class="diyBar"> \ <div class="diyProgress"></div> \ <div class="diyProgressText">0%</div> \ </div> \ </li>'; $parentFileBox.children('.fileBoxUl').append( li ); //父容器宽度; var $width = $('.fileBoxUl>li').length * 190; var $maxWidth = $fileInput.parent().width(); $width = $maxWidth > $width ? $width : $maxWidth; $parentFileBox.width( $width ); var $fileBox = $parentFileBox.find('#fileBox_'+file_id); //绑定取消事件; var $diyCancel = $fileBox.children('.diyCancel').one('click',function(){ removeLi( $(this).parent('li'), file_id, webUploader ); }); if ( file.type.split("/")[0] != 'image' ) { var liClassName = getFileTypeClassName( file.name.split(".").pop() ); $fileBox.addClass(liClassName); return; } //生成预览缩略图; webUploader.makeThumb( file, function( error, dataSrc ) { if ( !error ) { $fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >'); } var slNum = $.trim($('.fileBoxUl').children().length); $('.diyCancel').click(function(){ if(slNum>0){ slNum--; $('#slNum').html(slNum); } }) $('#slNum').html(slNum); }); //添加流程操作按钮及上传显示 $('.pic_operation').show(); $('#slPicBtn').css({'position':'absolute','top':'178px','right':'156px','opacity': '0','filter':'alpha(opcacity=0)','width':'88px','height':'30px','line-height':'30px'}); $('#slPicBtn').find('.webuploader-pick').text('继续添加').css({'backgroundColor':'#FFF','border':'1px solid #B4B4B4','color':'#6C6C6C'}); $('.pic_con').hide(); $('.pic_con').next().next().hide(); } //获取文件类型; function getFileTypeClassName ( type ) { var fileType = {}; var suffix = '_diy_bg'; fileType['jpg'] = 'jpg'; fileType['jpeg'] = 'jpeg'; fileType['png'] = 'png'; fileType['gif'] = 'gif'; return fileType+suffix; }})( jQuery );图片选择完成后点击‘开始上传’按钮上传图片，上传完成后页面展示如下图：
可以修改或者删除图片，也可以点击‘全选图片’按钮，批量删除图片，或者选择多张图片删除：
PHP上传图片代码：
//上传图片 public function upload(){ import("ORG.Net.UploadFile"); $wallid = $this->$wallid; $path = SITE_PATH."/Uploads/photo/".$wallid.'/img/';//原图片保存目录 $path_thumb = SITE_PATH."/Uploads/photo/".$wallid.'/thumb/';//缩略图保存目录 //创建图片保存目录并附权限 if(!file_exists(SITE_PATH."/Uploads/photo/".$wallid)){ mkdir(SITE_PATH."/Uploads/photo/".$wallid, 0777); } if(!file_exists($path)){ mkdir($path, 0777); } if(!file_exists($path_thumb)){ mkdir($path_thumb, 0777); } $upload = new UploadFile(); $upload->maxSize = 1024*1024*2; $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg'); $upload->savePath = $path; $upload->thumb = true; $upload->thumbPrefix='m_,s_'; $upload->thumbPath=$path_thumb; $upload->thumbMaxWidth='600,300'; $upload->thumbMaxHeight='400,200'; $upload->thumbRemoveOrigin=false; if(!$upload->upload()) { exit(json_encode( array( 'status'=>'0','info'=>$upload->getErrorMsg() ) )); }else{ $info = $upload->getUploadFileInfo(); } $size = $info['0']['size']; $imgname = $info['0']['name']; $savename = $info['0']['savename']; $extension = $info['0']['extension']; if($size > 1024*1024*2){ exit(json_encode( array( 'status'=>'2','info'=>"文件大小超过限制"))); }else{ if($extension=="jpg" || $extension=="JPG" || $extension=="gif" || $extension=="GIF" || $extension=="png" || $extension=="PNG" || $extension=="bmp" || $extension=="BMP"){ //具体需求操作 }else{ exit(json_encode( array( 'status'=>'3','info'=>"上传文件格式错误"))); } } }到此，批量上传图片就全部实现了，但是有一个bug一直困扰了小编很久，就是有些图片原图会成功上传，但缩略图会上传成黑色的图片，如图：
如果聪明的你知道的话，记得分享一下哈。
4 0
- js插件+UploadFile类实现图片的批量上传
- 基于uploadfile的批量上传
- js/uploadifive html图片批量上传插件
- uploadfile上传图片
- 批量上传js插件的使用案例
- js批量上传图片
- thinkphp实现UploadFile.class.php图片上传功能
- uploadFile+nginx实现上传图片（Windows/Linux均可用）
- ThinkPHP使用 上传类UploadFile的使用
- diyupload插件：批量图片上传
- diyupload插件：批量图片上传
- Uploadfile 控件上传文件的使用方法（js+jsp+后台）
- SSM中使用Kindeditor插件实现图片的批量上传与回显
- Flash实现图片批量上传的方法
- jspSmartUpload实现图片的批量上传
- 浏览器图片选择预览、旋转、批量上传的JS代码实现
- 浏览器图片选择预览、旋转、批量上传的JS代码实现
- eWebEditor PHP版编辑器上传图片时报js d_file.myform.uploadfile为空问题
- 欢迎使用CSDN-markdown编辑器
- getaddrinfo简单应用——取得IP地址
- 动画
- 浅谈算法和数据结构: 十 平衡查找树之B树
- hibernate一级缓存(session缓存)
- js插件+UploadFile类实现图片的批量上传
- mybatis3.1分页自动添加总数
- java泛型与object的比较
- 获取手机一些系统信息的一些工具类
- CMOS电路ESD保护结构设计
- MyBATIS插件原理第二篇 Mapper运行原理
- 浅谈算法和数据结构: 十二 无向图相关算法基础
- Java---对象与类的封装
- c++11 std::bind使用
