首先在html页面添加一个添加按钮加上点击事件app();
<input type="button" value="添加图片" onclick="app();" id="btnInsertImg" />
然后在 <script type="text/javascript">里写一个app()方法,这里写一个计数器使预览div的id每张图片都不同
var imgIndex = 1;//计数器
function app() {
$("#imgContainer").append("<div><div style=\"margin-top:10px;\">" +
"<input type=\"file\" name=\"file\" onchange=\"javascript:setImagePreview(this,"+imgIndex+");\"/>" +
"<input type=\"button\" value=\"删除\" onclick=\"delfile(this)\" />" +
"<input type=\"button\" value=\"上移\" onclick=\"up(this)\" />" +
"<input type=\"button\" value=\"下移\" onclick=\"down(this)\" />" +
"</div>"+
"<div id=\"localImag_"+imgIndex+"\">"+
"<img id=\"preview_" + imgIndex + "\" alt=\"\" />" +
"</div></div>");
imgIndex++;
}
app()方法里用到setImagePreview(),这里注意要把计数器imgIndex传过来。
function setImagePreview(obj, index) {
var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
if (obj.value == '') {
$.messager.alert("让选择要上传的图片!");
return false;
}
else {
var localImagId = document.getElementById("localImag_" + index);
var imgObjPreview = document.getElementById("preview_" + index);
var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用
布尔型变量
var isExists = false;
//循环判断图片的格式是否正确
for (var i in array) {
if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
//图片格式正确之后,根据浏览器的不同设置图片的大小
if (obj.files && obj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '100px';
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
}
else {
//IE下,使用滤镜
obj.select();
var imgSrc = document.selection.createRange().text;
//必须设置初始大小
localImagId.style.width = "100px";
localImagId.style.height = "100px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
$.messager.alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
isExists = true;
return true;
}
}
if (isExists == false) {
$.messager.alert("上传图片类型不正确!");
return false;
}
return false;
}
}
删除,上移,下移方法
function delfile(obj) {
$(obj).parent().parent().remove();
}
function up(obj) {
$(obj).parent().prev().before($(obj).parent());
}
function down(obj) {
$(obj).parent().next().after($(obj).parent());
}
效果图
点击添加图片
点击选择文件
添加多张