`

图片上传预览

html 
阅读更多
支持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){
		//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" />
	       &nbsp;图片&nbsp;&nbsp;
	       <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>


参考：
http://www.oschina.net/code/snippet_96541_3813
分享到：
| 修改 input file 的按钮值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    .Net图片上传预览

    在.NET开发环境中，图片上传预览功能是常见的需求，它允许用户在上传图片到服务器之前进行查看和确认，提升用户体验。下面将详细讲解如何实现这一功能。 首先，我们需要理解图片预览的基本原理。图片预览通常涉及到...

    图片上传预览效果，很小的一个插件

    在IT行业中，图片上传预览是一项常见的功能，特别是在网页应用和移动应用中。这个插件的标题"图片上传预览效果，很小的一个插件"表明它是一个轻量级的解决方案，专为实现快速、便捷的图片预览而设计。描述中提到...

    纯 js 实现得 图片上传预览插件

    【纯 js 实现得 图片上传预览插件】 在前端开发中，图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件，无需依赖jQuery或其他第三方库，使代码更加轻量级且...

    Jquery-JS图片上传预览(无浏览器限制)

    在网页开发中，图片上传预览功能是一个常见且重要的需求，它允许用户在实际上传之前预览选定的图片，提供更好的用户体验。`Jquery` 和 `JavaScript` 是实现这一功能的常用工具，它们能轻松地处理DOM操作和事件监听。...

    jQuery php图片上传预览插件_头像上传预览代码

    在图片上传预览中，jQuery可以用来监听文件输入元素的变化，获取用户选择的图片，并实时显示预览效果。 要实现这一功能，你需要在HTML中创建一个`&lt;input type="file"&gt;`元素，让用户选择图片。添加`change`事件监听...

    jQuery带删除功能多图片上传预览插件

    **jQuery带删除功能多图片上传预览插件详解** 在Web开发中，用户常常需要上传图片，特别是社交媒体、电子商务和内容管理系统等应用。为了提供更好的用户体验，开发人员通常会使用前端预览技术，让用户在正式上传...

    java实现图片上传预览

    在Java Web开发中，图片上传预览功能是一个常见的需求，尤其在用户交互性强的网站或应用中。这个功能允许用户在上传图片之前查看其效果，确保上传的图片符合预期。以下将详细介绍如何在Java环境中，结合ASP和JSP技术...

    jQuery 图片上传预览

    jquery图片上传预览插件，通过 IE6、7、8、9 , chrome, firefox测试 测试时采用的是jquery1.7.1，未经过其它jquery版本测试。 使用时，您可以根据需要，随意修改！ --------------------------------- =====更新...

    jQuery PHP头像图片上传预览插件.zip

    jQuery PHP头像图片上传预览插件

    多图片上传预览插件

    在IT领域，多图片上传预览插件是网站或应用程序中常见的一种功能，它允许用户在上传图片到服务器之前进行在线预览。这样的插件极大地提升了用户体验，因为用户可以在正式提交之前检查图片的质量、方向和效果。下面...

    Flex4.6+java+servlet上传图片例子+图片上传预览

    这个"Flex4.6+java+servlet上传图片例子+图片上传预览"的项目，结合了前端的Flex技术和后端的Java Servlet，为我们提供了一个完整的解决方案。下面将详细解释这个项目的各个组成部分及其工作原理。 首先，让我们来...

    多图片上传预览控件

    在IT领域，图片上传预览控件是一种常见的用户界面组件，尤其在网页设计和开发中。这个组件允许用户选择并预览多张图片，提升用户体验，确保他们在上传之前能够查看和确认图片的质量和效果。本篇文章将深入探讨“多...

    图片上传预览剪切

    在IT行业中，图片上传预览剪切功能是一个常见的需求，特别是在网站用户界面设计中，比如个人资料设置、社交网络或电子商务平台。这个功能允许用户在上传图片前进行预览和编辑，确保上传的图片符合所需的尺寸和比例。...

    jquery;图片上传;图片上传预览

    在网页开发中，图片上传预览是一个常见的功能，它允许用户在正式上传图片之前查看预览效果，确保图片质量和格式符合需求。这个功能通常通过JavaScript库实现，而jQuery作为一个广泛使用的JavaScript库，提供了便利的...

    js图片上传预览效果

    在JavaScript开发中，图片上传预览效果是一种常见的需求，它允许用户在正式上传图片之前查看其效果，确保图片质量和方向正确。本知识点将围绕“js图片上传预览效果”这一主题，结合提供的文件名列表，深入讲解实现这...

    图片上传预览（兼容所有主流浏览器）

    在现代Web应用中，图片上传预览功能是一个常见的需求，特别是在社交媒体、电子商务和个人博客等网站上。本技术讨论主要围绕“图片上传预览（兼容所有主流浏览器）”这一主题展开，我们将深入探讨如何利用JavaScript...

    图片上传预览多张图Flash大集合

    在IT行业中，图片上传预览功能是网页应用中常见的需求，尤其在社交媒体、电商网站以及内容创作平台等。Flash作为一种曾经广泛使用的交互式内容开发工具，曾被大量用于实现图片上传预览。本文将深入探讨如何利用Flash...

    ajax多图片上传预览

    "Ajax多图片上传预览"技术就是为了解决这个问题，它允许用户在真正提交图片到服务器之前进行预览，无需等待整个文件上传完成。这种功能极大地提升了用户体验，因为它减少了用户的等待时间，并且在上传过程中提供了...

Magicbox
Global site tag (gtag.js) - Google Analytics