图片上传预览

最新推荐文章于 2022-08-23 11:53:02 发布

iteye_20824

最新推荐文章于 2022-08-23 11:53:02 发布

阅读量64

点赞数

分类专栏： javascript html 文章标签： html

本文链接：https://blog.csdn.net/iteye_20824/article/details/82208761

版权

javascript 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

支持IE和FireFox，动态添加图片。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

var index = 0;
var maxIndex = 30;
function append() {

	if (index < maxIndex) {
		var div = document.getElementById("addTps");
		var childDiv = document.createElement("div");
		index++;
		var id = "tp_" + index;
		childDiv.setAttribute("id", id);
		var chtml = "";
		chtml += "<input type='file' class='x2' name='zizhi"+index+"' id='f"+index+"' onchange='loadImage(this);'/>  图片"+(index+1);
		chtml += " <input type='button' class='butt' value='+' onclick='append();' title='添加上传图片'/>";
		chtml += "   <input type='button' class='butt' value='-' onclick='clearAppend();' title='减少上传图片'/>"
		chtml += "<img src='/images/user/tx.gif' width='30' height='25' border='0' id='imgf"+index+"'/><br/>";
		childDiv.innerHTML = chtml;
		div.appendChild(childDiv);
	}
}

function clearAppend() {
	var div = document.getElementById("addTps");
	var childDiv = document.getElementById("tp_" + index);
	div.removeChild(childDiv);
	index--;
}

//以下两个方法预览图片
var picPath;

function loadImage(ele) {
	picPath   = getPath(ele);
	document.getElementById("img"+ele.id).src=picPath;
}
function getPath(obj){
	if(obj){
		//ie
		if (window.navigator.userAgent.indexOf("MSIE")>=1){
			obj.select();
			// IE下取得图片的本地路径
			return document.selection.createRange().text;
		}
		//firefox
		else if(window.navigator.userAgent.indexOf("Firefox")>=1){
			if(obj.files){
				// Firefox下取得的是图片的数据
				return obj.files.item(0).getAsDataURL();
			}
			return obj.value;
		}
		return obj.value;
	}
}

//选择头像
function selImg(){
  var o=document.getElementById('headId');
  o.click();
}

</script>
</head>
<body>
<div id="addTps">
  <div id="tp0">
	       <input type="file" name="zizhi" id="f0" onchange="loadImage(this);" class="x2" />
	        图片  
	       <input type="button" value="+" class="butt" onclick="append();" title="添加上传图片"/>
	       <img src="/images/user/tx.gif" width="30" height="25" border="0" id="imgf0"/>
	       <br/>

  </div>
</div>
</body>
</html>

参考：
[url]http://www.oschina.net/code/snippet_96541_3813[/url]

iteye_20824

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传预览

支持IE和FireFox，动态添加图片。[code="html"]var index = 0;var maxIndex = 30;function append() { if (index < maxIndex) { var div = document.getElementById("addTps"); var childDiv...
复制链接

扫一扫