文件上传<input type="file">样式美化

<div class="fileInput left" style="width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;">
    <input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById(‘upfileResult‘).innerHTML=this.value" style="position:absolute;top:-100px;"/>
    <input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById(‘upfile‘).click()" style="width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;" />
</div><span class="tip left" id="upfileResult">图片大小">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>

样式如下图：

时间： 2024-08-25 23:43:34

文件上传<input type="file">样式美化的相关文章

webview 不支持文件上传 <input type="file" />

项目中遇到文件上传的需求,IOS直接是支持的,安卓端却没反应,有些机型甚至闪退. 找了很多原因,在网上找的办法,实测可行,做个记录,知识分享. Html文件上传 <input type="file" class="uploadBtn" multiple="multiple" accept="image/jpeg"> 手机端WebView重写方法 // 1.设置WebChromeClient,重写文件上传回调 mWe

css input[type=file] 样式美化，input上传按钮美化

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 代码如下: DOM结构: <a href="javascript:;" class="a-upload"> <input type=

input[type=file] 样式美化，input上传按钮美化

文件上传按钮的用户自定义样式的实现

一般在做 WEB 开发项目的时候碰到文件上传必不可少,但是因为各家浏览器对于 <input type="file"> 标签支持不同所以在各个浏览器下的显示也是不一样的.可能在用户体验方面会形成困扰,今天就给大家介绍一下文件上传按钮的用户自定义样式的实现. 实现原理: 建立两个层,一个层包装 <input type="file"> 以下简称文件按钮层,一个层包装上传文件按钮的自定义样式,以下渐层样式层.设置两个层的大小一致,将文件按钮层设置相对

[预]input type=file 样式自定义

input type=file 样式自定义:http://www.haorooms.com/post/css_input_uploadmh input type=file 上传类型控制:http://www.haorooms.com/post/input_file_leixing

文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件</span> <input type="file" name=""> </label> 在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题. .file-upload{ disp

Spring MVC文件上传出现错误：Required MultipartFile parameter 'file' is not present

1.配置文件上传的解析器首先需要在spring mvc的配置文件中(注意是spring mvc的配置文件而不是spring的配置文件:applicationContext.xml)配置: springmvc-config.xml  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartReso

SpringMVC使用MultipartFile文件上传，多文件上传，带参数上传

一.配置SpringMVC 在spring.xml中配置:  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="-1&

基于spring 3.0mvc 框架的文件上传实现

Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring 可插入的 MVC 架构,可以选择是使用内置的 Spring Web 框架还是 Struts 这样的 Web 框架.通过策略接口,Spring 框架是高度可配置的,而且包含多种视图技术,例如 JavaServer Pages(JSP)技术.Velocity.Tiles.iText 和 POI.Spring MVC 框架并不知道使用的视图,所以不会强迫您只使用 JSP 技术.Spring MVC 分离了控制器.