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

I have an input tag on a form for selecting images to upload.

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

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

I've attempted to change the a thumbnail displayed on the form next to the input to affirm to the user that their selection was the intended with the following jquery code:

我试图更改输入旁边的表单上显示的缩略图,以确认用户使用以下jquery代码进行选择:

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

...this doesn't work in any browser, for browser security reasons I beleieve (as I remember from the last time I did something like this years ago).

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

QUESTION:
Is there a way to present the user's choice of image before they submit the form -- and not just the filepath+name of the value in the input field, but a thumbnail showing the file they've selected?

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

Or does modern browser security prevent this?

或现代浏览器安全防止这种情况?

2 个解决方案

#1

It's possible with the File API (IE does not support the File API)

使用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>

Working example: http://jsfiddle.net/ugPDx/

工作示例:http://jsfiddle.net/ugPDx/

#2

There is no way to perform the operation before uploading the picture.

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

But think of it in a different way - the user "doesn' care" if the picture is already uploaded - you could show the thumbnail after they've uploaded, and show a confirm checkbox. Gmail does this with their email attachments - as soon as you selected the file to attach, the upload starts. But the user always has the option to uncheck the file, and it won't be included in the email.

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

#1