上传前预览图片

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>

我发现了几个代码完全相同的 Whosebug，并且可以在那里工作。我找不到丢失的 Piece

Answer 1

@Law，如果你引用this doc, you'll notice that the change event only fires on <input> and <textarea> tags... You need to use $("#images").load(, as outlined here。

Answer 2

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

上传前预览图片

Preview for Image before Upload

html

preview

laravel