【juincen】Web中圖片上傳處理 jQuery+Ajax+SpringMVC

標籤：obj   document   class   元素   web   沒有   images   需要   圖片   

今天做項目有個需求，頁面上需要上傳一個圖片，之前解決了一次，沒有記下來。

在前台使用者先選擇一張圖片，然後可以預覽，再上傳，我是這樣解決的。

預覽：

html裡面有一個普通的input標籤，id：uploadFile

<input type="file" id="uploadFile" />

還有一個可以預覽的img標籤，這個img現在並沒有src屬性，id：imgpreview  

<img width="100" height="100" id="imgpreview" />

然後在js裡面監聽這個input的change事件（當選擇了圖片之後出發）

/*** 選擇檔案後出發執行*/$(‘#uploadFile‘).change(function () {        // 擷取FileList的第一個元素        var f = document.getElementById(‘uploadFile‘).files[0];        var src= window.URL.createObjectURL(f);        $("#imgpreview").attr("src",src);        console.log(src);//看看這個可以瀏覽的是個什麼東西});

然後就可以實現預覽了！

上傳：

(未完待更新～)

 

【juincen】Web中圖片上傳處理 jQuery+Ajax+SpringMVC