普通版本,自己定义样式:
input为file文件上传控件
跨浏览器
显示:
//样式
<style>
/*文件上传输入框的样式*/
input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
input.upBtn{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px;width:85px;}
/*上传文件隐藏元素(file)的样式*/
.specInput{
position:absolute;
filter:alpha(opacity=100);//IE里面设置元素透明样式,0-100
opacity:1;//firefox,google里面设置元素透明样式,0.0-1.0
width:30px;
}
</style>
//js脚本
<script type="text/javascript">
function fclick(obj){
with(obj){
var theE = window.event || arguments.callee.caller.arguments[0];
var val = theE.srcElement?theE.srcElement:theE.target;
obj.style.top=val.offsetTop+"px";
var x=theE.clientX-offsetWidth/2;
if(x<val.offsetLeft){
x=val.offsetLeft;
}
if(x>val.offsetLeft+val.offsetWidth-offsetWidth){
x=val.offsetLeft+val.offsetWidth-offsetWidth;
}
obj.style.left=x+"px";
}
}
</script>
//页面
<div class="centerDiv">
<form method="post" action="" enctype="multipart/form-data">
<input id="f_file"> <input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
<input name="file" type="file" class="specInput" id="t_file" onchange="f_file.value=this.value">
<br><input type="submit" value="提交">
</form>
</div>
分享到:
相关推荐
跨浏览器控件SDK V2.3.0 控件支持现有高拍仪设备和定制设备 现在支持的功能: 1. 提供设备选择 2. 支持设备预览 3. 设置出图格式 4. 设置分辨率 5. 支持拍照功能 6. 获取拍照图像类型文件的...14.本地文件上传 15.录像
14. **本地文件上传**:支持上传本地文件到服务器,扩展了功能应用范围。 15. **录像**:除了拍照,还支持录制视频功能。 **控件安装与运行**: 控件以安装包的形式提供,需要先安装。后台程序eloam_socket.exe...
本实例展示了如何在Struts2环境中实现几个关键功能:自定义过滤器、文件上传下载以及用户登录功能。这些功能是任何Web应用程序的基础组成部分,理解和掌握它们对于提升Web开发技能至关重要。 首先,我们来探讨...
在IT行业中,文件上传是常见的交互功能,尤其在Web应用中。`Flex`与`PHP`结合使用可以创建丰富的客户端界面并实现强大的后端处理能力。`Flex`是一种基于Adobe Flash Player运行时的开放源码框架,用于构建具有动态...
在IT行业中,自定义文件上传样式是一个常见的需求,特别是在网页设计和前端开发中。传统的HTML文件上传控件往往样式单一,不能满足设计师和开发者对于用户体验和界面美观度的要求。本篇将围绕“自定义的文件上传样式...
"Flash多文件大文件上传自定义文件类型"这个主题聚焦于使用Adobe Flash技术实现这一复杂需求。以下是关于这个主题的详细解释: 首先,**多文件上传**是指允许用户一次性选择并上传多个文件的功能。这种功能在社交...
Jcrop是开发者们在网页应用中广泛使用的jQuery图片剪裁插件,它具有高度的跨浏览器兼容性,包括对古老版本如IE6的支持。这个强大的工具为用户提供了一种简便的方式,来选取和裁剪图像,尤其适用于在线图片编辑、头像...
在现代Web开发中,前后端分离已经成为一种常见的架构模式,它允许前端和后端应用程序...对于更复杂的场景,可能还需要处理文件分片上传、进度显示、多文件上传等功能,这需要进一步学习和实践ueditor的相关API和文档。
浏览器预览Axure文件是一种高效的设计原型查看方法,尤其对于设计团队和开发团队之间的协作至关重要。Axure是一款广泛使用的交互式原型设计工具,它允许设计师快速创建 wireframes、mockups 和 prototypes,以便在...
ES文件浏览器支持云存储服务的接入,因此源码可能涉及HTTP/HTTPS请求,如使用`OkHttp`或`Volley`库进行网络通信,以及上传下载文件的实现。 8. **SQLite数据库** 应用可能使用SQLite数据库来存储用户的偏好设置、...
基于SpringBoot的文件上传系统,前后端分离,单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传 项目经过严格测试,确保可以运行! 采用前后端分离的方式进行开发,实现了几种常用的文件上传功能...
plupload是一款强大的跨浏览器文件上传组件,特别针对IE6+浏览器进行了优化,确保在各种浏览器环境下都能提供稳定的文件上传功能。它不仅支持HTML5的先进特性,如拖放上传,同时也为不支持HTML5的浏览器提供了回退...
总结起来,Bootstrap自定义文件上传下载样式涉及的关键技术包括Bootstrap的样式和组件(如`.input-group`、`.input-group-addon`),HTML5的文件上传API,Font Awesome图标库,以及CSS3的`pointer-events`属性。...
7. **云存储集成**:集成如Google Drive、Dropbox等云服务,用户可以直接在文件浏览器中上传、下载和管理云端文件。 8. **文件操作**:包括创建、删除、重命名、复制、移动、压缩和解压缩文件及目录,文件浏览器需...
对于文件上传进度的显示,可以监听`progress`事件,获取到已上传的字节数与总字节数,然后更新UI。使用FormData对象,我们可以将文件与表单数据一起发送到服务器,这对于处理复杂的POST请求非常有用。 在实现自定义...
"asp.net 自定义控件 上图文件控件"指的是一个特别的自定义控件,它用于处理文件上传操作,同时还具有进度显示和时间跟踪的功能,这为用户提供了一种高效且直观的交互体验。 在创建自定义控件时,通常涉及以下步骤...
用户可以直接通过ES文件浏览器连接到各种云服务,如Google Drive、Dropbox、OneDrive等,实现云端文件的上传、下载和管理。这种一站式的服务大大简化了用户在多个云平台间切换的操作。 ES文件浏览器还具备应用程序...
- **实现文件上传和下载**:让用户可以上传本地文件到云服务,或下载云端文件至本地。 通过学习和理解这个源码,开发者不仅可以掌握Android文件系统的操作,还能了解如何组织代码以实现功能丰富的文件浏览器。对于...
- Flex文件上传受到浏览器和Flash Player的安全限制,例如只能上传来自同一源的文件,以及文件大小限制等。开发者需要注意这些限制,并提供适当的错误处理机制。 6. **服务器端配合**: - Flex负责客户端的文件...
本文将深入讲解如何使用AJAX、JavaScript、Java和Servlet来实现一个自定义的文件上传功能,包括限制上传文件的数量以及展示进度条。 首先,我们需要在前端页面上创建一个表单,用户可以通过这个表单选择要上传的...