上传前预览图像

Question

我不确定为什么我的代码不起作用。

这是我的Javascript：

function readURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {

                $('#previewHolder').attr('src', e.target.result);

            }

            reader.readAsDataURL(input.files[0]);

        }

    }

    $("#images").change(function(){

        readURL(this);

    });

这是我的Html：

<form id="form1">
                    <input value="" type="file" id="images" name="images[]" accept="image/*" multiple/>
                    <img src="#" id="previewHolder" width="200px" alt="x.png"/>
                </form>

我发现几个stackoverflow与字面上相同的代码，它在那里工作。我找不到丢失的那块。

Answer 1

@Law，如果你参考this doc，你会注意到更改事件只会触发<input>和<textarea>标签......你需要使用$("#images").load(，如here所述。

Answer 2

基本上这里的代码是正确的。它没有工作，因为我有两次加载jquery。一旦我删除了布局上的标签，它工作得很好。但请注意，此代码仅适用于单个图像预览文件。