ajax 实现上传图片

最新推荐文章于 2024-04-20 03:39:57 发布

zf18234031156

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量917

点赞数 3

分类专栏： javaScript 文章标签： ajax 实现上传图片

本文链接：https://blog.csdn.net/zf18234031156/article/details/97148914

版权

javaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

之前上传文件都是通过表单进行提交的，但是这次上传图片后需要拿到后台返回的一些信息。后台接口不是跳页面而是直接返回json数据。不知道通过表单提交后能否获取到信息（有知道的朋友还望留言告知），所以采用ajax的方式。

解决思路：

实现ajax上传图片主要的是fromData对象

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

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求

解决方法：

function updateUserInfo(){
    var formData = new FormData($("#my_info_from")[0]);  //my_info_from 表单的ID
    formData.append("fileImg1",$("#my_photo")[0].files[0]);  //my_photo input[file]的ID
    $.ajax({
        type: "POST",
        dataType:"json",
        url: "",
        data: formData,
        processData: false, //不能少
        contentType : false, //不能少
        success: function (res) {
            console.info(res);
        }
    });
}

var formData = new FormData($("#my_info_from")[0]); 这一步是添加二进制文件到formData对象中。需要注意的是：经过这一步formData对象中已经包含了表单中其他元素的值了。不是很熟悉formData，记录备忘。

参考：

https://blog.csdn.net/zqian1994/article/details/78569597

https://www.jb51.net/article/87654.htm