Question

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

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

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

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

现代浏览器安全性是否阻止了这种情况？

Answer 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/

Answer 2

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

但是以不同的方式考虑它 - 如果图片已经上传，用户“不关心” - 您可以在上传后显示缩略图，并显示确认复选框。 Gmail通过电子邮件附件执行此操作 - 只要您选择要附加的文件，就会启动上传。但是用户始终可以选择取消选中该文件，并且它不会包含在电子邮件中。

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

2 个答案: