Question

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

2011-06-06

21887

javascript jquery html forms

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

000776328

我尝试更改输入表单上显示的缩略图，向用户确认他们的选择是带有以下jQuery代码的目的：

114842178

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

问题：
是否有一种方法可以在提交表单之前提出图像的选择 - 不仅是输入字段中的filepath+filepath+名称，而且还显示了显示他们选择的文件的缩略图？

或现代浏览器安全性会阻止此？

Answer 1

使用文件 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/

Answer 2

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

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