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

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/