我们做的这个项目，表单比较多，附件也比较多，一个表单可能有好几个附件字段，包括单附件，多附件。
项目用的前端框架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 = $("<div id=\"" + file.id + "\" class=\"file-item \"><img><div class=\"info\">"
+ "<span class=\"fileTitle list\" title=\"下载文件--" + file.name + "\">" + file.name + "</span><span class=\"remove\">"
+ "</span></div></div>"),
$img = $li.find("img");
$imgList.append( $li );
// 创建缩略图// 如果为非图片文件，可以不用调用此方法。// thumbnailWidth x thumbnailHeight 为 16 x 16
uploader.makeThumb( file, function( error, src ) {
//如果是err 那就代表着没法预览
if ( error ) {
var fileIcon="<img style=\"display:inline-block;float:left;\" src=\"/xjkcsj/resources/images/fileUpload/";
$img.replaceWith(fileIcon + getFileExtImg(file.name) + "16.gif\"/>");
return;
}
//如果不是发生错误则是图片
$img.replaceWith("<img style=\"display:inline-block;float:left;\" src=\"" + src + "\" />");
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
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, data) {
$('#'+fileInputKey).val(data.path);
$("#" + file.id).find(".remove").html("<a style='margin-left: 20px' class='fa fa-trash-o fa-lg' href='javascript:void(0)' title='" + data.path+ "' onclick=\"removeFile('"+fileInputKey+"','"+file.id+"','"+data.path+"')\"></a>");
$("#" + file.id).find(".fileTitle").wrap("<a style='display:inline;' href='/xjkcsj/downloadFile?path=" +data.path + "' target='_blank'></a>");
});
// 文件上传失败，显示上传出错。
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 = $("<div id=\""+file.id +"\" class=\"file-item \"><img><div class=\"info\"><span class=\"fileTitle list\" title=\"下载文件--"+file.name+"\">"+file.name +"</span><span class=\"remove\" ></span></div></div>"),
$img = $li.find("img");
$imgList.append($li);
// 创建缩略图// 如果为非图片文件，可以不用调用此方法。// thumbnailWidth x thumbnailHeight 为 16 x 16
uploader.makeThumb( file, function( error, src ) {
//如果是err 那就代表着没法预览
if ( error ) {
var fileIcon="<img style=\"display:inline-block;float:left;\" src=\"/xjkcsj/resources/images/fileUpload/";
$img.replaceWith(fileIcon + getFileExtImg(file.name) + "16.gif\"/>");
return;
}
//如果不是发生错误则是图片
$img.replaceWith("<img style=\"display:inline-block;float:left;\" src=\""+src+"\" />");
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
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,data) {
var value= $('#'+fileInputKey).val();
$('#'+fileInputKey).val(value+data.path+"|");
//在本id中重写remove里的内容
$("#"+file.id).find(".remove").html("<a style='margin-left: 20px' class=\"fa fa-trash-o fa-lg\" href=\"javascript:void(0)\" title=\""+data.path+"\" onclick=\"removeFile('"+fileInputKey+"','"+file.id+"','"+data.path+"')\"></a>");
$("#" + file.id).find(".fileTitle").wrap("<a class='list' href='/xjkcsj/downloadFile?path=" +data.path + "' target='_blank'></a>");
});
// 文件上传失败，显示上传出错。
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;i<filesSrc.length;i++){
if(filesSrc[i]!=fileSrc) {
filesNewSrc.push(filesSrc[i]);
}
}
$("[name='" + fileInputKey + "']").val(filesNewSrc.join("|"));
//删除服务器上的图片
//暂时先不对附件进行删除
//$.post("/ProjManager/FileDeleteServlet",{fileSrc:fileSrc});
}
}
}
function getFileExtImg(fileName) {
var filenames = ".dwg.plt.doc.dxf.htm.pdf.ppt.xls.bmp.gif.jpg.psd.tga.tif.zip.txt.html.docx.xlsx.pptx.";
var defile = "file";
var sp = fileName.lastIndexOf(".");
if(sp>0) {
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('');
}
}这是表单的其中一个附件上传字段
<div class="form-group">
<label for="" class="col-sm-2 control-label required">单位logo</label>
<div class="col-sm-10">
<div id="FP_hyd80704dwlog67" >选择图片</div>
<input type="hidden" name="hyd80704dwlog67" id="hyd80704dwlog67"/>
<!--用来存放文件信息-->
<div id="FL_hyd80704dwlog67" class="uploader-list">
</div>
</div>
</div>也面加载的时候初始化附件字段
$(function () {
//单位logo
fileInit('hyd80704dwlog67',1);
//统一代码证附件
fileInit('hyd80704tydmz71',1);
//模态框里的资质附件
$('#myModal').on('shown.bs.modal', function (e) {
fileInit('zzd80801zzfj004',1);
});
});这个是从信息确认页面调回表单修改时附件的赋值处理
<div class="form-group">
<label for="" class="col-sm-2 control-label required" >单位logo</label>
<div class="col-sm-10">
<div id="FP_hyd80704dwlog67" >选择图片</div>
<input type="hidden" name="hyd80704dwlog67" id="hyd80704dwlog67" value="${memberapply.hyd80704dwlog67}"/>
<!--用来存放文件信息-->
<div id="FL_hyd80704dwlog67" class="uploader-list">
<div id="FD_hyd80704dwlog67" class="file-item ">
<img style="width:16px;height:16px;display:inline-block;float:left;" src="/${memberapply.hyd80704dwlog67}">
<div class="info">
<a href="${pageContext.request.contextPath}/downloadFile?path=${memberapply.hyd80704dwlog67}" target="_blank">
<span class="fileTitle" title="下载文件--${fn:substring(memberapply.hyd80704dwlog67,fn:indexOf(memberapply.hyd80704dwlog67, "-")+1,fn:length(memberapply.hyd80704dwlog67))}">${fn:substring(memberapply.hyd80704dwlog67,fn:indexOf(memberapply.hyd80704dwlog67, "-")+1,fn:length(memberapply.hyd80704dwlog67))}</span>
</a>
<span class="remove">
<a style="margin-left: 20px" class="fa fa-trash-o fa-lg" href="javascript:void(0)" title="${memberapply.hyd80704dwlog67}" onclick="removeFile1('hyd80704dwlog67')">
</a>
</span>
</div>
</div>
</div>
</div>
</div>
扫一扫
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
