上传前预览图像

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

@法律，如果您引用this文档，则会注意到change事件仅在<input>和<textarea>标签上触发...您需要使用{{1} }，如here所述。

Answer 2

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