图片上传预览
支持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);'/>&nbsp;&nbsp;图片"+(index+1);chtml += "&nbsp;<input type='button' class='butt' value='+' onclick='append();' title='添加上传图片'/>";chtml += "&nbsp;&nbsp;&nbsp;<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){//ieif (window.navigator.userAgent.indexOf("MSIE")>=1){obj.select();// IE下取得图片的本地路径return document.selection.createRange().text;}//firefoxelse 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" /> &nbsp;图片&nbsp;&nbsp; <input type="button" value="+" class="butt"title="添加上传图片"/> <img src="/images/user/tx.gif" width="30" height="25" border="0" id="imgf0"/> <br/></div></div></body></html>
参考：
http://www.oschina.net/code/snippet_96541_3813
页:
[1]