html
<input change="uploadUsedImg()" id="uploadUsedImg" type="file">
js
function uploadUsedImg(){
var $c = document.querySelector("#uploadUsedImg");//上傳出發按鈕
var $d = document.querySelector("#usedImg");//圖片容器
var file = dome.files[0];//獲取file對象單張
var reader = new FileReader();//創建filereader對象
reader.readAsDataURL(file);//轉換數據
reader.onload = function(e){//加載ok時觸發的事件
imgurl.src = e.target.result
var fd = new FormData();
var blob = dataURItoBlob(e.target.result);
fd.append('file', blob);
var uploadurl = "/user/accountservice/uploadimg";
$.ajax({
type: 'POST',
url: uploadurl,
data: fd,
processData: false, // 不會將 data 參數序列化字符串
contentType: false, // 根據表單 input 提交的數據使用其默認的 contentType
success:function(res){
var dataurl = {};
//轉成json
dataurl = JSON.parse(res);
//取出路徑
var bolb = dataurl.url;
mgurl.setAttribute('data-url',bolb);//替換
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
}
}, false);
return xhr;
}
}).success(function (res) {
// 拿到提交的結果
console.log(res);
}).error(function (err) {
console.error(err);
});
};
};