文件上传中submit与ajax的问题与思考

文件上传在项目中经常需要，先上一段代码，用的easyUI

<form id="file_form" method="post" action="/upload"        enctype="multipart/form-data">        <div style="margin-bottom: 20px">            <div>任务名称:</div>            <input id="task_name" name="task_name" class="easyui-textbox"                style="width: 100%; height: 30px;">        </div>        <div style="margin-bottom: 20px">            <div>任务描述:</div>            <input id="task_descrption" name="task_descrption"                class="easyui-textbox" style="width: 100%; height: 30px;">        </div>        <div style="margin-bottom: 20px">            <div>类入口:</div>            <input id="task_mainClass" name="task_mainClass"                class="easyui-textbox" style="width: 100%; height: 30px;">        </div>        <div style="margin-bottom: 20px">            <div>文件：</div>            <input class="easyui-filebox" id="file" name="file"                data-options="prompt:'请选择文件...'" style="width: 100%; height: 30px;">        </div>        <div>            <a id="upload" href="#" class="easyui-linkbutton"                style="width: 100%; height: 30px;">上传</a>        </div>    </form>

注意：form中一定不要忘记设置enctype=”multipart/form-data”
那么接下来的问题来了，怎么将文件上传到服务器？通常有两种思路，一是采用submit方法，另一种采用ajax(有人可能要拍砖了，ajax不是不能上传文件吗？)

（1）submit

其实只需要使用

document.getElementById("file_form").submit();

或者

$("#file_form").submit();

注解1：如果采用表单名.submit()这种提交方式，可能会有一些问题，因为这种写法不符合W3C标准的规定的，在IE下没有报错因为IE支持这种写法，但是如果在FF下就会报错，建议采用上述的document的方式。

注解2：怎么知道文件是否上传成功了呢？很不幸的是submit没有返回值！

submit Method Submits the form.SyntaxFORM.submit()Return ValueNo return value.RemarksThe submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.

当然即使submit没有返回值，我们还是有手段去知道文件的上传进度和上传成功与否的状态！

（2）ajax
jQuery的ajax()方法使得前端与后台的交互变得更加的简单与便捷。ajax不是不能用于上传文件！有人不仅要问网上有很多ajax用于文件上传，在这里只能说那只是“表象”，他们基本原理都是用js创建一个内部窗体iframe，用创建的iframe去提交文件，实现不刷新当前页面的委ajax效果。

ajax为什么不能用于文件上传：ajax与后台通信都是通过传递字符串，怎么能传递文件呢？其实出于安全考虑js是不允许访问客户端的文件系统的（某些浏览器的插件除外），所以我们无法拿到文件控件里的数据。

当然网上有很多伪ajax的控件，如jquery.form.js /filesaver.js,如简单介绍jquery.form.js：

前端代码

$("#upload").click(function(){    $('#file_form').ajaxSubmit({          dataType : 'json',          success : function(data) {                                        }   });});

注意在form中已经填写了action的地址!
后端代码实现

@RequestMapping(value = "/upload", method = { RequestMethod.POST,            RequestMethod.GET })    @ResponseBody    public void upload(            final HttpServletRequest request, HttpServletResponse response,            @RequestParam(value = "file") MultipartFile... files)            throws IOException, Exception {        for (MultipartFile f : files) {            if (f.getSize() > 0) {                File targetFile = new File("D:/" + f.getOriginalFilename());                String filename = targetFile.getName();                f.transferTo(targetFile);// 写入目标文件                      }        }    }