前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件。所以此处使用ajaxfileupload.js,后台使用的框架是SSH,所以写了一个servlet来处理上传附件。
ajaxfileupload.js是一个异步上传文件的jQuery插件
语法:$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址。
2,fileElementId 需要上传的文件域的ID,即的ID。
3,secureuri 是否启用安全提交,默认为false。
4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type 当要提交自定义参数时,这个参数要设置成post
错误提示:
1,SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问
2,SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3,SyntaxError: invalid property id错误
如果出现这个错误就需要检查文本域属性ID是否存在
4,SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件name是否一致或不存在
代码部分:
HTML:
提交
JavaScript:
/**
* 上传附件
* @param fileId 附件上传input ID
* @param sourceType 上传类型 1、任务附件 2、回复附件 3、 任务结束附件
* @param fileList 显示附件列表容器id
* @param textFile 显示选中附件名称容器id
* @returns {Boolean}
*/
function ajaxFileUpload(fileId,sourceType,fileList,textFile) {
var replyId = $("#replyId").val();
if(sourceType != 2){
replyId = "";
}
if(replyId == undefined){
replyId="";
}
//显示正在上传的文件
$("#fileList tr").css("display","");//显示正在上传的文件
var taskId = $("#taskId").val();
var userid = $("#userID").val();
var name = $("#userName").val();
var url = "/Upload?taskId="+taskId+"&replyId="+replyId+"&userid="+userid+"&name="+name+"&sourceType="+sourceType+"&isApp=noapp";
if($("#"+fileId).val()!=""){
$.ajaxFileUpload
(
{
url: url, //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: fileId, //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
if(status=="success" && data.message=="success"){
//alert("上传成功");
$("#"+fileList).empty();
for(var i=0;i
var html='
'+'
成功'+'
'+data.list[i].fileName+' - '+data.list[i].fileSize/1000+'K'+"
"+'
';$("#"+fileList).append(html);
}
if(sourceType == "3"){//如果是结束任务时上传的附件,需要局部刷新附件列表
getTaskAnnexList(taskId);
}
$("#"+textFile).val("");
var file = $("#"+fileId);
file.after(file.clone().val(""));
file.remove();
}else if(status=="success" && data.message=="failure"){
alert(data.result);
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}else{}
}
/**
* 显示选中的文件(一个显示名字,多个显示个数)
* @param obj
* @param textFile 显示选中附件名称容器id
* @param fileList 显示附件列表容器id
*/
function showUploadFileName(obj,textFile,fileList){
var t_files = obj.files;
for (var i = 0, len = t_files.length; i < len; i++) {
if(t_files[i].size>10*1024*1024){
alert(t_files[i].name+" 大小超过了10M了,请重新上传");
return;
}else{
if(t_files.length>1){
$("#"+textFile).val(t_files[0].name+"等"+t_files.length+"个文件");
}else{
$("#"+textFile).val(obj.value);
}
}
var html = '
'+'
上传'+'
'+t_files[i].name+' - '+t_files[i].size/1000+'K'+'
'+'
';$("#"+fileList).prepend(html);