通過js擷取上傳的圖片資訊(臨時儲存路徑,名稱,大小)然後通過ajax傳遞給後端的方法_javascript技巧

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.