将UEditor的图片批量上传抠出来单独使用

转载自：https://blog.csdn.net/lynnlovemin/article/details/51916999

在Web项目中，经常有这样一个需求，就是对图片的批量上传，利用form表单的file可以实现图片的上传，但是用户体验不好，而且不支持ajax提交，网上也有很多图片上传插件，有基于javascript的，也有基于flash的，但是给我的感觉，要么用户体验不好，要么收费的，那么能不能有一个比较好的方案呢？那就是Ueditor！

UEditor是百度出品的一款富文本编辑器，里面也集成了一个基于Flash的图片上传插件，由于Ueditor是开源的，所以源代码很容易得到，经过我的一番研究，找到了它的图片上传插件的一些猫腻，于是把图片上传插件给独立出来了，形成了一个模块，以后批量图片上传可以直接用。

首先看下UEditor的目录结构：

那么图片上传插件是放到哪里的呢？由于比较分散，所以这部分经验不足，很难找到，可能也是ueditor为了防止滥用吧。请看下图：

把红框内的文件拷贝出来，放到一个新的文件夹下，如图：

把所有文件找到后，接下来就是振奋人心的时候了（编码），当然，javascript代码如何写也是通过研究他的源码实现的，接下来我将源码放出来，各位童鞋只需要使用就行了：

[javascript] view plain copy

1. <script type="text/javascript" src="${ctx }/upload/tangram.js"></script>  

[javascript] view plain copy

1. <div id="flashContainer"></div>  

[javascript] view plain copy

1. var flashObj = uploadPic();  
2. function uploadPic(){  
3.         $("#flashContainer").html("");  
4.         /*-=-=-=-=-=-=-=全局变量模块-=-=-=-=-=-=-*/  
5.         //flash初始化参数  
6.         var flashOptions ={  
7.             createOptions:{  
8.                 id:'flash',  
9.                 url:'${ctx}/upload/image/imageUploader.swf',//这个就是附件里面的FLASH  
10.                 width:'510',//容器宽度  
11.                 height:'360',//容器高度  
12.                 errorMessage:'Flash插件初始化错误，请更新您的flashplayer版本！',  
13.                 wmode:'window',  
14.                 ver:'10.0.0',  
15.                 // 初始化的参数就是这些，  
16.                 vars:{  
17.                     width:500,      //width是flash的宽  
18.                     height:350,        //height是flash的高  
19.                     gridWidth:115,  // gridWidth是每一个预览图片所占的宽度，应该为width的整除  
20.                     gridHeight:120,  // gridHeight是每一个预览图片所占的高度，应该为height的整除  
21.                     picWidth:100,    // 单张预览图片的宽度  
22.                     picHeight:100,    // 单张预览图片的高度  
23.                     uploadDataFieldName:'picdata',    // POST请求中图片数据的key  
24.                     picDescFieldName:'pictitle',    // POST请求中图片描述的key  
25.                     maxSize:2,                    // 文件的最大体积,单位M  
26.                     compressSize:2,               // 上传前如果图片体积超过该值，会先压缩,单位M  
27.                     maxNum:20,                        // 最大上传多少个文件  
28.                     backgroundUrl:'',               //背景图片,留空默认  
29.                     listBackgroundUrl:'',           //预览图背景，留空默认  
30.                     buttonUrl:'',                   //按钮背景，留空默认  
31.                     compressSide:1,                //等比压缩的基准，0为按照最长边，1为按照宽度，2为按照高度  
32.                     compressLength:700,                // 能接受的最大边长，超过该值Flash会自动等比压缩  
33.                     url:'',   // 上传处理页面的url地址  
34.                     ext:null,//扩展的参数,json格式  
35.                     fileType:'{"description":"图片(*.jpg,*.jpeg,*.png,*.gif)", "extension":"*.gif;*.jpeg;*.png;*.jpg"}'      //上传文件格式限制  
36.                 },  
37.                 container: 'flashContainer'//flash容器id  
38.             },  
39.             selectFileCallback:function(selectFiles){//选择文件时的回调函数  
40.                 selectedImageCount += selectFiles.length;  
41.                 if(selectedImageCount) baidu.g("upload").style.display = "";  
42.                 dialog.buttons[0].setDisabled(true); //初始化时置灰确定按钮   
43.             },  
44.             exceedFileCallback: 'exceedFileCallback',   // 文件超出限制的最大体积时的回调  
45.             deleteFileCallback: function(delFiles){//删除文件时的回调函数  
46.                 selectedImageCount -= delFiles.length;  
47.                     if (!selectedImageCount) {  
48.                         baidu.g("upload").style.display = "none";  
49.                         dialog.buttons[0].setDisabled(false); //没有选择图片时重新点亮按钮  
50.                     }  
51.                 },   
52.             startUploadCallback: 'startUploadCallback',  // 开始上传某个文件时的回调  
53.             uploadCompleteCallback: 'uploadCompleteCallback',   // 某个文件上传完成的回调  
54.             uploadErrorCallback: function (data){  
55.                 //console && console.log(data);  
56.             },  // 某个文件上传失败的回调  
57.             allCompleteCallback: 'allCompleteCallback'// 全部上传完成时的回调  
58.             //changeFlashHeight: 'changeFlashHeight'     // 改变Flash的高度，mode==1的时候才有用  
59.                  
60.         };  
61.         return new baidu.flash.imageUploader(flashOptions);  
62.     };  

[javascript] view plain copy

1. /** 
2.         *上传图片 
3.         */  
4.         function upload(){  
5.             flashObj.upload();  
6.         };  
7.         /** 
8.          * 文件大小超出时的回调函数 
9.          * @param   Object 
10.          */  
11.         function exceedFileCallback(file){  
12.             // 参数为Object，{index:在多图上传的索引号, name:文件名, size:文件大小}  
13.             // 其中size单位为Byte  
14.             console.log("文件超出大小限制：");  
15.             console.log(file.index, file.name, file.size);  
16.             console.log("===================================");  
17.         };  
18.          
19.         /** 
20.          * 开始上传单个文件的回调函数 
21.          * @param   Object 
22.          */  
23.         function startUploadCallback(file){  
24.               
25.             console.log("开始上传如下文件：");  
26.             console.log(file.name, file.size);  
27.             console.log("===================================");  
28.         };  
29.         /** 
30.          * 单个文件上传完成的回调函数 
31.          * @param   Object/String   服务端返回啥，参数就是啥 
32.          */  
33.             function uploadCompleteCallback(data){  
34.                 //将url保存到用户信息上  
35.                 console.log("上传成功", data);  
36.                 console.log("===================================");  
37.             };  
38.          /** 
39.           * 单个文件上传失败的回调函数 
40.           * @param  Object/String   服务端返回啥，参数就是啥 
41.           */  
42.             function uploadErrorCallback(data){  
43.                 console.log("上传失败", data);  
44.                 console.log("===================================");  
45.             };  
46.          /** 
47.           * 全部上传完成的回调函数 
48.           */  
49.             function allCompleteCallback(data){  
50.                  alert(data.message);  
51.                   
52.                   
53.             };  

最后上传图片调用upload()就可以了，是不是很简单呢！