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
但是,当我改变形象,警报(“没有选择文件”);证明没有选择文件的作品。我究竟做错了什么。请帮忙。
为什么你有两个不以'var中的文件检查= !! this.files? this.files:[];'? – Maxzeroedge