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

但是当我更改图像时，警告（“没有选择文件”）;证明没有选择文件的作品。我究竟做错了什么。请帮忙。

Answer 1

检查我的预览答案是上传前的工作正常显示图片

Show an image preview before upload

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

1 个答案: