美文网首页H5技术文章前端成长路
通过jQuery Ajax使用FormData对象上传文件

通过jQuery Ajax使用FormData对象上传文件

作者: Agreal | 来源:发表于2015-06-03 11:54 被阅读128875次

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。

    Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。

    但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQueryAjax上传呢?
    本文将介绍通过jQuery使用FormData对象上传文件。

    使用<form>表单初始化FormData对象方式上传文件

    HTML代码

    <form id="uploadForm" enctype="multipart/form-data">
        <input id="file" type="file" name="file"/>
        <button id="upload" type="button">upload</button>
    </form>
    

    javascript代码

    $.ajax({
        url: '/upload',
        type: 'POST',
        cache: false,
        data: new FormData($('#uploadForm')[0]),
        processData: false,
        contentType: false
    }).done(function(res) {
    }).fail(function(res) {});
    

    这里要注意几点:

    • processData设置为false。因为data值是FormData对象,不需要对数据做处理。
    • <form>标签添加enctype="multipart/form-data"属性。
    • cache设置为false,上传文件不需要缓存。
    • contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

    上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"

    如果不是用<form>表单构造FormData对象又该怎么做呢?

    使用FormData对象添加字段方式上传文件

    HTML代码

    <div id="uploadForm">
        <input id="file" type="file"/>
        <button id="upload" type="button">upload</button>
    </div>
    

    这里没有<form>标签,也没有enctype="multipart/form-data"属性。

    javascript代码

    var formData = new FormData();
    formData.append('file', $('#file')[0].files[0]);
    $.ajax({
        url: '/upload',
        type: 'POST',
        cache: false,
        data: formData,
        processData: false,
        contentType: false
    }).done(function(res) {
    }).fail(function(res) {});
    

    这里有几处不一样:

    • append()的第二个参数应是文件对象,即$('#file')[0].files[0]
    • contentType也要设置为‘false’。

    从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件,
    只需要在<input type="file">里添加multiplemultiple="multiple"属性。

    服务器端读文件

    Servlet 3.0 开始,可以通过 request.getPart()request.getPars() 两个接口获取上传的文件。
    这里不多说,详细请参考官网教程 Uploading Files with Java Servlet Technology 以及示例 The fileupload Example Application

    参考

    相关文章

      网友评论

      • 正强Strong:不错不错,多谢分享
      • f108de8f7759:谢谢聚聚大人,方案二解决了我的问题:blush:
      • f235b0983d68:谢谢楼主分享,简洁明了,得到了帮助,非常感谢。
      • longhaiyan:老铁们,传值的时候看一下你的 Content-Type, 如果不是类似 multipart/form-data; boundary=----WebKitFor 这样的,就要看看 formData 用的是不是 原生js拿到的 from 或 input 对象,亲测 $('form')[0] 来拿对象是不行的,最好用 document.getElementsByName('form') 来拿 form 对象
      • 最后只剩躯壳:我现在需要用node.js接收上传图片,这篇文章刚好解决了我的问题。
      • af752e184609:谢谢楼主,加油。已关注:pray:
      • 4b74e6055137:按你的方法 提交后 network里面的request pavload显示 Object Object是正确的吗?没加之前是可以看到其他的提交信息的,现在只能看到 Object
        Agreal: @淩乿尐年華 肯定是错的
      • d1aea9735eb8:在上传文件上卡了一个礼拜,加了几个options就搞定。长知识了。
        黄黄黄ye:@b092f65f4428 最后解决了吗,我也有同样的错误
        b092f65f4428:@金瓜兜儿 我用表单post提交成功,按这个文章换成ajax请求报错400,整一天了,求解答
      • noseew:文件大小判断怎么处理
      • f47666c03869: final Part filePart = request.getPart("file");一直报错,cannot resolve getPart(),我的maven如下:
        <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>3.1.0</version>
        </dependency>
      • 14e991dfad7b:请教下能用formdata blob ajax请求数据吗?不上传文件
        Agreal:@强子120829 这个可以研究下
      • 随它去吧i:可以,谢谢,分享
      • 刘祐:Struts2 在 Action 里面有办法获取到 FormData 吗?
      • LiYajie:不错
      • 迪壳:非常不错.. 需要注意的是.. 第二种是不是div的jquery对象 而是input的jquery对象
      • d97b81b223be:请问,formdata 用来提交表单 那我接收后台传来的数据的时候可以用formdata吗? ?
      • 6cd77c53c6df:写的不错,打赏表示感谢了,不过,我遇到一个问题是:可以上传jpeg ,txt 这些文件,对于rar、zip、doc都不能上传?有格式要求吗?
      • 491233376278:第二种真的不行啊大哥
        黄黄黄ye:我也遇到了同样的问题
        黄黄黄ye:最后可以了吗
      • f2c48d756bf2:请问formData.append('file', $('#file')[0].files[0]);无法添加文件是什么原因呢?打印formData的值为空
      • 4e9aca517415:这个formdata 上传几十mb文件 比较慢哈,长时间没反应。怎么解决。
        Agreal:@4e9aca517415 慢的原因有网络带宽等很多因素导致,这个无法破;可以从用户感官体验的角度去设计,比如上传文件的进度条等多种表现手段
      • 木头lbj:很棒~ 通俗易懂
      • 5a651289cd98:LZ 可有用这种方式尝试过多个文件的上传?
        Agreal:@tber 上传单个和多个大同小异,看他的 API 吧
      • c7cb559bcc2d:请问这个对IE浏览器兼容吗 如果不兼容 有办法让它兼容吗
        Agreal:@十一路客 FormData 对象是浏览器的原生对象。可以在 http://caniuse.com 网站查看浏览器兼容性。
      • Fordream001:啊真的是太感谢了,之前对这个一直有疑惑
      • de51fd26884e:感谢。用了很多插件都不兼容。还是自己写吧。
      • 流离之人:你好!我试了你的代码,在第二种方法内,formData为什么一直是空的呢??江湖救急啊!!!谢谢
        9590e6703297:@信鑫_King 66
        流离之人:我现在用的execCommand的方法实现的,模拟一个隐藏的textarea。你可以谷歌一下
        信鑫_King:@流离之人 同问
      • 熊猫骑士:牛逼!我记得jQuery还有个ajaxFileUpload的插件可以上传文件
      • 2720dd26cc24:博主直接救了我一命,感谢你第二部分的代码,正因为不知道要如何在没有<form>的情况下上传文件而烦恼,看了好久的MDN文档还是不得要领,感谢 :joy:
      • Agreal:@51b6fd1fb303 补上了后台读文件的参考,很简单的
      • 51b6fd1fb303:不错,学习了,刚好正在在找上传文件代码,原先准备使用现成的jquery插件的,这个完全可以满足要求。现在只是不知道后台代码,试试看再就吧
      • 51b6fd1fb303:不错,学习了,刚好正在在找上传文件代码,原先准备使用现成的jquery插件的,这个完全可以满足要求。现在只是不知道后台代码,试试看再就吧
        爱音乐的二狗子:@东吴帝国 额,这位大哥,我没有弄过php的哦,应该php也有封装好的类接收FormData对象吧,哈哈~帮不上你的忙:flushed:
        efd174f157fa:@IT子弟兵 哥们,知道php做后台怎么接收吗?网上查不到
        爱音乐的二狗子:这位兄弟,是java后台么?貌似用到Part类,我也是操作了其他人的博客,是这样写的,最后特么的真的成功了,激动!!!!http://www.cenliming.com/375.html :stuck_out_tongue_winking_eye:

      本文标题:通过jQuery Ajax使用FormData对象上传文件

      本文链接:https://www.haomeiwen.com/subject/ccqtfttx.html