2014-05-11 42 views
1

我一直在寻找2天的“如何在上传前预览图像”。我看到在线实时演示,并复制过去的所有代码。我重命名我的类名称以匹配其他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

但是,当我改变形象,警报(“没有选择文件”);证明没有选择文件的作品。我究竟做错了什么。请帮忙。

+0

为什么你有两个不以'var中的文件检查= !! this.files? this.files:[];'? – Maxzeroedge

回答