Question

在上传到服务器之前，有没有办法在html页面上预览图片？

我需要显示我仍然需要上传的图片的预览，只是为了显示所做的更改。我可能只需要更改图像源。我可以使用任何现有的技术/方法吗？

Answer 1

可以使用The HTML5 FileReader API

来实现

仅使用JavaScript和FileReader对象，我们可以允许用户将图像加载到应用程序中。

HTML code：

<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
}

以下有用的参考链接：

Demo Here

Complete Example Here

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers

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]);
        }
    }

您可以在Working Fiddle

中查看

Answer 3

查看这篇文章Ajax Upload with Progress Bar并尝试一下您想要在您的问题上实现的演示。 DEMO

这可以通过现代浏览器上的FileReader实现。

上传前预览图片？

3 个答案: