使用透明叠加法美化文件上传界面的代码

估计很多人都对文件域那难看的样式无可奈何，对于一个讲究完美的web系统来说，这种界面是无法接受的。gmail的附件添加在IE浏览器中实现了样式自定义，让大伙兴奋了好一这，他使用的是文件域的click()方法，但客户端的安全限制非常苛刻，必须结合iframe才能实现，代码比较繁锁。我使用的是透明叠加法，即把文件域置于点击目标之上，并让其透明，这样用户看到的是自定义热区，点击的依然是浏览按钮，没有违反任何安全机制。同样地，这种方法也支持firefox。

*{font-size:12px;cursor:default}
.hand{cursor:hand;cursor:pointer}

@添加附件

file_create()
function file_create(){
$("bxAtt2").innerHTML=""
}
function file_change(tx){
var sName,o
sName=tx.value.replace(/\\/g,"/").replace(/(.*\/)(.*)/,"$2")
o=document.createElement("nobr")
o.style.cssText="float:left;margin-right:6;padding-top:3;color:darkgreen"
o.innerHTML="□"+sName+""+unescape("×")+""
tx.style.display="none"
o.appendChild(tx)
$("bxAttList").insertBefore(o,$("bxAtt"))
file_repos()
file_create()
}
function file_repos(){
$("bxAttList").appendChild($("bxAtt"))
}
function $(obj){
return typeof(obj)=="object"?obj:document.getElementById(obj)
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 使用透明叠加法美化文件上传界面的代码

    估计很多人都对文件域那难看的样式无可奈何,对于一个讲究完美的web系统来说,这种界面是无法接受的.gmail的附件添加在IE浏览器中实现了样式自定义,让大伙兴奋了好一这,他使用的是文件域的click()方法,但客户端的安全限制非常苛刻,必须结合iframe才能实现,代码比较繁锁.我使用的是透明叠加法,即把文件域置于点击目标之上,并让其透明,这样用户看到的是自定义热区,点击的依然是浏览按钮,没有违反任何安全机制.同样地,这种方法也支持firefox. *{font-size:12px;cursor

  • 使用透明叠加法美化文件上传界面

    估计很多人都对文件域那难看的样式无可奈何,对于一个讲究完美的web系统来说,这种界面是无法接受的.gmail的附件添加在IE浏览器中实现了样式自定义,让大伙兴奋了好一这,他使用的是文件域的click()方法,但客户端的安全限制非常苛刻,必须结合iframe才能实现,代码比较繁锁.我使用的是透明叠加法,即把文件域置于点击目标之上,并让其透明,这样用户看到的是自定义热区,点击的依然是浏览按钮,没有违反任何安全机制.同样地,这种方法也支持firefox. *{font-size:12px;cursor

  • jsp中点击图片弹出文件上传界面及实现预览实例详解

    jsp中点击图片弹出文件上传界面及实现预览实例详解 花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu

  • jsp中点击图片弹出文件上传界面及预览功能的实现

    花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

  • BootStrap fileinput.js文件上传组件实例代码

    BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • JS多文件上传的实例代码

    废话不多说了,具体实现代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./jquery-1.9.1.min.js"></script> </head> <body> <fo

  • Ajax提交Form表单及文件上传的实例代码

    前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了 直接上代码: 首先是html: <form id = "f

  • JavaScript Base64 作为文件上传的实例代码解析

    例如我们用某些 裁剪插件 得到的图片是 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406

  • commons fileupload实现文件上传的实例代码

    commons fileupload实现文件上传的实例代码

    一.文件上传的原理分析 1.文件上传的必要前提 a.表单的method必须是post b.表单的enctype属性必须是multipart/form-data类型的. enctype默认值:application/x-www-form-urlencoded 作用:告知服务器,请求正文的MIME类型 application/x-www-form-urlencoded : username=abc&password=123 ServletRequest.getParameter(String nam

  • springboot 中文件上传下载实例代码

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. Spring Boot特点 1. 创建独立的Spring应用程序 2. 嵌入的Tomcat,无需部署WAR文件 3. 简化Maven配置 4. 自动配置Spr

随机推荐