html5 多图预览



如何实现呢?

页面加载完成之后,绑定事件下载:

Js代码

//预览图片,没有真正上传

com.whuang.hsj.previewLocalDiskImageMultiple($('#pic-file'),$("#previewImage"),function(){

if(uploadStatus==0){//只要ajax上传成功一次,则不再校验.防止点击了选择图片,忘了ajax上传图片的情况

uploadStatus=1;

}

},6/*单位是M*/);

com.whuang.hsj.previewLocalDiskImageMultiple的实现如下:

Java代码

com.whuang.hsj.imgURL=null;

varURL=null;

vargetImgUrl=function(file){

URL=window.URL||window.webkitURL;

/*if(com.whuang.hsj.imgURL!=null){

URL.revokeObjectURL(com.whuang.hsj.imgURL);//freethememory;

}*/

com.whuang.hsj.imgURL=URL.createObjectURL(file);

//$('body').append($('<img/>').attr('src',imgURL));

varimgUrl2=com.whuang.hsj.imgURL;

returnimgUrl2;

};

com.whuang.hsj.previewLocalDiskImageMultiple=function($fileElement,$previewImage,callback,maxSizeM){

$fileElement.change(function(event){

vareventTarget=com.whuang.hsj.getSrcElement(event);

varfiles=eventTarget.files;

if(!maxSizeM){

maxSizeM=2;

}下载

if(files&&files.length>0){

var$parentDiv=$previewImage.parent();

$parentDiv.empty();

for(vari=0;i<files.length;i++){

varfile=files[i];

//console.log(file);

/*if(file.size>1024*1024*maxSizeM){

alert('p_w_picpathsizeCan\'tbemorethan'+maxSizeM+'MB');

event.returnValue=false;

returnfalse;

}*/

varimgUrl2=getImgUrl(file);

if($parentDiv&&$parentDiv.length&&imgUrl2){

$parentDiv.append($('<imgalt="暂无预览图片"id="previewImage"src="'+imgUrl2+'"><hrcolor="red">'));

}

}

if(typeofcallback==='function'){

callback(com.whuang.hsj.imgURL);

}

}

});

};

上传图片的表单:

Html代码

<formaction="/p_w_picpath/upload"id="pic-form"method="post"enctype="multipart/form-data">

<inputtype="file"id="pic-file"name="p_w_picpath323"multiple><br><br>

<inputtype="button"onclick="ajaxUploadFile(this)"id="upload_pic"value="ajax上传图片"><spanid="upload_result_tip"></span>

</form>