首先在页面上添加 valums-ajax-upload-6f977de支持
添加ajaxupload.js 到指定文件 并引入
同时要引入jquery.js
首先要对使用的按钮添加选择文件的事件 在页面初始化时对指定的按钮添加该事件
//ajax文件上传
$(document).ready(function(){
//取名字是jreportName的所有input标签 并添加上传事件
$("input:[name=jreportName]").each(function(){
new AjaxUpload(this, {
action: '<%=path%>/manager/toUploadReportFile.do?',
name: 'uploadFile',
onSubmit : function(file, ext){
var bid= this._button.id;
var bianhao=bid.split("jreportName_")[1];
var batchTxts =document.getElementById("batchTxt_"+bianhao).innerHTML ;
var commodityIds=document.getElementById("commodityId").value
var validityDates=document.getElementById("validityDate_"+bianhao).innerHTML;
this.setData({
'batchTxt':batchTxts,
'commodityId': commodityIds,
'validityDate':validityDates
});
this.disable();
},
onComplete: function(file, response){
if(response=='fail'){
alert('上传文件大小超过限制60M 出错错误');
this.enable();
return;
}
this.enable();
var bid= this._button.id;
var bianhao=bid.split("jreportName_")[1];
document.getElementById("number_"+bianhao).innerHTML=file;
document.getElementById("realTestUrl_"+bianhao).innerHTML=file;
document.getElementById("number_"+bianhao).href="javascript:showTestReportContent('"+response+"','realTestUrl_"+bianhao+"')";
}
});
});
});
由于不能用javascrip去控制文件的大小 我们使用strust2的控制机制
在struts.properties中添加一行
struts.multipart.maxSize=62914560
表示最大上传大小是60M 默认是2M 这里必须用字节来表示
如果仅仅这样做就运行 那么当文件超过60M时 就会出现 js无法获取回调 此时 后台抛出错误
前台ie也抛出错误说没有权限 此时我们需要去捕捉这个错误
从strut2着手 如果出现错误struts2 默认是调转到 result 名称为input的页面 定义一个error.jsp
error.jsp中就只写 fail这个字符串 不需要其他的
在action配置添加
<result name="input " value="error.jsp"/>
此时 在onComplete 函数中 如果response返回的是fail就说明跳转到 error。jsp中去了
就说明文件超出限制 弹出文件大小超出限制的提示
强调这里用的是ajax上传文件不是普通的表单流