jQuery的ajax中使用FormData实现页面无刷新上传功能


Posted in Javascript onJanuary 16, 2017

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。关于FormData,大家可以看MDN文档。

1,先看效果图

jQuery的ajax中使用FormData实现页面无刷新上传功能

期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击“ajax提交”,将文件上传至服务器,上传成功后,页面给出一个简单的提示。

2,前端的代码

看下html代码:     

<div class="box">
    <div>
     <div class="item">
      <input type="file" name="myfile" style="font-size: 0.7rem;">
     </div>
     <div class="item">
      <button type="button" style="display: block; padding: 4px 18px;" class="btn-default">ajax提交</button>
     </div>
     <div class="item">
      <button type="submit" style="display: block; padding: 4px 18px;" class="btn-default">form提交</button>
     </div>
    </div>
    <div class="prompt" style="font-size: 0.7rem;"></div>
   </div>
   <script src="../../js/jquery-3.1.0.min.js"></script>
   <script src="upload01.js"></script>

代码很简单,需要注意的是页面中没有用到form表单,那么怎么提交数据呢,答案是用FormData来模拟表单中的 <input type="file" name="myfile"> 控件。另外,页面中的样式没有写出来。下面来看下html中引入的upload01.js代码,这个是重点。

upload01.js代码:

$(function($) {
  $('input[name=myfile]').on('change', function(e) {
   $('button[type=button]').on('click', function(e) {
    var formData = new FormData();
    // formData.ppend(name, element);
    formData.append('myfile', $('input[name=myfile]')[0].files[0]);
    $.ajax({
     url: 'upload.php',
     method: 'POST',
     data: formData,
     contentType: false, // 注意这里应设为false
     processData: false,
     cache: false,
     success: function(data) {
     if (JSON.parse(data).result == 1) {
       $('.prompt').html(`文件${JSON.parse(data).filename}已上传成功`);
      }
     },
     error: function (jqXHR) {
      console.log(JSON.stringify(jqXHR));
     }
    })
    .done(function(data) {
     console.log('done');
    })
    .fail(function(data) {
     console.log('fail');
    })
    .always(function(data) {
     console.log('always');
    });
   });
  });
 });

(1) 下面解释下FormData,涉及到了代码的第4、6、10行。

第4行 var formData = new FormData(); 实例化了一个空的FormData对象,可以认为它就是一个form表单,但现在里面什么控件都没有。

第6行 formData.append('myfile', $('input[name=myfile]')[0].files[0]); ,给实例化的formdata对象添加一个控件,注意这里添加的是已有控件 <input type="file" name="myfile" style="font-size: 0.7rem;"> (见html代码第4行)。

FormData.append(name, value, filename)方法可以很方便的以“键-值”对的形式给FormData添加控件,注意第3个参数“上传文名”是可选的,它的具体语法和用法见FormData。

第10行,将实例化的formData作为jQuery.ajax()方法data参数的值传递进去,提交给后端服务器。

(2) 再解释下ajax()方法中的contentType、processData参数。

contentType参数,发起http请求时设置的请求头中的contentType。jQuery.ajax()默认的值为:'application/x-www-form-urlencoded; charset=UTF-8',这个在大多数情况下都是适用的。

但经过测试,保持默认时会报错,因为发送的数据中有input type="file"(上传文件),那么这时contentType应该设置为'multipart/form-data',但如果指定为这个类型服务端(php)就会报这个错误: Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 。具体原因现在还不清楚,所以这里先将contentType设置为false,即不让jQuery设置contentType。

processData参数,根据jQuery.ajax()文档中的解释,默认情况下,jQuery会处理发送的数据,将数据按照'application/x-www-form-urlencoded'的要求转换为查询字符串,如果要发送的数据是DOMDocument或者不需要处理,就可以设置为false不让jQuery转换数据,我们这里要发送的数据其实就是DOMDocument。

经过测试,如果保持默认(true)的话,在发起请求前js会报错: TypeError: 'append' called on an object that does not implement interface FormData.

另外还有个dataType参数,期望从服务器中返回的数据格式,这里最好也不要指定,而是让jquery自己根据http响应头中的contentType判断,然后返回一个合适的数据类型。指定后不会影响后台程序的逻辑处理,但你在前端接收的数据很可能不是期望的数据,于是js就会报这一类错误: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data ,这个是将dataType指定为json后报的错误。

3,后端的php代码

后端服务器是nginx,用php来处理发送过来的数据,代码也很简单:

<?php
 // var_dump($_REQUEST); // 为空数组
 // var_dump($_FILES); //不为空 
 // 当使用FormData配合ajax上传文件时,$_REQUEST、$_POST都是null,php://input也是null
 if (isset($_FILES) && !empty($_FILES)) {
  if (move_uploaded_file($_FILES['myfile']['tmp_name'], $_FILES['myfile']['name'])) {
   echo '{"result": 1, "filename": "' . $_FILES['myfile']['name'] . '"}';
  } else {
   echo '{"result": 0}';
  }
 }

代码的逻辑很简单这里就不多解释了。主要说下我在调试程序时遇到的问题,遇到的问题总结起来就一句话:当使用FormData配合ajax上传文件时,$_REQUEST、$_POST都是空数组,php://input也是null。可以看到,我在代码中的第2、3、5行也写了相关的注释。为什么$_REQUEST会是空呢?我查了些资料,但没找到原因,以后再找原因吧。

以上所述是小编给大家介绍的jQuery的ajax中使用FormData实现页面无刷新上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
JS实现随机点名器
Apr 12 Javascript
vue实现购物车案例
May 30 Javascript
Node.js中用D3.js的方法示例
Jan 16 #Javascript
JavaScript实现的select点菜功能示例
Jan 16 #Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 #Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 #Javascript
js实现弹窗暗层效果
Jan 16 #Javascript
js实现简单的计算器功能
Jan 16 #Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
第一个Vue插件从封装到发布
2017/11/22 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
Python中join和split用法实例
2015/04/14 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python 数据类型强制转换的总结
2021/01/25 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
行政经理岗位职责
2015/04/15 职场文书
人力资源部工作计划
2019/05/14 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
总结Python变量的相关知识
2021/06/28 Python