ajax异步图片/文件上传的实现_利用FormData对象

更新日期: 2018-06-12阅读量: 1636标签: 异步

在前后分离开发中,经常会遇到上传文件的情况,后端会有一个文件上传接口,通过ajax上传成功后返回图片地址url给前端。然后在把url和其他数据以前提交给后端保存到数据库。那么如何实现ajax异步文件上传功能呢?下面就介绍下利用FormData对象的实现方案。


html代码

<input type="file" name="file" id="imgUrl" onclick="upload()"/>


js代码

function upload(){
    var file=document.getElementById("imgUrl").files[0];
    var form=new FormData();
    form.append('file',file);//文件
    ajax({ 
        url: _url,
        type: 'post', 
        async:true,//同步
        success: function(r){  
            //成功后代码
        },
    ); 
}

备注:

1、如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传。

2、在ajax中content-type不要传递:'application/x-www-form-urlencoded' 或者 'application/json;charset=UTF-8',不要传默认为:multipart/form-data。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/873

ES6 Promise的执行顺序和异步性

我们知道Promise用来处理异步操作,异步操作的执行顺序是相对比较复杂的,如果再涉及到链式调用,则情况会变得更复杂。这篇文章会通过一个相对简单的代码示例来让大家对Promise的执行顺序和异步性有正确的理解

js异步加载方式有哪些?_详解异步加载js的多种方案

js异步加载又被称为非阻塞加载,浏览器在下载JS的同时,还会进行后续页面处理。那么如何实现js异步加载呢?下面整理了多种实现方案供大家参考。异步加载js方案:Script Dom Element、onload时的异步加载、$(document).ready()、async属性、defer属性、es6模块type=module属性

asap异步执行实现原理

Promise 异步执行是通过 asap 这个库来实现的。所以为了进一步深入 Promise 异步执行的原理,深入分析一下 asap 是有必要的。这里提及的Promise并不是Node和浏览器的原生实现,是一个第三方库实现,仅以此为参考。

解决Js异步回调的深层嵌套的3种方式

问题:解决异步回调的深层嵌套的问题.(回调地狱),promise对象用于表示一个异步操作的最终状态,promise在回调代码和将要执行这个任务的异步代码之间提供了一种可靠的中间机制来管理回调。

async 的异步操作模式

我还记得以前执行异步操作需要在越来越深的回调地狱中使用回调的那些“好日子”。虽然回调地狱并没有完全成为过去,但是使用 Promise 来代替回调的嵌套已经显得简单多了。

常见的异步编程的几种方法

回调函数:利用回调函数执行异步操作,把函数作为参数传递进去;Promise:将异步数据及相关操作封装在 Promise对象中,通过resolve返回;Rxjs将异步数据及相关操作封装在 Observable 中,通过next返回

处理异步事件的三种方式

在网站开发中,异步事件是项目必然需要处理的一个环节,也因为前端框架的兴起,通过框架实现的 SPA 已经是快速建构网站的标配了,一部获取数据也就成了不可或缺的一环;本文来就讲一讲 JavaScript 中异步的处理方式

node的异步处理是怎么做的呢?

Node.js以其速度而闻名,因为它是非阻塞的。非阻塞意味着一个请求不会等待另一个请求结束(也就是异步的)。异步这一特性使Node.js成为当前吞吐量最大的框架

js 多个异步的并发控制

请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。

JavaScript 异步编程史

早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!