一、html 部分
<input type="file" accept="image/*" multiple /> <img id="portrait" src="" width="70" height="70" />
注：
1、accept 属性上传图片的类型，例如 accept="image/gif, image/jpeg, image/png" 限制上传的图片类型为 gif jpeg png 如果不限制 则 accept="image/*"；
2、multiple 属性表示是否可以多选，如多选则添加 multiple 反之则去掉
二、js 部分
function uploadImg() {
let formData = new FormData();
/*formData.append(name, value, flieName) 可接受三个参数，第三个参数可选*/
formData.append("file", $("input[type='file']")[0].files[0]);
$.ajax({
url: "自己请求的接口",
type: "post",
cache: false,
data: formData,
timeout: 200000,
contentType: false,
processData: false,
success: function(respnoe) {
//处理自己的逻辑
//以下代码，将实现图片预览效果，此代码可以去掉，根据后台返回的url给img 的src赋值
let fileReader = new FileReader();
fileReader.onloadend = function() {
document.getElementById("#portrait").src = fileReader.result;
}
//给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载
fileReader.readAsDataURL($("input[type='file']")[0].files[0]);
}，
error: function(error){
//console.log(error)
}
})
}
以上js部分需要注意的事项：
1、cache设置为false，为了禁止浏览器对该URL（以及对应的HTTP方法）的缓存。
2、contentType设置为false，为了防止将原有的mulitpart/form-data二进制破坏。
3、processData设置为false，为了防止contentType设置false后转换失败，因此需要将processData设置为false来禁止该转换过程。
4、formData.append(name, value, fileName) *重点
· formData.append() 接受三个参数
· 第一个参数是提交表单对应的名称
· 第二个参数是提交的表单值（上传的文件），可以是Blob或File类型，在本实例当中用的是File类型，如果有用压缩的情况下，一般是Blob类型
· 第三个参数可选，表示上传给服务器的文件名，如果formData.append() 传入第二个参数是Blob类型的话，默认名称就是“blob”，如果formData.append() 传入第二个参数是File类型的话，文件名默认就是被上传的文件的名字（即本地文件名）
例如：
formData.append("images", file, "入组-WatchPAT评价睡眠障碍2");
· images 为提交表单的名字（后台定义具体名字是什么）
· file 为提交的表单值（上传的文件）
· 入组-WatchPAT评价睡眠障碍2 为本次被上传的文件的名字 （可自定义）
5、如果想在上传完成之后想预览图片的话需要加以下代码
let fileReader = new FileReader();
fileReader.onloadend = function() {
//此处判断可以不用加，因为fileReader.readAsDataURL()读取成功之后，readyState == DONE 的时候才会调用onloadend方法
//readyState和DONE都在 new FileReader()实例中，不明白可打印new FileReader()
if(fileReader.readyState == fileReader.DONE){
img.src = fileReader.result;
}
}
fileReader.readAsDataURL(flle);
· fileReader.readAsDataURL(flle) 中传入的file为本次上传的文件
· fileReader.readAsDataURL(flle) 该方法用于读取指定Blob或File文件。读取操作完成后，readyState变为DONE，并loadend触发。那时返回result属性，该属性返回文件内容
· readyState 属性返回当前文档的状态，在上传文件的时候当readyState状态变为DONE时文件下载完成，返回result属性（即文件内容）可在此时改变图片src,
· result属性，该属性返回文件的内容。此属性仅在读取操作完成后才有效
