上传前在客户端查看从文件系统中选择的图像？

我在表单上有一个输入标签，用于选择要上传的图像。上传前在客户端查看从文件系统中选择的图像？

<div id="lowresDemo"> 
    <img src="some-url" /> 
</div> 
<input type="file" id="FileToUpload" name="FileToUpload" />

我试图改变表单上显示的缩略图的输入旁边的肯定，以他们的选择是预期与下面的jQuery代码的用户：

$('#FileToUpload').change(function() { 
    $('#lowresDemo img').attr('src', $(this).val()); 
});

.. 。这在任何浏览器中都不起作用，出于浏览器安全方面的原因（我记得自上次做类似于这些年前的事情时）。

问题：
有没有向用户呈现的选择图像的他们提交表单前一种方式 - 而不是在输入字段中的值的只是文件路径+名称，但缩略图显示文件，他们已选择？

或者，现代浏览器安全防范呢？

来源

2011-06-06 Faust

有可能使用文件API（IE不支持文件API）

<input type="file"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("input").change(function(e) { 

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) { 
     var file = e.originalEvent.srcElement.files[i]; 

     var img = document.createElement("img"); 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      img.src = reader.result; 
     } 
     reader.readAsDataURL(file); 
     $("input").after(img); 
    } 
}); 
    }); 
</script>

工作例如：http://jsfiddle.net/ugPDx/

来源

2011-06-06 10:47:05 Peeter

小提琴不适合我，它不显示图像 – 2012-02-29 03:19:53

固定的，使用后附加的图像添加到输入字段，使其不可见。 – Peeter 2012-02-29 14:50:29

这似乎只适用于Chrome，在IE和Firefox 15中失败。 – Liam 2012-09-24 12:21:26

上传图片前无法执行操作。

但用另一种方式思考 - 如果图片已经上传，用户“不会在意” - 您可以在上传后显示缩略图，并显示确认复选框。 Gmail使用他们的电子邮件附件执行此操作 - 只要您选择要附加的文件，就会开始上传。但用户始终可以选择取消选中该文件，并且不会将其包含在电子邮件中。

来源

2011-06-06 10:39:54 Chii

编辑：@ Peeter的HTML5文件API（http://www.w3.org/TR/FileAPI /）非常有趣。太糟糕了，没有跨浏览器支持。 – Chii 2011-06-06 13:01:05

上传前在客户端查看从文件系统中选择的图像？

回答

相关问题