透過js取得上傳的圖片資訊（暫時儲存路徑，名稱，大小）然後透過ajax傳遞給後端的方法_javascript技巧

專案需求：如何透過js取得上傳的圖片資訊（暫時儲存路徑，名稱，大小）然後透過ajax傳遞給後端

題主用jquery接收

<input name="c_pic" id="c_pic" type="file" class="file">

用的方法是：

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){ 
var file = this.files[0]; 
}

題主想用ajax 的post方法把上傳圖片的相關資訊傳給後端，接收到的file是個object file，請問怎麼轉換成能夠用post傳遞的資料格式？

當時我看到這個題目就想這還不簡單，直接把file通過JSON.stringify(file)（註：stringify()用於從一個物件解析出字串），程式碼如下：

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);

function readFile(){ 
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post('',file_json);
}

發現印出來的是一個空的物件：{}；有知道的麻煩告知，感激不盡！

於是換了一個思路用uploadfile插件或百度的webuploader，其中jQuery File Upload 是一個Jquery圖片上傳組件，支援多文件上傳、取消、刪除，上傳前縮圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支援各種動態語言開發的伺服器端。
如果支援html5，可以使用FormData Ajax上傳也能實現的。

以上內容就是小編給大家分享的透過js取得上傳的圖片資訊（臨時儲存路徑，名稱，大小）然後透過ajax傳遞給後端的方法，希望對大家有所幫助。