一、ajaxFileUpload是一个异步上传文件的JQuery插件，下面列某一版本的ajaxFileUpload
语法：$.ajaxFileUpload([options])
options参数说明
1、url 上传处理程序地址(我们一般传给一个servlet处理)。
2、fileElementId 需要上传的文件域的ID，即<input type="file">的ID。
3、secureuri 是否启用安全提交，默认为false。
4、dataType 服务器返回的数据类型。可以为xml,script,json,html.如果不填写，jquery会自动处理。
5、success 提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6、error 提交失败自动执行的处理函数。
7、data 自定义参数。这个东西比较有用，当有数据是与上传的图片相关时，这个东西就要用到了。
8、type 当要提交自定义参数时，这个参数要设置成post
错误提示：
1、SyntaxError:mission;before statement错误（这个我遇到好几次了）
检查url路径是否可以访问
2、SyntaxError:syntax error错误
检查处理提交操作的服务器后台处理程序是否存在语法问题
3、SyntaxError:invalid property id错误
检查文本域属性ID是否存在
4、SyntaxError:mission } in XML expression
检查出现这个错误就需要检查文件那么是否一致或不存在
5、其他自定义错误
可以使用变量$error直接打印的方法检查各参数是否正确。
使用方法：
第一步：先引入jquery与ajaxfileupload插件，注意先后顺序，所有的插件都是这样的。
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
第二步：HTML代码：
<body>
<div id="news_add_newsInfo" class="easyui-dialog" title="添加新闻" data-options="fit:true,iconCls:'icon-add',resizable:true,modal:true,closed:true">
<form action="" style="padding:20px float:left;display:inline-block;">
<label>新闻类型</label>
<select name="tid" id="news_newstype" class="myinput">
</select><br/><br/>
<label>新闻标题:</label><input type="text" name="title" id="news_title" class="myinput"/><br/><br/>
<label>发布日期:</label><input name="ndate" id="news_ndate" class="easyui-datebox myinput" required/><br/><br/>
<label>新闻作者:</label><input type="text" name="auth" id="news_auth" class="myinput"/><br/><br/>
<label>新闻图片:</label><input type="file" name="pic" id="news_pic" multiple="multiple" οnchange="previewMultipleImage(this,'news_pic_show')"/><br/><br/>
<label>新闻权重:</label><input class="easyui-numberbox myinput" name="weight" id="news_weight" value="0"/><br/><br/>
<div>
<script id="editor" type="text/plain" style="width:800px;height:400px;">
</script>
</div>
<a id="add" href="javascript:addNewsInfo()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
</form>
<div style="float:right;width:380px;margin-right:20px;margin-top:30px;">
<fieldset id="news_pic_show">
<legend>图片预览</legend>
</fieldset>
</div>
</div>
</body>
第三步：JS代码
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
<script>var ue=UE.getEditor('editor');
function addNewsInfo(){
var tid=$("#news_newstype").val();
var title=$("#news_title").val();
var auth=$("#news_auth").val();
var ndate=$("#news_ndate").datebox('getValue');
var weight=$("#news_weight").val();
var content=ue.getContent();
$.ajaxFileUpload({
url:"../newsServlet?op=addNewsInfo",
secureuri:false,
fileElementId:"news_pic",
dataType:"json",
data:{tid:tid,title:title,auth:auth,ndate:ndate,weight:weight,content:content},
success:function(data,status){
if(parseInt($.trim(data))==1){//说明是成功的
$.messager.show({title:'成功提示',msg:'新闻信息修改成功...',timeout:2000,showType:'slide'});
$("#news_show_newsInfo").dialog("close");
$("#news_info").datagrid("reload");
}else{
$.messager.alert("失败提示","新闻信息添加失败...","error");
}
},
error:function(data,status,e){
$messager.alert("错误提示","新闻信息修改失败...\n"+e,"error");
}
});
}
</script>
第四步：后台addNewsInfo代码
private void addNewsInfo(HttpServletRequest request,HttpServletResponse response) {
UploadUtil uploadUtil=new UploadUtil();
PageContext pageContext=JspFactory.getDefaultFactory().getPageContext(this,request,response,null,true,1024,true);
try {
Map<String,String> map=uploadUtil.upload(pageContext);
int result=newsdao.addNews(new News(1,map.get("title"),map.get("ndate"),map.get("content"),map.get("auth"),map.get("photo"),Integer.parseInt(map.get("tid")),0,Integer.parseInt(map.get("weight")),map.get("tname")));
out.print(result);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
现在是2016年1月4号的下午17:43
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
