`
netskys
  • 浏览: 48490 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

css滤镜改上传文件样式

 
阅读更多
上传文件 将 浏览  利用滤镜 改样式

效果如图
[img]http://dl.iteye.com/upload/attachment/0064/6565/3f5acfc8-c756-3ef4-9778-20f2ee919901.jpg
[/img] 

<style> 
input{border:1px solid green;} 
</style> 
<BODY> 



 
<form method="post" action="" enctype="multipart/form-data"> 
<input type="text" id="txt" name="txt"> 
  <input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="请选择文件" size="30" onclick="f.click()"> 
<input type="file" id="f" onchange="txt.value=this.value" name="f" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus>
 
<INPUT TYPE="submit"> 
</form> 
</BODY> 

详细出处参考：http://www.jb51.net/article/13019.htm
  • 大小: 6.6 KB
分享到：
| 大写转下划线的算法 驼峰转 下划线
评论
发表评论

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

相关推荐

    文件上传input file简便美化方案(css)

    在探讨文件上传组件的美化方案时，我们会涉及到多个方面的知识点，主要包括跨浏览器兼容性的处理、CSS样式的应用以及JavaScript的交互操作。首先，我们要理解在不同浏览器中文件上传input（）的表现形式存在差异，这...

    HTML5+CSS仿Instagram应用图片滤镜效果

    这部分可能使用了`FileReader API`来读取用户上传的图片，并实时应用CSS滤镜到`&lt;canvas&gt;`元素上。然后，`canvas`元素可以作为新图片的源，显示在页面上，让用户看到实时的滤镜效果。 `img`文件夹可能包含了一些示例...

    html5手机端照片上传滤镜特效

    `css`目录下的文件负责页面的样式设计，`js`目录中的文件则包含JavaScript代码，可能是滤镜效果的核心实现。`img`目录则存储了可能用到的图片资源，例如预览图或示例图片。`大头网.url`可能是一个网站链接，可能是...

    用css alpha 滤镜 实现input file 样式美化代码

    对于`&lt;input type="file"&gt;`这样的文件上传按钮，由于浏览器的默认样式通常较为简单，不符合现代网页的审美需求，因此需要通过CSS来对其进行改造。本篇文章将详细介绍如何利用CSS的Alpha滤镜来实现`...

    jquery图片滤镜特效.rar

    文件列表中的“jquery图片滤镜特效”很可能包含了示例代码、CSS样式文件和可能的图片资源。解压后，开发者可以研究这些代码，了解如何使用jQuery创建和控制图片滤镜。这可能包括JavaScript文件（.js）用于实现滤镜...

    网页美化包含CSS javascript

    CSS Filter.CHM可能涵盖了CSS滤镜技术，这是一种让开发者能够对元素应用特殊视觉效果的方法，例如模糊、灰度、饱和度调整等。这在现代网页设计中用于创建引人注目的动态效果。 JavaScript则是一种强大的客户端脚本...

    HTML5手机移动端图片上传滤镜特效

    总结来说，"HTML5手机移动端图片上传滤镜特效"涉及HTML5 File API、Canvas绘图、滤镜算法、CSS3样式、JavaScript库、移动端适配、用户交互设计以及性能优化等多个方面。这些都是现代Web开发中的核心技能，对于创建...

    ie图片上传滤镜.doc

    这种方式更加安全，因为它不涉及本地文件路径，而是将文件内容转换为可以在浏览器内使用的格式。 【其他浏览器的解决方案】 对于不支持滤镜或者getAsDataURL的浏览器，如Opera、Safari和早期的Chrome，通常需要...

    国外设计团队CSS3网站模板是一款简洁白色大气的CSS3设计企业网站模板 .rar

    7. 部署和定制：用户在获取模板后，需要根据自己的需求对模板进行个性化修改，如更换图片、修改文字、调整颜色方案等，然后将修改后的文件上传到服务器，完成网站的上线部署。 8. 版权和许可证：在使用模板时，了解...

    疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码

    第6章　级联样式单与CSS选择器 150 6.1　样式单概述 151 6.2　CSS样式单的基本使用 152 6.3　CSS选择器 158 6.4　伪元素选择器 167 6.5　CSS 3新增的伪类选择器 176 6.6　在脚本中修改显示样式 195 6.7　本章小结 ...

    用Canvas+Javascript FileAPI 实现一个图片剪切、滤镜处理、上传下载工具.pdf

    2. **CSS**：设置了canvas元素和选择框的样式，如大小、边框、位置和鼠标指针类型，以及用于调整选择框大小的resize元素。 3. **JavaScript**：使用jQuery库，定义了一些变量和配置，比如canvas尺寸、图片缩放比例...

    人脸 液化滤镜（眼睛 脸部缩放）

    它提供了一系列预设的CSS样式、JavaScript组件和HTML模板，使得开发者能够快速构建用户界面。在这个场景下，AmazeUI可以用来设计一个友好的用户界面，让用户能够上传图片并查看液化效果。 人脸识别库DLIB是本项目的...

    HTML5 CSS实现图片过滤特效.zip

    CSS则用于处理页面布局和样式，使得图片和滤镜选择界面美观且易于操作。我们可以使用CSS3的过渡(transition)和动画(animation)来创建平滑的滤镜应用效果。此外，利用Flexbox或Grid布局可以创建响应式的滤镜选择面板...

    PS+CSS+JS+PHP常用

    5. 文件系统操作：读写文件、创建目录、上传下载等。 6. 错误处理与异常处理：使用`error_reporting`和`try...catch`来管理和处理程序错误。 以上就是关于PS、CSS、JS和PHP的一些基础知识点，掌握这些将对网页设计...

    用Canvas+Javascript FileAPI 实现一个图片剪切、滤镜处理、上传下载工具.docx

    11. **CSS样式**: CSS用于设置Canvas和图片选择框的外观，包括边框、位置和鼠标指针样式等。 12. **结果展示**: 处理后的图片可以绘制到多个结果Canvas上，以显示不同的滤镜效果。每个结果Canvas都有自己的尺寸配置...

    HTML中文件上传时使用的input type=”file”元素的样式自定义

    接下来，我们需要修改样式使得"上传"和文件选择框在同一行显示。这可以通过设置`.fileinput-button`类的CSS样式完成，例如设置`position: relative`和`display: inline-block`，然后将`&lt;input type="file"&gt;`元素的`...

    纯CSS3万圣节女巫坩埚动画特效.rar

    2. **过渡（Transitions）**：CSS3过渡用于平滑地改变一个元素从一种样式到另一种样式的过程，例如改变颜色、大小或位置，常用于创建平滑的动画效果。 3. **动画（Animations）**：CSS3动画允许创建更复杂的交互，...

    js图片文件存档，播放图片文件

    综上所述，这个存档文件“home”可能包含了一个网页项目的基本组成部分，其中JavaScript负责交互逻辑，CSS负责样式设计，而图片文件则是呈现给用户的主要视觉内容。如果你对这些内容感兴趣，可以通过解压文件并查看...

    图片分享CSS网站模板是一款现代商业风格的CSS网站模板下载 .rar

    下载这个模板后，开发者需要根据`README.md`的指示进行操作，可能需要将模板文件上传至服务器、集成到现有的CMS系统（如WordPress）、或者在本地开发环境中进行调整。在实际应用中，可能还需要根据业务需求修改HTML...

    IE5,IE6,IE7,IE8的css兼容性列表

    每个版本都有其独特的特性和对CSS（层叠样式表）的支持程度，这对于前端开发者来说是必须要了解的知识点。下面我们将详细探讨这些版本的CSS兼容性问题。 首先，让我们从IE5开始。这个版本发布于1999年，当时CSS1...

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