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

时间: 2018-06-12阅读: 1415标签: 异步

在前后分离开发中,经常会遇到上传文件的情况,后端会有一个文件上传接口,通过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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

NodeJs中的异步

这篇文章主要讨论NodeJs中的异步问题。使用NodeJs编写进程也一年多了,在公司实习的时候,公司两个项目的后台都是我负责使用NodeJs和Sails框架编写的。工作模式主要是我在服务器端提供RESTful接口

JavaScript 异步编程史

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

解决异步的几种实现方式

setTimeout为异步函数,所以第二个返回值就打印为了undefined,因为不会等待计时器函数执行完成再执行外层的console.log(request())。

Nodejs 处理异步(获取异步数据并处理)的方法

回调函数方式:将异步方法如readFile封装到一个自定义函数中,通过将异步方法得到的结果传给自定义方法的回调函数参数。事件驱动方式:使用node events模块,利用其EventEmitter对象

【JS】异步处理机制的几种方式

Javascript语言的执行环境是单线程,异步模式非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。

JavaScript 异步流程控制

本文主要讲解 JavaScript 在异步流程控制中的一些实践、容错以及复杂异步环境下我们该如何去处理。简要的提及一下,异步流程控制的发展历史大概是 callback hell => Promise => Generator => async/await

javascript如何实现异步请求?

JS中通常实现浏览器和服务器的数据交互,那么异步操作是关键的一部分:通常情况下,浏览器想服务器发送请求,服务器相应请求返回数据,浏览器执行异步操作。

asap异步执行实现原理

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

ES 新特性、异步、TypeScript

for 循环时是使用 var 定义循环变量 i (存在变量提升),然后依次为 a 数组元素赋值为一个函数,函数内打印 i;循环结束后调用 a[6]() ,相当于在全局环境下打印 i,而此时 i 已经变为 10。

处理异步事件的三种方式

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

点击更多...

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