2016-12-22 21:48:42 +08:00
|
|
|
|
<HTML>
|
|
|
|
|
|
<HEAD>
|
|
|
|
|
|
<script type="text/javascript">
|
2016-12-27 13:12:20 +08:00
|
|
|
|
var pic_num = 0; // 用来动态生成span,upfile的id,一次上传图片数量
|
2016-12-22 21:48:42 +08:00
|
|
|
|
function addAttachmentToList()
|
|
|
|
|
|
{
|
|
|
|
|
|
if (findAttachment(event.srcElement.value)) return; //如果此文档已在图片列表中则不再添加
|
2016-12-22 23:02:36 +08:00
|
|
|
|
if (extractFileName(event.srcElement.value)){
|
|
|
|
|
|
// 动态创建图片信息栏并添加到图片列表中
|
|
|
|
|
|
var span = document.createElement('span');
|
2016-12-27 13:12:20 +08:00
|
|
|
|
span.id = '_attachment' + pic_num;
|
|
|
|
|
|
span.innerHTML = extractFileName(event.srcElement.value) + ' <a href="javascript:delAttachment(' + (pic_num++) + ')">删除</a><br/>';
|
2016-12-22 23:02:36 +08:00
|
|
|
|
span.title = event.srcElement.value;
|
|
|
|
|
|
G('attachmentList').appendChild(span);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2016-12-22 21:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
// 显示图片列表并变换添加图片按钮文本
|
|
|
|
|
|
if (G('attachmentList').style.display == 'none')
|
|
|
|
|
|
{
|
|
|
|
|
|
G('btnAdd').value = '继续添加';
|
|
|
|
|
|
G('attachmentList').style.display = '';
|
|
|
|
|
|
G('btnClear').style.display = '';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个图片';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function selectAttachment()
|
|
|
|
|
|
{
|
|
|
|
|
|
// 先清除无效动态生成的多余upfile
|
|
|
|
|
|
cleanInvalidUpfile();
|
2016-12-27 13:12:20 +08:00
|
|
|
|
if(pic_num <3) {// 动态创建上传控件并与span对应
|
|
|
|
|
|
var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+pic_num+'">';
|
|
|
|
|
|
G('pics').insertAdjacentHTML('beforeEnd', upfile);
|
|
|
|
|
|
G('_upfile'+pic_num).click();
|
|
|
|
|
|
}
|
|
|
|
|
|
else alert("一次只能上传3张图片！");
|
|
|
|
|
|
|
2016-12-22 21:48:42 +08:00
|
|
|
|
}
|
2016-12-22 23:02:36 +08:00
|
|
|
|
//判断图片格式
|
2016-12-22 21:48:42 +08:00
|
|
|
|
function extractFileName(fn)
|
|
|
|
|
|
{
|
2016-12-22 23:02:36 +08:00
|
|
|
|
var index = fn.substr(fn.lastIndexOf('.')).toLowerCase();
|
|
|
|
|
|
if (index ==".png"||index ==".jpg"||index ==".jpeg"){
|
|
|
|
|
|
return fn.substr(fn.lastIndexOf('\\')+1);
|
|
|
|
|
|
}
|
|
|
|
|
|
else{
|
|
|
|
|
|
alert("请上传png或jpg格式的图片！");
|
|
|
|
|
|
return 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2016-12-22 21:48:42 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function findAttachment(fn)
|
|
|
|
|
|
{
|
|
|
|
|
|
var o = G('attachmentList').getElementsByTagName('span');
|
|
|
|
|
|
for(var i=0;i<o.length;i++)
|
|
|
|
|
|
if (o[i].title == fn) return true;
|
2016-12-27 13:12:20 +08:00
|
|
|
|
else return false;
|
2016-12-22 21:48:42 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function delAttachment(id)
|
|
|
|
|
|
{
|
|
|
|
|
|
G('attachmentList').removeChild(G('_attachment'+id));
|
2016-12-27 13:12:20 +08:00
|
|
|
|
G('pics').removeChild(G('_upfile'+id));
|
2016-12-22 21:48:42 +08:00
|
|
|
|
|
|
|
|
|
|
// 当图片列表为空则不显示并且变化添加图片按钮文本
|
|
|
|
|
|
if (G('attachmentList').childNodes.length == 0)
|
|
|
|
|
|
{
|
|
|
|
|
|
G('btnAdd').value = '添加图片';
|
|
|
|
|
|
G('attachmentList').style.display = 'none';
|
|
|
|
|
|
G('btnClear').style.display = 'none';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个图片';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function cleanInvalidUpfile()
|
|
|
|
|
|
{
|
|
|
|
|
|
var o = document.body.getElementsByTagName('input');
|
|
|
|
|
|
for(var i=o.length-1;i>=0;i--)
|
2016-12-27 13:12:20 +08:00
|
|
|
|
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
|
|
|
|
|
|
{
|
|
|
|
|
|
if (!G('_attachment'+o[i].id.substr(7)))
|
|
|
|
|
|
G('pics').removeChild(o[i]);
|
|
|
|
|
|
}
|
2016-12-22 21:48:42 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function clearAttachment()
|
|
|
|
|
|
{
|
|
|
|
|
|
var o = G('attachmentList').childNodes;
|
|
|
|
|
|
for(var i=o.length-1;i>=0;i--)
|
|
|
|
|
|
G('attachmentList').removeChild(o[i]);
|
|
|
|
|
|
|
|
|
|
|
|
o = document.body.getElementsByTagName('input');
|
|
|
|
|
|
for(var i=o.length-1;i>=0;i--)
|
|
|
|
|
|
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
|
|
|
|
|
|
{
|
2016-12-27 13:12:20 +08:00
|
|
|
|
G('pics').removeChild(o[i]);
|
2016-12-22 21:48:42 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
G('btnAdd').value = '添加图片';
|
|
|
|
|
|
G('attachmentList').style.display = 'none';
|
|
|
|
|
|
G('btnClear').style.display = 'none';
|
2016-12-22 23:02:36 +08:00
|
|
|
|
G('total').innerText = '当前选择上传0个图片';
|
2016-12-22 21:48:42 +08:00
|
|
|
|
}
|
2016-12-22 23:02:36 +08:00
|
|
|
|
|
2016-12-22 21:48:42 +08:00
|
|
|
|
function G(id)
|
|
|
|
|
|
{
|
|
|
|
|
|
return document.getElementById(id);
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</HEAD>
|
|
|
|
|
|
<BODY>
|
2016-12-27 13:12:20 +08:00
|
|
|
|
<input type="button" value="添加图片" id="btnAdd" onclick="selectAttachment()">
|
|
|
|
|
|
<input type="button" value="清空图片" id="btnClear" style="display:none" onclick="clearAttachment()">
|
|
|
|
|
|
<div id="attachmentList" style="display:none"></div>
|
|
|
|
|
|
<div id="total">当前选择上传0个图片</div>
|
|
|
|
|
|
<form id='pics' action="#">
|
|
|
|
|
|
<div><input type="submit" value="上传"></div>
|
|
|
|
|
|
</form>
|
2016-12-22 21:48:42 +08:00
|
|
|
|
</BODY>
|
|
|
|
|
|
</HTML>
|
