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

最新推荐文章于 2024-01-10 18:02:22 发布

Kevin.Yang

最新推荐文章于 2024-01-10 18:02:22 发布

阅读量3.5k

点赞数 2

分类专栏： Javascript/JQuery 文章标签：文件上传 submit ajax

本文链接：https://blog.csdn.net/ouyang111222/article/details/47010545

版权

Javascript/JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文件上传在项目中经常需要，先上一段代码，用的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.

Syntax

FORM.submit()
Return Value

No return value.

Remarks

The 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);// 写入目标文件          
            }
        }

    }