DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 通過js獲取上傳的圖片信息(臨時保存路徑,名稱,大小)然後通過ajax傳遞給後端的方法
通過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傳遞給後端的方法,希望對大家有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved