ajaxfileupload.js文件上传插件总结

1.下载AjaxFileUpload.js插件

2.修改ajaxfileupload.js文件中的uploadHttpData方法(蓝色部分为修改内容)：

　　原方法：

　　uploadHttpData: function( r, type ) {
　　　　var data = !type;
　　　　data = type == "xml" || data ? r.responseXML : r.responseText;
　　　　// If the type is "script", eval it in global context
　　　　if ( type == "script" )
　　　　　　jQuery.globalEval( data );
　　　　// Get the JavaScript object, if JSON is used.
　　　　if ( type == "json" )
　　　　　　eval( "data = " + data );
　　　　// evaluate scripts within html
　　　　if ( type == "html" )
　　　　　　jQuery("<div>").html(data).evalScripts();

　　　　return data;
　　}

　　修改后的方法：

　　uploadHttpData: function( r, type ) {
　　　　var data = !type;
　　　　data = type == "xml" || data ? r.responseXML : r.responseText;
　　　　// If the type is "script", eval it in global context
　　　　if ( type == "script" )
　　　　　　jQuery.globalEval( data );

　　　　// Get the JavaScript object, if JSON is used.
　　　　if ( type == "json" ){
　　　　　　data = r.responseText;
　　　　　　var start = data.indexOf(">");
　　　　　　if(start != -1){
　　　　　　　　var end = data.indexOf("<", start + 1);
　　　　　　　　if(end != -1){
　　　　　　　　　　data = data.substring(start + 1, end);
　　　　　　　　}
　　　　　　}
　　　　　　eval( "data = " + data );
　　　　}

　　　　// evaluate scripts within html
　　　　if ( type == "html" )
　　　　　　jQuery("<div>").html(data).evalScripts();

　　　　return data;
　　}

3.在ajaxfileupload.js文件中添加handError方法：

　　handleError: function( s, xhr, status, e ) {
　　　　if ( s.error ) {
　　　　　　s.error.call( s.context || s, xhr, status, e );
　　　　}
　　　　if ( s.global ) {
　　　　　　(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
　　　　}
　　}

4.jsp页面代码如下：

　　<tr>
　　　　<td>
　　　　　　<label>应用图标：</label>
　　　　　　<table><tr>
　　　　　　　　<td><img src="http://drmcmm.baidu.com/media/id=rHczrjT3PWf&gp=403&time=nHndnWcdPjnvP6.jpg" alt="图标" style="width:40px"/>&nbsp;&nbsp;</td>
　　　　　　　　<td><input type="file" maxlength="255" style="width:65px" id="imageFile" name="imageFile" value=""/>&nbsp;&nbsp;</td>
　　　　　　　　<td>支持jpg, png格式<br>尺寸：72*72 114*114 180*180</td>
　　　　　　</tr></table>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td><label>URL地址:</label><input type="text" name="commandURL" id="commandURL" style="width:250px;"/></td>
　　</tr>

5.提交表单的js代码：

　　addXXXFunction:function(){
　　　　var appId = $("#appId").val();
　　　　var commandName = $("#commandName").val();
　　　　var commandURL = $("#commandURL").val();
　　　　var summary = $("#summary").val();
　　　　var commandStyle = "0";
　　　　var parameterType = $("#parameterType").val();
　　　　var applicationArea = $("#applicationArea").val();
　　　　var image = $("#imageFile").val();

　　　　//data为额外传入表单的数据
　　　　var data = {"applicationCommand.appId":appId, "applicationCommand.url":commandURL,"applicationCommand.summary":summary, "matchCommandVO.commandName":commandName, "matchCommandVO.commandStyle":commandStyle, "matchCommandVO.parameterType":parameterType, "matchCommandVO.applicationArea":applicationArea,"matchCommandVO.image":image};
　　　　$.ajaxFileUpload(
　　　　　　{
　　　　　　　　url:"/yuyicloud/command/command_insertCommand.htm",

　　　　　　　　secureuri:false,
　　　　　　　　data:data,　　//添加额外的表单数据
　　　　　　　　fileElementId:'imageFile',　　//此处必须与jsp页面的file id相同
　　　　　　　　dataType:'json',
　　　　　　　　success:function(data,status){
　　　　　　　　　　if(data == "0"){
　　　　　　　　　　　　parent.location.reload();
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　error:function(data,status,e){
　　　　　　　　　　alert("请重新添加网页应用");
　　　　　　　　　　parent.location.reload();
　　　　　　　　}
　　　　　　}
　　　　)
　　　　return false;
　　}

6.java文件相对应的方法：

　　

if(imageFile != null){
　　FileInputStream in = new FileInputStream(imageFile);
　　matchCommandVO.setId(getUUIDString());
　　String name = matchCommandVO.getId();
　　matchCommandVO.getImage();
　　String arg = matchCommandVO.getImage().substring(matchCommandVO.getImage().lastIndexOf("."));

　　//文件被保存的目标地址(当前项目所在服务器的特理路径)
　　String imgPath = ServletActionContext.getServletContext().getRealPath("/") + "\\commandImage\\" + name + arg;

　　//文件被引用的URL地址(及被存储到数据库中的url路径)
　　matchCommandVO.setImage("http://localhost:8090" + ServletActionContext.getServletContext().getContextPath() + "\\commandImage\\" + name + arg);
　　File file = new File(imgPath);
　　FileOutputStream outStream = new FileOutputStream(file);
　　byte buffer[] = new byte[in.available()];
　　in.read(buffer);
　　outStream.write(buffer);
　　in.close();
　　outStream.close();

　　........

　　//额外的表单参数处理

　　........
}