此文学习至:http://www.haorooms.com/post/input_file_leixing

然而只会用,不会做,UI泪茫茫

效果图:

原图:

美化后:

此主要用css美化表单,然后用Jq提交表单

1.css

<style>
    .a-upload {
    padding: 4px  4px 10px 10px;
    height: 25px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;    /* 什么鬼 */
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1 /* 什么鬼 */
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: ;
    top: ;
    opacity: ;
    filter: alpha(opacity=; background: #eee; border-color: #ccc; text-decoration: none ;  /* 什么鬼 */
} 

</style>

①border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

提示:该属性允许您为元素添加圆角边框!

②z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

③ filter:http://www.w3cplus.com/css3/ten-effects-with-css3-filter

④text-decoration:http://www.w3school.com.cn/cssref/pr_text_text-decoration.asp

2.html

        <div class="row upFile">
            <form id="form1" enctype="multipart/form-data"  target="_blank" method="post" action="~/comm/inexcel.ashx?action=test">
                <a href="javascript:;" class="a-upload btn-warning">
                    <input type="file" name="file" id="file" />点击上传文件
                </a>
                <label class="showFileName"></label>
            </form>
        </div>

3.Jq操作

        $(".a-upload").on("change", "input[type='file']", function () {
            var filePath = $(this).val();
            );

            if (extend == "xls") {
                $("#form1").submit();//提交会保持原form中的参数
            }
            $(".showFileName").html("文件上传错误,只支持.xls(2003)");

        });

/ on的绑定事件比较重要,绑定后即使页面刷新,js也不会失效

input file美化,文件上传的更多相关文章

  1. 动态input file多文件上传到后台没反应的解决方法!!!

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  2. html input file标签的上传文件 注意点

    文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...

  3. jquery的input:type=file实现文件上传

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <style> ...

  4. input file标签限制上传文件类型

    用 input 的file类型标签上传文件,有时需要限制上传文件类型,添加accept属性可以实现 <input type="file" accept="image ...

  5. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

  6. jQuery File Upload文件上传插件简单使用

    前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...

  7. jspsmartupload 文件上传让input数据和文件上传同时提交

    一.使用原因: 文件上传时,表单的属性中必须要有multipart/form-data,如以下例子: <form name="form_post" class="a ...

  8. DVWA之File Upload (文件上传漏洞)

    目录 Low: Medium: 方法一:抓包修改文件的type 方法二:00截断 High: Impossible : Low: 源代码: <?php if( isset( $_POST[ 'U ...

  9. IE input file隐藏不能上传文件解决方法

    当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案.罢了,为了和我一样笨的后来人. 问题: 上传文件时,用<input type="file" /> ...

  10. input file multiple 批量上传文件

    这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...

随机推荐

  1. 实现微信浏览器内打开App Store链接(已被和谐,失效了)

    微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href=”http://itunes.apple.com/us/app/id399608199″& ...

  2. XMPP学习——1、介绍

    XMPP(Extensible Messaging and Presence Protocol,前称Jabber[1])是一种以XML为基础的开放式实时通信协议,是经由互联网工程工作小组(IETF)通 ...

  3. Android 图片的缩放与旋转

    本文实现Android中的图片的缩放效果 首先设计布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res ...

  4. 【代码笔记】iOS-点击任何处,出现城市

    一,效果图. 二,工程目录. 三,代码. //点击任何处,出现城市 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { ...

  5. MVP模式在Android项目中的使用

    以前在写项目的时候,没有过多考虑架构模式的问题,因为之前一直做J2EE开发,而J2EE都是采用MVC模式进行开发的,所以在搭建公司项目的时候,也是使用类似MVC的架构(严格来讲,之前的项目还算不上MV ...

  6. WPF学习之路(十二)控件(Range控件)

    ProgressBar 进度条,主要属性:Minimum\Maximun\Value, IsIndeterminate为True时,进度条会循环运转 <Grid> <Grid.Row ...

  7. linux下svn命令使用大全(share)

     转自:http://blog.chinaunix.net/uid-22566367-id-1965771.html 1.将文件checkout到本地目录 svn checkout path(path ...

  8. .NET项目开发—浅谈面向接口编程、可测试性、单元测试、迭代重构(项目小结)

    阅读目录: 1.开篇介绍 2.迭代测试.重构(强制性面向接口编程,要求代码具有可测试性) 2.1.面向接口编程的两个设计误区 2.1.1.接口的依赖倒置 2.1.2.接口对实体的抽象 2.2.迭代单元 ...

  9. mysql错误一例:ERROR 1030 (HY000): Got error 28 from storage engine

    在使用mysqldump导出一份建库脚本是,发生了下面的错误: 当执行 desc table_name; 时也报错: tag为表名,show index from tag;倒是可以执行. 其实真正的错 ...

  10. js 添加节点dom

    var elemet = document.createElement("p"); var attr=document.createAttribute("align&qu ...