jquery使用FormData实现异步上传文件

考虑一个常见的用户上传头像的场景：

  • 点击按钮，弹出文件选择框
  • 选中图片并确认后直接上传图片

实现这个功能，需要使用<input>来添加文件，并实现上传功能。传统的上传文件是将<input>放到<form>中提交，但在这个场景中并不存在form表单，只有一个input而已。那么应该如何处理呢？

答案是可以使用FormData来实现文件的提交。

先看一下MDN对FormData的介绍：

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

这样一来，解决问题的思路就出来了：

  • 每次选中文件并确认后，<input>会触发change事件，在onchange事件处理函数中处理即可。
  • 创建一个FormData对象，并将选中的文件追加进去。
  • 使用Ajax发送这个FormData对象。

下面用一个Demo展示具体的代码实现用FormData将文件发送到一个php：

<html>
<head>
  <title>Upload</title>
  <meta charset="utf-8">
</head>
<body>
  <input id="file-input" type="file">

  <script>
    var input = document.getElementById('file-input');
    input.onchange = function () {
      var data = new FormData();
      data.append('file', input.files[0]);

      var request = new XMLHttpRequest();
      request.open('POST', './upload.php');
      request.send(data);
    };
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery利用FormData上传文件实现批量上传

    jQuery利用FormData上传文件实现批量上传

    在项目中涉及题库的批量上传功能,在此利用formdata进行文件上传,后台读取,进行批量插入.同时还需要带入teacherId和courseId两个参数,所以将文件和两个参数append到formdata中,传到后台. JQuery 函数的提交按钮执行的函数如下: <script type="text/javascript"> //批量上传题库 function fileSubmit() { var questionFile = new FormData(); var fi

  • jQuery+formdata实现上传进度特效遇到的问题

    总结我做HTML5文件上传插件遇到的技术问题 先贴上源码:fileupload-html5.js(PS:公司使用seajs框架) 问题列表 1. JQUERY.AJAX没有监听上传进度的ONPROGRESS事件. 2. XMLHTTPREQUEST(XHR)跨域 问题解答 1. JQUERY没有给出ONPROGRESS事件的接口,必须从其他接口中找到原生XHR对象. jQuery.ajax()返回的是jqXHR对象.jqXHR模仿XHR(原生),但没有模仿实现XHR的所有方法和属性(如:.upl

  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

  • jQuery用FormData实现文件上传的方法

    前言 我们引入jQuery来进行异步上传可以获得更好的用户体验. 一方面,在JavaScript中进行异步操作比表单更加灵活: 另一方面,异步上传也避免了上传大文件时的页面长时间卡死. HTML 一个type=file的<input>就可以让用户来浏览并选择文件, 一般会把输入控件放到一个<form>中,下面的一个简单的表单: <form> <input type="file" id="avatar" name="

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

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

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • jquery使用FormData实现异步上传文件

    考虑一个常见的用户上传头像的场景: 点击按钮,弹出文件选择框 选中图片并确认后直接上传图片 实现这个功能,需要使用<input>来添加文件,并实现上传功能.传统的上传文件是将<input>放到<form>中提交,但在这个场景中并不存在form表单,只有一个input而已.那么应该如何处理呢? 答案是可以使用FormData来实现文件的提交. 先看一下MDN对FormData的介绍: XMLHttpRequest Level 2添加了一个新的接口FormData.利用Fo

  • PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

  • JQuery插件ajaxfileupload.js异步上传文件实例

    在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码 代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script

  • jQuery插件ajaxFileUpload实现异步上传文件效果

    ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url   上传处理程序地址. 2,fileElementId   需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,scri

  • Jquery实现跨域异步上传文件总结

    Jquery实现跨域异步上传文件总结

    先说明白 这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可. 1.Jquery.form的使用 <form method="post" action=

  • jquery uploadify和apache Fileupload实现异步上传文件示例

    jQuery Uploadify + Apache Fileupload异步上传文件示例1.可以限制上传文件大小和类型,理论上任何类型的文件都可以上传(自己根据api配置即可):2.后台使用Apache commons-fileupload-1.3.1.jar作为上传工具包,本示例支持一次性多文件上传:3.文件上传目录可以任意指定,请在web.xml中配置:Uploadify api 详见http://www.uploadify.com/documentation/ FileUploadServ

  • jQuery实现jQuery-form.js实现异步上传文件

    做为一个前端开发,你肯定遇到过这样的需求:异步上传文件,还要兼容IE 8.[纳尼,没遇到过,那你们产品和UI对你也忒好了吧. 遇到这种需求,如果项目不是很赶,可以自己用iframe来做,如果项目比较赶的话,就可以使用jquery-form.js插件来实现,方便快捷. 一.举个栗子 1.先下载 JQuery-form.js文件并引入,也可以使用CDN,因为是jquery插件,所以需要先引入jquery. 2.html 部分: <form action='' enctype="multipar

  • jQuery.form插件的使用及跨域异步上传文件

    jQuery.form插件的使用及跨域异步上传文件

    先说明白 这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加 access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可. 再做事 1 Jquery.form的使用 <form method="post" ac

  • 利用jQuery异步上传文件的插件用法详解

    现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法 这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post

  • Jquery异步上传文件代码实例

    这篇文章主要介绍了Jquery异步上传文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一,view代码 <form role="form"> <div class="form-group"> <label for="keyinput">选择文件:</label> <input type="file" name=

随机推荐