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;
var URL = null;
var getImgUrl = function (file) {
URL = window.URL || window.webkitURL;
/*if (com.whuang.hsj.imgURL != null) {
URL.revokeObjectURL(com.whuang.hsj.imgURL);//free the memory;
}*/
com.whuang.hsj.imgURL = URL.createObjectURL(file);
// $('body').append($('<img/>').attr('src', imgURL));
var imgUrl2 = com.whuang.hsj.imgURL;
return imgUrl2;
};
com.whuang.hsj.previewLocalDiskImageMultiple = function ($fileElement, $previewImage, callback, maxSizeM) {
$fileElement.change(function (event) {
var eventTarget = com.whuang.hsj.getSrcElement(event);
var files = eventTarget.files;
if (!maxSizeM) {
maxSizeM = 2;
} 下载
if (files && files.length > 0) {
var $parentDiv = $previewImage.parent();
$parentDiv.empty();
for (var i = 0; i < files.length; i++) {
var file = files[i];
//console.log(file);
/*if (file.size > 1024 * 1024 * maxSizeM) {
alert('p_w_picpath size Can\'t be more than ' + maxSizeM + 'MB');
event.returnValue = false;
return false;
}*/
var imgUrl2 = getImgUrl(file);
if ($parentDiv && $parentDiv.length && imgUrl2) {
$parentDiv.append($('<img alt="暂无预览图片" id="previewImage" src="' + imgUrl2 + '"><hr color="red">'));
}
}
if (typeof callback === 'function') {
callback(com.whuang.hsj.imgURL);
}
}
});
};
上传图片的表单:
Html代码
<form action="/p_w_picpath/upload" id="pic-form" method="post" enctype="multipart/form-data" >
<input type="file" id="pic-file" name="p_w_picpath323" multiple > <br><br>
<input type="button" onclick="ajaxUploadFile(this)" id="upload_pic" value="ajax上传图片" > <span id="upload_result_tip" ></span>
</form>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
