因為使用者的經驗，覺得每次點選了上傳按鈕就要重選一次，覺得很麻煩。
提出說可不可以下面有預覽圖片，然後可以把我不要的刪掉就好了，因此產出了這篇文章。
首先讓大家看一下我們最終的完成作品圖為下：
我們選擇完檔案後會將上傳按鈕關閉並顯示出預覽圖片。
這是讓我最煩悶的應該是在我該怎麼從fileupload 裡面抓出路徑才可以利用<img src =""> 將圖片顯示出來。
其實fileuplaod mutilple 它其實是一個fileList ，我們可以透過
1. fileList[0].name 抓到它的檔名
2. fileList[0] 整個就是我們fileupload 的文件流
那這樣我們要怎麼抓到它的完整路徑呢?? 不然src 該怎麼塞值給它，只好寫一個方法
讓我們可以寫 getObjectURL(fileList[i]); 得到我們需要的url
//圖片預覽路徑
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
取得了url 那現在我們就必須動態的塞img到我們本來預設要放預覽圖片的div裡
我們在設計頁面中先放入一個div 命名為imgBox 這裡就是我們之後要放入預覽圖的地方
//圖片展示
function addNewContent(obj) {
$(imgBox).html(""); //清空div imgBox
for (var a = 0; a < imgSrc.length; a++) {
var oldBox = $(obj).html();
$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' ><img src=/img/Del.png onclick="removeImg(this,' + a + ')" class="imgDelete"></div>');
}
}
至於後方的Del 是為了刪除檔案而做的，這邊就不多贅述css的部分，主要以功能為主)
再來就是刪除功能，首先我們會先想的是刪除就必須把圖片刪掉
//删除
function removeImg(obj, index) {
//imgSrc imgFile imgName 皆為額外存資訊的陣列，sllice為刪除指定index
imgSrc.splice(index, 1);
imgFile.splice(index, 1);
imgName.splice(index, 1);
var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
addNewContent(boxId);
}
通常這樣應該會有所感覺了~但這時又出現一個尷尬的問題，我想要把我額外存的資訊塞回我的fileupload ，我該怎麼塞值呢??
答案是：不行!! ，fileupload 在.net 裡面是唯讀，也就是說我們無法從外部更改塞值，那這樣我就算知道最終剩下的fileList又有什麼用呢??
嘗試過很多方法，利用jquery ajax 把值傳入後端，但菜鳥就是菜鳥不管我怎麼用就是不太能動作，或許可以實現我要的目的，但最終因為技術程度太弱宣告失敗。
最終的方法我是透過將它點選完後，剩下的它決定保留的photoName 存在一個hidden 裡，並按了submit btn後在傳至將值傳入Label1
var a = imgName.toString(); //將陣列改成string 它會以,連接
var hidden = document.getElementById("ImgName");
hidden.value = a;
後端C#
Label1.Text = Request.Params["ImgName"];
string[] imgPhotoName = Label1.Text.Split(',');
最後在去根據它使用多張上傳的檔案跟刪除完後的最終檔案進行名字比對，一樣才讓他儲存至指定路徑
程式專案為JeanTopia photoUpload
參考資料
1.縮圖預覽 (( 這個是讓我邁進一大步的網頁，它是人家做好的插件，我利用F12去看原始碼