js实现图片预览和FormData上传

1. html

<!-- 预览的图片 -->
<div class="file-image">
<img src="" alt="" id='image'>
</div>

<!-- 添加图片 -->
<div class="file-btn">
添加图片
<input type="file" @change="addImage" id="file">
</div>

<!-- 上传图片 -->
<button> 上传</button>

预览图片js

var file;

var addImage = function(){
file = jQuery('.file')[0].files[0];
//添加图片路径到img src中进行预览
jQuery('#iamge').attr('src',getObjectURL(file));
//不同浏览器下的路径不同
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
}

利用FormData上传图片js

var imgdata = new FormData();
imgdata.append("img",file);
//利用ajax上传
jQuery.ajax({
type: "PUT",
url: url,
data: imgdata,
async: false,
cache: false,
contentType: false,
processData: false,

success: function (data) {
alert("上传成功");
},
error: function (jqXHR) {
alert("上传失败")

}
})