关闭

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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

ES 新特性、异步、TypeScript

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

async和await是如何实现异步编程?

而为了在较低版本的浏览器或Node支持这种语法,其中一种解决方案是将其转化为Generator函数和Promise来实现。换句话说,任何的async和await实现的异步函数,都可以替换成Generator函数和Promise实现。

NodeJs中的异步

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

Js异步时序问题

不知你是否遇到过,向后台发送了多次异步请求,结果最后显示的数据却并不正确 -- 是旧的数据。具体情况:用户触发事件,发送了第 1 次请求

总结异步编程的六种方式

众所周知 JavaScript 是单线程工作,也就是只有一个脚本执行完成后才能执行下一个脚本,两个脚本不能同时执行,如果某个脚本耗时很长,后面的脚本都必须排队等着,会拖延整个程序的执行

解决异步的几种实现方式

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

前端异步是什么?哪些情况下会发生异步?

这里就不拿官方的解释来解答了,只以个人理解来回答问题,轻喷。我们知道JavaScript是单线程的,不像java等语言是多线程的,所以一般情况下,js代码是一行一行的执行的。但是某些时候需要用异步来提升性能

怎样取消 JavaScript 中的异步任务?

有时候执行异步任务可能是很困难的,尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异步活动。在本文中,你可以学到如何创建可中止的函数。

Node.js 中的异步生成器和异步迭代

生成器函数在 JavaScript 中的出现早于引入 async/await,这意味着在创建异步生成器(始终返回 Promise 且可以 await 的生成器)的同时,还引入了许多需要注意的事项。

如何优化async代码?更好的编写async异步函数

如何优化async代码?更好的编写async函数:使用return Promise.reject()在async函数中抛出异常,让相互之间没有依赖关系的异步函数同时执行,不要在循环的回调中/for、while循环中使用await,用map来代替它

点击更多...

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