长沙 学校网站建设/搜索热词排名

这是今天在写一个小Demo的时候遇到的一个问题，因为之前写过一篇(一个使用Form表单上传文件的小案例)，所以我们知道使用Form表单可以完成图片及文件的上传，而如何使用Ajax上传文件到服务器，今天把具体的解决思路和部分代码归档一下。

首先我们需要准备一个file类型的input，绑定upload函数，在选中图片之后执行upload函数将图片上传到服务器。

然后进行upload函数的编写，首先获取选中的图片，然后初始化FormData，将文件添加到FormData中，当然在这一步可以把你想带到后台的数据绑定上去，最后使用ajax完成数据提交即可。

function upload() {

var $c = document.querySelector("#fileBtn");//上传触发按钮

var file = $c.files[0];//获取file对象单张

var formFile = new FormData();//初始化formdata

formFile.append("file", file); //加入文件对象

//formFile.append("name", "张三"); //可以在本步添加其他数据到FormData

$.ajax({

url: "/Home/AddAccessoryImg",

data: formFile,

processData: false,

contentType: false,

type: "POST",

success: function (data) {

console.info(data);//通常在本步骤使用服务器返回的图片地址进行预览显示缩略图

}

});

};

最后总结一下，其实该方法利用的依旧是Form表单提交，只不过省略了

，换成了ajax，这种方式也只会在少部分应用场景用到，当个实现思路的备用方案。