webuploader解决不能重复上传问题及一些常见问题处理
uploader = WebUploader.create({
swf: 'resources/js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: settings.url,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash。
pick : '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize : false
});
以上代码是不支持重复上传：根据查看webuploader文档里面有个duplicate属性，是可选的，true为可重复，false为不可重复，默认为undifind，也是不可重复。所以只需在属性的后面追加 duplicate:true 就可以实现重复上传。
uploader = WebUploader.create({
swf: 'resources/js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: settings.url,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick : '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize : false,
//可重复上传
duplicate :true
});
文件上传控件：webuploader + jQuery，开源而且好用。但是在使用过程中出现一些问题：
一、WebUploader常见问题
1、上传多张图片，图片的顺序会乱掉。解决方法：threads:1
2、文件没有按照原来比例上传，1M多的文件会被压缩，解决方法：compress: false
3、选择文件的时候浏览器反应迟钝，解决方法：
accept: {
title: 'Images',
extensions: "gif,jpg,jpeg,png",
mimeTypes: ".gif,.jpg,.jpeg,.png"
}
4、ie浏览器，上传文件失败，有可能是"swf"定义的文件路径不对。ie浏览器是用flash模式上传文件的。
var fileCount=0;
var fileSize=0;
var uploader;
var errorarr=new Array();
function initFile(){
uploader = WebUploader.create({
auto: true,
// swf文件路径
swf : '/ueditor/third-party/webuploader/Uploader.swf',
// 文件接收服务端。
server : "upFiles.do",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick : '#filePicker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
//resize : false,//这个不起作用，要用compress
compress: false,//webuploader默认压缩图片,设置compress:false，可以按照原始比例上传图片
accept: {
title: 'Images',
extensions: "gif,jpg,jpeg,png",
mimeTypes: ".gif,.jpg,.jpeg,.png"//解决WebUploader在谷歌浏览器中反应缓慢迟钝,虽然解决了问题，但是火狐浏览器，选择文件的时候不做限制了
},
fileVal:"upfile",//设置文件上传域的name。
fileSizeLimit:500 * 1024 * 1024,//所有文件上传的大小限制,单位字节
fileSingleSizeLimit:2 * 1024 * 1024,//单张图片上传限制大小，单位字节
fileNumLimit:20,//文件上传数量限制
threads:1//上传并发数。允许同时最大上传进程数,为了保证文件上传顺序
});
/*当文件被加入队列以后触发。
@param file File对象
@param ret 服务器返回的数据
*/
uploader.on('uploadSuccess', function (file, ret) {
var $file = $('#' + file.id);
try {
if (ret.state == 'SUCCESS') {
var json={};
json.dataid=ret.picId;
json.src=ret.url;
json.width=ret.width;
json.height=ret.height;
if(!putPicMap(json)){//加入图片列表
return false;
}
}else {
//console.log("faile","aa");
}
} catch (e) {
//console.log("faile","bb");
}
});
/**
*文件上传失败
*code=F_DUPLICATE 上传文件重复
**/
uploader.on('error', function (code, file) {
var name=file.name;
var str="";
switch(code){
case "F_DUPLICATE":
str=name+"文件重复";
errorarr.push(str);
break;
case "Q_TYPE_DENIED":
str=name+"文件类型 不允许";
errorarr.push(str);
break;
case "F_EXCEED_SIZE":
var imageMaxSize = 9;//通过计算
str=name+"文件大小超出限制"+imageMaxSize+"M";
errorarr.push(str);
break;
case "Q_EXCEED_SIZE_LIMIT":
errorarr.push("超出空间文件大小");
break;
case "Q_EXCEED_NUM_LIMIT":
errorarr.push("抱歉，超过每次上传数量图片限制");
default:
str=name+" Error:"+code;
}
});
uploader.on( 'all', function( type, arg1, arg2 ) {
if(type=="startUpload"){//开始上传
uploadchange();
}else if(type=="uploadFinished"){//上传结束
if(errorarr.length>0){
alert(errorarr.join("\n"));
}
//清空错误信息
errorarr.length=0;
}
});
}
/**
* 本地上传图片，改变上传的相册，文件上传的路径也会改变
*/
function uploadchange(){
//这里可以限制文件上传个数,未做
/* 添加额外的GET参数 */
uploader.option('server', "upFiles.do?aa=3");
}
二、WebUploader基本使用
最近在项目中用到了百度的文件图片上传插件WebUploader。分享给大家
需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader
/*图片上传 */
var $ = jQuery,
$img=$("#imagePath_img"),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 1 * ratio,
thumbnailHeight = 1 * ratio,
// Web Uploader实例
uploader;
// 初始化Web Uploader***上传图片
uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: '${basePath}/scripts/jQuery/plugins/webuploader/Uploader.swf',
// // 文件接收服务端地址，自动生成缩略图需要后端完成。
server: '${basePath}/policy/policyFileAction_add.do?policyFile.policyId='+$("#policyId_hidden").val()+'&policyFile.originalId='+$("#originalId_hidden").val()+'&policyFile.type=0',
//或例子：server: '/common/uploadFile?imageZip=1',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#sendimg',
fileNumLimit: 5,
//allowMagnify: false,
duplicate:true,//允许上传重复文件
// 只允许选择图片文件。
accept:{
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
uploader.on("error",function (type){
if (type=="Q_TYPE_DENIED"){
dialogMsg('请上传JPG、JPEG、PNG、BMP格式文件！',0);
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div style="float:right" id="' + file.id + '" class="delimg">' +
'<img class="addimg"><div class="closeimg">×</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$("#piccon").append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, 100, 100 );//可以写为thumbnailWidth, thumbnailHeight
$li.on('click', function() {
$(this).remove();
})
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file,response ) {
imgurl=response.fileName;//这里可以拿到后台返回的图片名称
//alert(imgurl);
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( '