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

Posted 2023-05-08

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

【英文标题】：View image selected from file-system on client-side before upload?

【发布时间】：2011-09-09 04:36:38

【问题描述】：

我在表单上有一个输入标签，用于选择要上传的图像。

<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());
);

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

问题： 有没有办法在用户提交表单之前呈现用户对图像的选择——不仅仅是输入字段中值的文件路径+名称，而是显示他们选择的文件的缩略图？

或者现代浏览器安全性会阻止这种情况发生吗？

【参考方案1】：

可以使用 File API（IE 不支持 File 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/

【讨论】：

已修复，使用 append 之前将图像添加到输入字段中，使其不可见。

这似乎只在 Chrome 中有效，在 IE 和 Firefox 15 中失败。

我已经修改了小提琴以在 Firefox 上工作，可能在 IE9 上工作，但未经测试：jsfiddle.net/ugPDx/825

IE10 和 11 都支持文件 API。之前版本的用户不要再拖我们后腿了 :)

这是一个绝妙的答案，我认为这不可能。它在 Firefox 中运行。

【参考方案2】：

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

但换一种方式想一想——用户“不在乎”图片是否已上传——您可以在他们上传后显示缩略图，并显示一个确认复选框。 Gmail 使用他们的电子邮件附件执行此操作 - 一旦您选择要附加的文件，上传就会开始。但是用户始终可以选择取消选中该文件，并且它不会包含在电子邮件中。

【讨论】：

edit：@Peeter 的 html5 文件 api (w3.org/TR/FileAPI) 非常有趣。太糟糕了，没有跨浏览器支持。