[JavaScript知识库]运用ajax上传图片（formdata+input）

问题：

今天拿到接口文档，有一个上传图片的接口，看文档其中参数名是“file”以及示例是一串本地的URL。顿时有点懵，不知道怎么拿到这个参数。

思路：
与后端交流过那个示例值其实并不是URL。其实它是个对象，而这个对象表示照片的信息内容以及地址。这涉及到input标签的属性“file”以及formdata一种传参形式。

一、formdata类型

现代 Web 应用程序中经常需要对表单数据进行序列化，因此 XMLHttpRequest Level 2 新增了FormData 类型。FormData 类型便于表单序列化，也便于创建与表单类似格式的数据然后通过 XHR发送。

let data = new FormData(); 
data.append("name", "Nicholas"); 

二、代码

    $(".input-file").change(function(e) {
        var file = e.target.files[0]
        console.log(file)
        var fd = new FormData()
        fd.append('file', file)
        ajax(fd)
    })

function ajax(data) {
    $.ajax({
        url: "http://1.12.218.211:2001/helmet/detect",
        dataType: "json",
        async: false,
        processData: false,
        contentType: false,
        data: data,
        method: "POST",
        success(res) {
            console.log(res)
            if (res.code == 20000) {
                $("#leftimage").attr("src", res.data['source:'])
                $("#rightimage").attr("src", res.data.output)
            } else {
                alert(res.code)
            }
        },
        error(err) {
            console.log(err)
        }
    })
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖