- 浏览: 664424 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (173)
- ajax (4)
- ant (4)
- css (14)
- eclipse (1)
- exe4j (0)
- hibernate (7)
- html (29)
- http (2)
- install4j (0)
- java (35)
- javascript (31)
- jdbc (1)
- jquery (2)
- jsp (15)
- linux命令 (8)
- ooad (2)
- properties (3)
- servlet (1)
- spring (3)
- struts (6)
- swing (4)
- thread (2)
- version_control (1)
- webservice (4)
- xml (4)
- 数据库 (19)
- 正则表达式 (5)
- 其他 (16)
- 面试题 (1)
- 框架 (9)
- maven (1)
- util (29)
- 设计模式 (1)
最新评论
-
herodie4444:
看起来好像不难。
Java Struts2创建Excel文件并实现文件下载 -
心轨翼:
Java遍历Set集合方法 -
魔鬼的献祭:
...
java的web开发分页工具类 -
Nmxszxsl:
能发一个没有被墙的代码到我的邮箱吗?万分感谢。54365156 ...
Google翻译post提交无长度限制的在线翻译例子 -
782763595:
...
jar包混淆器介绍
支持IE和FireFox,动态添加图片。
参考:
http://www.oschina.net/code/snippet_96541_3813
<!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>
参考:
http://www.oschina.net/code/snippet_96541_3813
发表评论
-
java前后台字符串编码转换
2016-12-15 15:52 801此文为应用中遇到字符串编码转换问题网上找资料解决问题记录笔记, ... -
JavaScript replace字符串替换函数的用法
2016-10-19 15:21 875replace 语法 stringObj.replace(rg ... -
JS前端DES加密参数
2016-07-08 14:27 11731DES加密为可解密的机制,这里使用DES进行加密方便后台解密还 ... -
JS Date函数整理
2015-01-30 10:43 1069JS Date 对象用于处理日期和时间。 创建 Date 对象 ... -
js中setInterval与setTimeout用法
2014-11-19 17:09 1031下面详述js中的延时任务与周期任务的实现。 1.setTim ... -
转 js中数据类型判断(转)
2012-11-05 11:07 1139转载自: http://www.cnblogs.com/yjh ... -
包含日期和时间的选择器(转)
2012-09-27 16:11 1093转载自: http://www.cnblogs.com/swe ... -
jsp通用分页实现脚本
2012-09-26 17:12 1702工具脚本使用时只需替换url的问号前半部分即可。 此页面需要j ... -
Java过滤html标签
2012-09-21 09:54 1809方法一: String oldStr="< ... -
Web项目设置页面不缓存
2012-08-04 19:55 2870htm网页 <meta http-equiv=&qu ... -
javascript判断变量是否全为数字
2012-03-11 17:09 1123function isNumber(value){//校验 ... -
JS动态创建表格(转)
2012-01-06 18:40 1180目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号 ... -
ajax设置请求头发送带中文参数
2011-12-30 11:08 6548这里举个删除文件的ajax例子说明设置请求头,允许文件名带中文 ... -
扩充js的Array对象添加contains函数
2011-12-22 11:33 1533用js实现数组包含函数,在与ligerUI同时使用时,第一种方 ... -
ajax请求带中文url的参数转码解码
2011-12-13 10:56 3729js提交ajax请求,默认编码方式是ISO-8859-1,此编 ... -
CSS模块化设计——从空格谈起
2011-12-06 12:00 1012引子: 今天在蓝点看 ... -
html框架页面文档声明
2011-12-06 10:55 2201通俗地讲,文档类型声明(Document Type Decl ... -
本地、远程图片上传预览
2011-11-24 11:00 1907本地、远程图片上传预览,带文件类型检查等功能,更多功能等待仔细 ... -
修改 input file 的按钮值
2011-11-23 14:32 3917在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解 ... -
Struts2中表单与Action传递数据三种方式(转)
2011-11-18 09:51 17931.Action中的属性与表单中的属性一致就可以 JSP ...
相关推荐
在.NET开发环境中,图片上传预览功能是常见的需求,它允许用户在上传图片到服务器之前进行查看和确认,提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解图片预览的基本原理。图片预览通常涉及到...
在IT行业中,图片上传预览是一项常见的功能,特别是在网页应用和移动应用中。这个插件的标题"图片上传预览效果,很小的一个插件"表明它是一个轻量级的解决方案,专为实现快速、便捷的图片预览而设计。描述中提到...
【纯 js 实现得 图片上传预览插件】 在前端开发中,图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件,无需依赖jQuery或其他第三方库,使代码更加轻量级且...
在网页开发中,图片上传预览功能是一个常见且重要的需求,它允许用户在实际上传之前预览选定的图片,提供更好的用户体验。`Jquery` 和 `JavaScript` 是实现这一功能的常用工具,它们能轻松地处理DOM操作和事件监听。...
在图片上传预览中,jQuery可以用来监听文件输入元素的变化,获取用户选择的图片,并实时显示预览效果。 要实现这一功能,你需要在HTML中创建一个`<input type="file">`元素,让用户选择图片。添加`change`事件监听...
**jQuery带删除功能多图片上传预览插件详解** 在Web开发中,用户常常需要上传图片,特别是社交媒体、电子商务和内容管理系统等应用。为了提供更好的用户体验,开发人员通常会使用前端预览技术,让用户在正式上传...
在Java Web开发中,图片上传预览功能是一个常见的需求,尤其在用户交互性强的网站或应用中。这个功能允许用户在上传图片之前查看其效果,确保上传的图片符合预期。以下将详细介绍如何在Java环境中,结合ASP和JSP技术...
jquery图片上传预览插件,通过 IE6、7、8、9 , chrome, firefox测试 测试时采用的是jquery1.7.1,未经过其它jquery版本测试。 使用时,您可以根据需要,随意修改! --------------------------------- =====更新...
jQuery PHP头像图片上传预览插件
在IT领域,多图片上传预览插件是网站或应用程序中常见的一种功能,它允许用户在上传图片到服务器之前进行在线预览。这样的插件极大地提升了用户体验,因为用户可以在正式提交之前检查图片的质量、方向和效果。下面...
这个"Flex4.6+java+servlet上传图片例子+图片上传预览"的项目,结合了前端的Flex技术和后端的Java Servlet,为我们提供了一个完整的解决方案。下面将详细解释这个项目的各个组成部分及其工作原理。 首先,让我们来...
在IT领域,图片上传预览控件是一种常见的用户界面组件,尤其在网页设计和开发中。这个组件允许用户选择并预览多张图片,提升用户体验,确保他们在上传之前能够查看和确认图片的质量和效果。本篇文章将深入探讨“多...
在IT行业中,图片上传预览剪切功能是一个常见的需求,特别是在网站用户界面设计中,比如个人资料设置、社交网络或电子商务平台。这个功能允许用户在上传图片前进行预览和编辑,确保上传的图片符合所需的尺寸和比例。...
在网页开发中,图片上传预览是一个常见的功能,它允许用户在正式上传图片之前查看预览效果,确保图片质量和格式符合需求。这个功能通常通过JavaScript库实现,而jQuery作为一个广泛使用的JavaScript库,提供了便利的...
在JavaScript开发中,图片上传预览效果是一种常见的需求,它允许用户在正式上传图片之前查看其效果,确保图片质量和方向正确。本知识点将围绕“js图片上传预览效果”这一主题,结合提供的文件名列表,深入讲解实现这...
在现代Web应用中,图片上传预览功能是一个常见的需求,特别是在社交媒体、电子商务和个人博客等网站上。本技术讨论主要围绕“图片上传预览(兼容所有主流浏览器)”这一主题展开,我们将深入探讨如何利用JavaScript...
在IT行业中,图片上传预览功能是网页应用中常见的需求,尤其在社交媒体、电商网站以及内容创作平台等。Flash作为一种曾经广泛使用的交互式内容开发工具,曾被大量用于实现图片上传预览。本文将深入探讨如何利用Flash...
"Ajax多图片上传预览"技术就是为了解决这个问题,它允许用户在真正提交图片到服务器之前进行预览,无需等待整个文件上传完成。这种功能极大地提升了用户体验,因为它减少了用户的等待时间,并且在上传过程中提供了...