javascript - 更改时的图像预览不起作用

Question

我已经搜索了两天“如何在上传前预览图像”。我看到在线现场演示并按原样复制了所有代码。我重命名类名以匹配附加的 js 代码。我的代码是:

    $('#edit-image-upload-wrapper').prepend('<div id="imagePreview"></div>');

     $(function() {
    $("#edit-image-upload-wrapper").bind("change", function()
    {
       // alert("it works");
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) alert("no file selected");//return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function(){ // set image data as background of div

                $("#imagePreview").css("background-image", "url("+this.result+")");
            }
        }
    });
});

我检查我的 html dom 并看到以下代码:

<div class="form-item" id="edit-image-upload-wrapper"><div id="imagePreview"></div>
 <label for="edit-image-upload">Upload Your Picture: <span class="form-required" title="This field is required.">*</span></label>
 <input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60">

 <div class="description"><p>You need to provide a passport sized image in jpg/jpeg or png format. The image size has to be 100kb or lower.</p>
</div>
</div>

与此演示完全相同:http://www.phpgang.com/how-to-show-image-thumbnail-before-upload-with-jquery_573.html

但是当我更改图像时，alert("没有选择文件");证明没有选择文件的作品。我究竟做错了什么。请帮忙。

Answer 1

检查我的预览答案是否正常，上传前显示图像

Show an image preview before upload