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

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

在前臺用戶先選擇一張圖片，而後能夠預覽，再上傳，我是這樣解決的。

預覽：

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);//看看這個能夠瀏覽的是個什麼東西
});

而後就能夠實現預覽了！

上傳：

(未完待更新～)