上傳前預覽圖片？

Question

在將其上傳到服務器之前，有沒有辦法在html頁面上預覽圖片？

我需要顯示我仍然需要上傳的圖像的預覽，只是為了表明已經進行了更改。 我可能只需要更改圖像源。 我可以使用任何現有技術/方法嗎？

Answer 1

可以使用The HTML5 FileReader API

僅使用JavaScript和FileReader對象，我們可以允許用戶將圖像加載到應用程序中。

HTML代碼：

<input type="file" id="getimage">
    <fieldset>
        <legend>Your image here</legend>
            <div  id="imgstore"></div>
    </fieldset>

JavaScript代碼：

<script>
function imageHandler(e2) 
{ 
  var store = document.getElementById('imgstore');
  store.innerHTML='<img src="' + e2.target.result +'">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
  var y = document.getElementById("getimage");
  y.addEventListener('change', loadimage, false);
}
</script>

如何檢查瀏覽器是否支持HTML5文件API：

// Checking all the possible window objects needed for file api
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Browser is fully supportive.
} else {
  // Browser not supported. Try normal file upload
}

有用的參考鏈接如下：

在這里演示

這里完成示例

用於在桌面和移動瀏覽器中支持HTML5，CSS3，SVG等的兼容性表

Answer 2

我最近這樣解決了這個問題：

我將一個changelistener綁定到fileinput

<input type="file" name="photofile" id="photofile">



$('#photofile').bind("change", function(){
            readUrl(this);
         });

並將readURL函數中的圖像設置為以前為空的img元素，如下所示：

readUrl = function(input) {
        //if File is there
        if(input.files && input.files[0]) {
            //create a Filereader
            var reader = new FileReader();
            //bind a function to the reader which will be executed when file is completely loaded
            reader.onload = function(e) {
                //Here you render your preview image
                $("#bild-vorschau").attr("src", e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

在這里，您可以在工作小提琴中看到它

Answer 3

看看這篇文章使用Progress Bar進行Ajax上傳，並嘗試使用您想要在您的問題上實現的演示。 DEMO

FileReader可以在現代瀏覽器上運行。