百度的web Uploader使用心得
我们做的这个项目，表单比较多，附件也比较多，一个表单可能有好几个附件字段，包括单附件，多附件。
项目用的前端框架bootstrap，最开始的时候我是用了bootstrap的fileupload插件（这个插件也是很强大），不过我们的项目需求比较特殊，提交完表单后有一个信息确认页面，在这个确认页面上有修改按钮，可以跳回那个表单进行修改，这样问题就出来了，浏览器是不允许给file类型的input赋值的，研究了一天的bootstrap-fileupload也没能找到合适的解决方案，在无意中看到了百度的web Uploader插件，百度的官方文档，当时也是研究了大半天，才将这个插件运用到了我们的项目（本人技术水平有限，大佬们可能看看就会了，用不了这么长的时间），下面就将代码贴上，希望能给看到这篇文章的你带来便利。
下面这段js代码是公共的方法，项目所有的附件都去调这里的方法
var sumFile=0;
//初始化方法 type表示单附件还是多附件 0是多附件 1是单附件
function fileInit(fileInputKey,type){
if (!WebUploader.Uploader.support()) {
alert("附件上传控件初始化失败！请尝试升级FLASH控件，可在“下载中心”下载、安装！");
}
var $imgList=$("#FL_" + fileInputKey);
// 优化retina, 在retina下这个值是2
var ratio = window.devicePixelRatio || 1;
// 缩略图大小
var thumbnailWidth = 16 * ratio;
var thumbnailHeight = 16 * ratio;
//type 1代表单附件上传 0代表多附件上传
if(type==1){//单附件
uploader = WebUploader.create({
swf : "Uploader.swf",
server : "/xjkcsj/upload",
pick: {
id : "#FP_" + fileInputKey,
multiple : false
},
formData: {
"fileLocate" : $("[name='fileLocate']").val(),
"fileInputKey" : fileInputKey
},
//自动上传
auto : true,
duplicate : true
});
uploader.on( "beforeFileQueued", function( file ) {
if (file.size == 0) {
alert("无法上传空文件，请检查后重新上传");
}
//重名验证 获取这个文件的名
var fileName=$imgList.children("div").children("div").children("a").children("span[class='fileTitle']").text();
if(fileName==file.name) {
alert("所添加["+fileName+"]的文件已存在");
//并且不上传
return false;
}
//获取文件路径的这个值保存在界面的删除a链接中title值
var fileSrc=$imgList.children("div").children("div").children("span[class='remove']").children().attr("title");
//如果fileSrc有值
if(fileSrc){
//将值传到后台用jq ajax post方法 这里应该有个返回值但上级要求说少验证 就没加了
$.post("/ProjManager/FileDeleteServlet",{fileSrc:fileSrc});
//这个是单附件 后面的替换前面的
//获取他此时的文件div的整体名
var oldFileId=$imgList.children("div").attr("id");
//如果webuploader file队列中有这个值 其实这一块没什么用 因为除非这个页面只有这么一个单附件,才能这么删 因为这里的队列只是最后一个webupload初始化队列
if(uploader.getFile(oldFileId)){
//则删除
var oldFile=uploader.getFile(oldFileId);
uploader.removeFile(oldFile,true);
}
//这里清空 也相当于将单附件的div整个清空
$imgList.html("");
//返回file 同意上传
return file;
}
});
//当有文件添加进来的时候
uploader.on("fileQueued", function(file) {
//处理保存按钮
sumFile++;
$("#btnSave:button").attr("disabled", true);//标准保存按钮处理
if ($("#btnSave:button").attr("disabled") == undefined) {//非标准保存按钮
$(":button[value=' 保 存 ']").attr("disabled", true);
$(":button[value='保 存']").attr("disabled", true);
}
$("#savemail:button").attr("disabled", true);//邮件发送按钮
$("#savedraft:button").attr("disabled", true);//邮件存草稿按钮
//有特殊按钮还需补充，目前不支持接口处理
$imgList.html("");
var $li = $("![]()
"
+ "" + file.name + ""
+ ""),
$img = $li.find("img");
$imgList.append( $li );
// 创建缩略图// 如果为非图片文件，可以不用调用此方法。// thumbnailWidth x thumbnailHeight 为 16 x 16
uploader.makeThumb( file, function( error, src ) {
//如果是err 那就代表着没法预览
if ( error ) {
var fileIcon="![](\"/xjkcsj/resources/images/fileUpload/";)
");
return;
}
//如果不是发生错误则是图片
$img.replaceWith("![](\"")
");
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on("uploadProgress", function( file, percentage ) {
var $li = $("#" + file.id),
$percent = $li.find(".progress span");
// 避免重复创建
if (!$percent.length) {
$percent = $("
").appendTo( $li ).find("span");
}
$percent.css("width", percentage * 100 + "%" );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on("uploadSuccess", function(file, data) {
$('#'+fileInputKey).val(data.path);
$("#" + file.id).find(".remove").html("");
$("#" + file.id).find(".fileTitle").wrap("");
});
// 文件上传失败，显示上传出错。
uploader.on( "uploadError", function( file ) {
alert("["+file.name+"]上传失败");
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( "uploadComplete", function( file ) {
$("#"+file.id).find(".progress").remove();
//检查文件是否上传完成，处理保存按钮
sumFile--;
if (sumFile == 0) {
$("#btnSave:button").attr("disabled", false);//标准保存按钮处理
if ($("#btnSave:button").attr("disabled") == undefined) {//非标准保存按钮
$(":button[value=' 保 存 ']").attr("disabled", false);
$(":button[value='保 存']").attr("disabled", false);
}
$("#savemail:button").attr("disabled", false);//邮件发送按钮
$("#savedraft:button").attr("disabled", false);//邮件存草稿按钮
}
});
} else {//多附件
uploader = WebUploader.create({
swf: "Uploader.swf",
server: "/xjkcsj/upload",
pick: {
id : "#FP_" + fileInputKey,
multiple : true
},
formData: {
"fileLocate" : $("[name='fileLocate']").val(),
"fileInputKey" : fileInputKey
},
//自动上传
auto : true,
//重复上传
duplicate : true,
//fileNumLimit : 10,
threads : 5
});
//当有文件添加进来的时候 如果返回false则不加如队列
uploader.on("beforeFileQueued", function( file ) {
if (file.size == 0) {
alert("无法上传空文件，请检查后重新上传");
}
var context=true;
//获取所有多附件所有的文件名字的jq对象 包裹着名字的span标签 注这不是路径
var fileNames=$imgList.children("div").children("div").children("a").find("span[class='fileTitle']");
if (fileNames) {
$(fileNames).each(function(){
//判断如果两个名字相同 上传名和多附件组的文件名有相等的
if($(this).text()==file.name) {
alert("所添加["+file.name+"]的文件已存在");
context=false;
}
});
}
if(context){//上传
return file;
} else {
return context;
}
});
//当有文件添加进来的时候
uploader.on( "fileQueued", function( file ) {
//处理保存按钮
sumFile++;
$("#btnSave:button").attr("disabled", true);//标准保存按钮处理
if ($("#btnSave:button").attr("disabled") == undefined) {//非标准保存按钮
$(":button[value=' 保 存 ']").attr("disabled", true);
$(":button[value='保 存']").attr("disabled", true);
}
$("#savemail:button").attr("disabled", true);//邮件发送按钮
$("#savedraft:button").attr("disabled", true);//邮件存草稿按钮
//有特殊按钮还需补充，目前不支持接口处理
var $li = $("![]()
"+file.name +""),
$img = $li.find("img");
$imgList.append($li);
// 创建缩略图// 如果为非图片文件，可以不用调用此方法。// thumbnailWidth x thumbnailHeight 为 16 x 16
uploader.makeThumb( file, function( error, src ) {
//如果是err 那就代表着没法预览
if ( error ) {
var fileIcon="");
return;
}
//如果不是发生错误则是图片
$img.replaceWith("![](\""+src+"\")
");
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( "uploadProgress", function( file,percentage) {
var $li = $( "#"+file.id ),
$percent = $li.find(".progress span");
// 避免重复创建
if (!$percent.length) {
$percent = $("
").appendTo( $li ).find("span");
}
$percent.css( "width", percentage * 100 + "%" );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on("uploadSuccess", function(file,data) {
var value= $('#'+fileInputKey).val();
$('#'+fileInputKey).val(value+data.path+"|");
//在本id中重写remove里的内容
$("#"+file.id).find(".remove").html("");
$("#" + file.id).find(".fileTitle").wrap("");
});
// 文件上传失败，显示上传出错。
uploader.on( "uploadError", function( file ) {
alert("["+file.name+"]上传失败");
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( "uploadComplete", function( file ) {
$("#"+file.id).find(".progress").remove();
//检查文件是否上传完成，处理保存按钮
sumFile--;
if (sumFile == 0) {
$("#btnSave:button").attr("disabled", false);//标准保存按钮处理
if ($("#btnSave:button").attr("disabled") == undefined) {//非标准保存按钮
$(":button[value=' 保 存 ']").attr("disabled", false);
$(":button[value='保 存']").attr("disabled", false);
}
$("#savemail:button").attr("disabled", false);//邮件发送按钮
$("#savedraft:button").attr("disabled", false);//邮件存草稿按钮
}
});
}
}
/**
* 删除文件
* 上传成功后，如需处理自己的业务逻辑，需重写此方法
* @param fileId 文件id
* @param fileSrc 相对路径名
*/
//文件删除功能
function removeFile(fileInputKey,fileId,fileSrc){
//confirm('确定删除吗？') 弹出框 返回bool值
if(confirm("确定要删除已上传的文件吗？")){
if(fileId){
//将这个id里的东西全部移除 清楚界面div
$("#"+fileId).remove();
//判断如果uploader里有这个file
if(uploader.getFile(fileId)){
//则删除
uploader.removeFile(fileId,true);
}
}
//如果fileSrc有值
if(fileSrc){
//获取界面隐藏input的值 就是所有文件路径值 然后处理删除要删掉的路径
var filesSrc=[];
var filesNewSrc=[];
filesSrc=$("[name='" + fileInputKey + "']").val().split("|");
for(var i=0;i0) {
var ext = fileName.substring(sp+1);
if(filenames.indexOf("."+ext+".")>=0)
return ext;
else
return defile;
}
return defile;
}
function getQueueStats() {
if (sumFile == 0) {
return true;
}
return false;
}
function removeFile1(feildName,src,headFeildName){
var value = $("#"+headFeildName).val();
if(src!=undefined){
$("#FD_"+feildName).remove();
var nowVal = value.replace(src+'|','');
$("#"+headFeildName).val(nowVal);
}else{
$("#FD_"+feildName).remove();
$("#"+feildName).val('');
}
} 这是表单的其中一个附件上传字段
选择图片
也面加载的时候初始化附件字段
$(function () {
//单位logo
fileInit('hyd80704dwlog67',1);
//统一代码证附件
fileInit('hyd80704tydmz71',1);
//模态框里的资质附件
$('#myModal').on('shown.bs.modal', function (e) {
fileInit('zzd80801zzfj004',1);
});
});这个是从信息确认页面调回表单修改时附件的赋值处理
