js 可增加删除图片上传框js代码
js 可增加删除图片上传框js代码
本款程序可以检测用户上传图片类型，大小，在上传之前，同时也可以增加多文件上传，就是不定文件多少，仿51空间那种文件上代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片预览效果</title>
<script src="CJL.0.1.min.js"></script>
<script src="QuickUpload.js"></script>
<script >
var ImagePreview = function (file, img, options) {
this.file = $$(file); //文件对象
this.img = $$(img); //预览图片对象
this._preload = null; //预载图片对象
this._data = ""; //图像数据
this._upload = null; //remote模式使用的上传文件对象
var opt = this._setOptions(options);
this.action = opt.action;
this.timeout = opt.timeout;
this.ratio = opt.ratio;
this.maxWidth = opt.maxWidth;
this.maxHeight = opt.maxHeight;
this.onCheck = opt.onCheck;
this.onShow = opt.onShow;
this.onErr = opt.onErr;
//设置数据获取程序
this._getData = this._getDataFun(opt.mode);
//设置预览显示程序
this._show = opt.mode !== "filter" ? this._simpleShow : this._filterShow;
};
//根据浏览器获取模式
ImagePreview.MODE = $$B.ie7 || $$B.ie8 ? "filter" :
$$B.firefox ? "domfile" :
$$B.opera || $$B.chrome || $$B.safari ? "remote" : "simple";
//透明图片
ImagePreview.TRANSPARENT = $$B.ie7 || $$B.ie6 ?
"mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage" :
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
ImagePreview.prototype = {
//设置默认属性
_setOptions : function (options) {
this.options = { //默认值
mode : ImagePreview.MODE, //预览模式
ratio : 0, //自定义比例
maxWidth : 0, //缩略图宽度
maxHeight : 0, //缩略图高度
onCheck : function () {}, //预览检测时执行
onShow : function () {}, //预览图片时执行
onErr : function () {}, //预览错误时执行
//以下在remote模式时有效
action : undefined, //设置action
timeout : 0 //设置超时(0为不设置)
};
return $$.extend(this.options, options || {});
},
//开始预览
preview : function () {
if (this.file && false !== this.onCheck()) {
this._preview(this._getData());
}
},
//根据mode返回数据获取程序
_getDataFun : function (mode) {
switch (mode) {
case "filter":
return this._filterData;
case "domfile":
return this._domfileData;
case "remote":
return this._remoteData;
case "simple":
default:
return this._simpleData;
}
},
//滤镜数据获取程序
_filterData : function () {
this.file.select();
try {
return document.selection.createRange().text;
}
finally {
document.selection.empty();
}
},
//domfile数据获取程序
_domfileData : function () {
return this.file.files[0].getAsDataURL();
},
//远程数据获取程序
_remoteData : function () {
this._setUpload();
this._upload && this._upload.upload();
},
//一般数据获取程序
_simpleData : function () {
return this.file.value;
},
//设置remote模式的上传文件对象
_setUpload : function () {
if (!this._upload && this.action !== undefined && typeof QuickUpload === "function") {
var oThis = this;
this._upload = new QuickUpload(this.file, {
onReady : function () {
this.action = oThis.action;
this.timeout = oThis.timeout;
var parameter = this.parameter;
parameter.ratio = oThis.ratio;
parameter.width = oThis.maxWidth;
parameter.height = oThis.maxHeight;
},
onFinish : function (iframe) {
try {
oThis._preview(iframe.contentWindow.document.body.innerHTML);
} catch (e) {
oThis._error("remote error");
}
},
onTimeout : function () {
oThis._error("timeout error");
}
});
}
},
//预览程序
_preview : function (data) {
//空值或相同的值不执行显示
if (!!data && data !== this._data) {
this._data = data;
this._show();
}
},
//设置一般预载图片对象
_simplePreload : function () {
if (!this._preload) {
var preload = this._preload = new Image(),
oThis = this;
preload.onload = function () {
oThis._imgShow(oThis._data, this.width, this.height);
};
preload.onerror = function () {
oThis._error();
};
}
},
//一般显示
_simpleShow : function () {
this._simplePreload();
this._preload.src = this._data;
},
//设置滤镜预载图片对象
_filterPreload : function () {
if (!this._preload) {
var preload = this._preload = document.createElement("div");
//隐藏并设置滤镜
$$D.setStyle(preload, {
width : "1px",
height : "1px",
visibility : "hidden",
position : "absolute",
left : "-9999px",
top : "-9999px",
filter : "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
});
//插入body
var body = document.body;
body.insertBefore(preload, body.childNodes[0]);
}
},
//滤镜显示
_filterShow : function () {
this._filterPreload();
var preload = this._preload,
data = this._data.replace(/[)'"%]/g, function (s) {
return escape(escape(s));
});
try {
preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
} catch (e) {
this._error("filter error");
return;
}
//设置滤镜并显示
this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=" " + data + " ")";
this._imgShow(ImagePreview.TRANSPARENT, preload.offsetWidth, preload.offsetHeight);
},
//显示预览
_imgShow : function (src, width, height) {
var img = this.img,
style = img.style,
ratio = Math.max(0, this.ratio) || Math.min(1,
Math.max(0, this.maxWidth) / width || 1,
Math.max(0, this.maxHeight) / height || 1);
//设置预览尺寸
style.width = Math.round(width * ratio) + "px";
style.height = Math.round(height * ratio) + "px";
//设置src
img.src = src;
this.onShow();
},
//销毁程序
dispose : function () {
//销毁上传文件对象
if (this._upload) {
this._upload.dispose();
this._upload = null;
}
//销毁预载图片对象
if (this._preload) {
var preload = this._preload,
parent = preload.parentNode;
this._preload = preload.onload = preload.onerror = null;
parent && parent.removeChild(preload);
}
//销毁相关对象
this.file = this.img = null;
},
//出错
_error : function (err) {
this.onErr(err);
}
}</script>
</head>
<body>
<style>
.perview {width:600px;background:#fff;font-size:12px; border-collapse:collapse;}
.perview td, .perview th {padding:5px;border:1px solid #ccc;}
.perview th {background-color:#f0f0f0; height:20px;}
.perview a:link, .perview a:visited, .perview a:hover, .perview a:active {color:#00F;}
.perview table{ width:100%;border-collapse:collapse;}
</style>
<table border="0" class="perview">
<tr>
<th>选择文件</th>
<th width="50%">预览图</th>
</tr>
<tr>
<td height="200"><input id="idFile" name="pic" type="file" /></td>
<td align="center"><img id="idImg" /></td>
</tr>
</tbody>
</table>
<script>
var ip = new ImagePreview( $$("idFile"), $$("idImg"), {
maxWidth: 200, maxHeight: 200, action: "ImagePreview.ashx"
});
ip.img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function(){ ip.preview(); };
</script>
<br />
<style>
/*file样式*/
#idPicFile {
width:80px;height:20px;overflow:hidden;position:relative;
background:url(http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_addfile.jpg) center no-repeat;
}
#idPicFile input {
font-size:20px;cursor:pointer;
position:absolute;right:0;bottom:0;
filter:alpha(opacity=0);opacity:0;
outline:none;hide-focus:expression(this.hideFocus=true);
}
</style>
<table class="perview">
<tr>
<th align="right"> 选择图片： </th>
<td width="75%"> <div id="idPicFile"> </div> </td>
</tr>
<tr>
<td colspan="2"><table>
<thead>
<tr>
<th> 文件路径 </th>
<th width="30%"> 预览图 </th>
<th width="20%"> 操作 </th>
</tr>
</thead>
<tbody id="idPicList">
<tr>
<td></td>
<td align="center"></td>
<td align="center"><a href="#">移除</a></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<script>
var table = $$("idPicList"), model = table.removeChild(table.rows[0]);
function AddPreview() {
var file = document.createElement("input"),
img = document.createElement("img"),
ip = new ImagePreview(file, img, {
maxWidth : 150,
maxHeight : 100,
action : "ImagePreview.ashx",
onErr : function () {
alert("载入预览出错！");
ResetFile(file);
},
onCheck : CheckPreview,
onShow : ShowPreview
});
file.type = "file";
file.name = "pic";
file.onchange = function () {
ip.preview();
};
$$("idPicFile").appendChild(file);
}
//检测程序
var exts = "jpg|gif|bmp", paths = "|";
function CheckPreview() {
var value = this.file.value,
check = true;
if (!value) {
check = false;
alert("请先选择文件！");
} else if (!RegExp(".(?:" + exts + ")$$", "i").test(value)) {
check = false;
alert("只能上传以下类型：" + exts);
} else if (paths.indexOf("|" + value + "|") >= 0) {
check = false;
alert("已经有相同文件！");
}
check || ResetFile(this.file);
return check;
}
//显示预览
function ShowPreview() {
var row = table.appendChild(model.cloneNode(true)),
file = this.file,
value = file.value,
oThis = this;
row.appendChild(file).style.display = "none";
row.cells[0].innerHTML = value;
row.cells[1].appendChild(this.img);
row.getElementsByTagName("a")[0].onclick = function () {
oThis.dispose();
table.removeChild(row);
paths = paths.replace(value, "");
return false;
};
paths += value + "|";
AddPreview();
}
AddPreview();
function ResetFile(file) {
file.value = ""; //ff chrome safari
if (file.value) {
if ($$B.ie) { //ie
with (file.parentNode.insertBefore(document.createElement('form'), file)) {
appendChild(file);
reset();
removeNode(false);
}
} else { //opera
file.type = "text";
file.type = "file";
}
}
}</script>
</body>
</html>
文章链接：http://www.phprm.com/code/5a436baeb4b84586106bcd64a33c1855.html
随便收藏，请保留本文地址！