項目需求:如何通過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傳遞給後端的方法,希望對大家有所協助。