宝哥软件园

jQuery Ajax使用表单数据对象上传文件的方法

编辑:宝哥软件园 来源:互联网 时间:2021-09-07

表单数据对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个'表单。在浏览器名开发人员网站使用表单数据对象有详尽的表单数据对象使用说明。但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的埃阿斯上传呢?本文将介绍通过jQuery使用表单数据对象上传文件。

使用形式表单初始化表单数据对象方式上传文件

超文本标记语言代码

表单id=' uploadForm ' enctype=' multipart/form-data '输入id=' file ' type=' file ' name=' file '/button id=' upload ' type=' button ' upload/button/form JavaScript代码

$.ajax({url: '/upload ',type: 'POST ',cache: false,data :新表单数据($(' # upload form ')[0]),processData: false,contentType: false}).完成(函数(res) {}).失败(函数(RES){ });这里要注意几点:

processData设置为假的。因为数据值是表单数据对象,不需要对数据做处理。

形式标签添加enctype="多部分/表单数据"属性。

躲藏设置为假的,上传文件不需要缓存。

contentType设置为假的。因为是由形式表单构造的表单数据对象,且已经声明了属性enctype='多部分/表单-数据,所以这里设置为假的。

上传后,服务器端代码需要使用从查询参数名为文件获取文件输入流对象,因为投入中声明的是名称='文件。如果不是用形式表单构造表单数据对象又该怎么做呢?

使用表单数据对象添加字段方式上传文件

超文本标记语言代码

div id=' uploadForm '输入id=' file '类型=' file '/button id=' upload '类型=' button '上传/button/div这里没有形式标签,也没有enctype="多部分/表单数据"属性javascript。代码

var formData=new formData();formData.append('file ',$('#file')[0]).文件[0]);$.ajax({url: '/upload ',type: 'POST ',cache: false,data: formData,processData: false,contentType: false}).完成(函数(res) {}).失败(函数(RES){ });这里有几处不一样:

追加()的第二个参数应是文件对象,即$("# file")[0].文件[0].

contentType也要设置为假的。从代码$("# file")[0].文件[0]中可以看到一个输入类型="文件"标签能够上传多个文件,只需要在输入类型="文件"里添加多个的或多重='多重'属性。

后台接收文件:

bean id=“多部分解析器”类=' org。弹簧框架。网络。多部分的。公地。“公共smultipartresolver”属性名称='defaultEncoding '值=' utf-8 '/bean @请求映射(值='/import_tg_resource ')公共modelAndview import _ TG _ resource(@ request param(值='文件',必选=false)多部分文件[]文件,HttpServletRequest请求,模型图模型){System.out.println('开始批量上传:文件数量:'文件。长度);对于(多部分文件文件:个文件){字符串路径=request.getSession().getServletContext().getRealPath('上传');字符串fileName=文件。getoriginalfilename();字符串前缀=FIlename。子字符串(FIlename。的最后一个索引(' .));文件名=新日期()。getTime()前缀;//System.out.println('保存路径路径);文件目标文件=新文件(路径,文件名);if(!目标文件。exists()){ TargetFIle。mkdirs();}文件。传输到(TargetFile);}}以上所述是小编给大家介绍的jQuery Ajax使用表单数据对象上传文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

更多资讯
游戏推荐
更多+