與預覽上傳圖片的圖片框在asp.net mvc的

Question

我要上傳在asp.net mvc的這樣way.I圖像正在使用的輸入型文件進行上傳圖片，其工作正常，但我想當用戶點擊該圖像並選擇該圖像時，該圖像將出現在這種類型的框中，我將如何做到這一點。我將數據庫中的圖像路徑保存在文件目錄中。

Answer 1

我懷疑最好的辦法是使用HTML5 file API來讀取附加圖像的內容以顯示預覽。當用戶提交文件時，您可以像現在一樣進行服務器端處理，存儲URL並返回瀏覽器新圖像的位置以進行正確預覽。但請檢查預覽大圖像的性能。

該鏈接顯示預覽文件的示例。我也在這裏複製了代碼，但請檢查文章以獲得更好的理解。

function handleFileSelect(evt) { 
 
    var files = evt.target.files; // FileList object 
 

 
    // Loop through the FileList and render image files as thumbnails. 
 
    for (var i = 0, f; f = files[i]; i++) { 
 

 
    // Only process image files. 
 
    if (!f.type.match('image.*')) { 
 
     continue; 
 
    } 
 

 
    var reader = new FileReader(); 
 

 
    // Closure to capture the file information. 
 
    reader.onload = (function(theFile) { 
 
     return function(e) { 
 
     // Render thumbnail. 
 
     var span = document.createElement('span'); 
 
     span.innerHTML = ['<img class="thumb" src="', e.target.result, 
 
      '" title="', escape(theFile.name), '"/>' 
 
     ].join(''); 
 
     document.getElementById('list').insertBefore(span, null); 
 
     }; 
 
    })(f); 
 

 
    // Read in the image file as a data URL. 
 
    reader.readAsDataURL(f); 
 
    } 
 
} 
 

 
document.getElementById('files').addEventListener('change', handleFileSelect, false);

.thumb { 
 
    height: 75px; 
 
    border: 1px solid #000; 
 
    margin: 10px 5px 0 0; 
 
}

<input type="file" id="files" name="files[]" multiple /> 
 
<output id="list"></output>