此文学习至: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. yii 项目根目录下需要有assets目录

    yii 项目根目录下需要有assets目录,如果没有,会导致gii失效

  2. 检测Xcode是否有问题

    之前的XCode中毒事件闹得沸沸扬扬,在网上找到检测XCode完整性的方式,有需要的小伙伴试试吧.忘记哪里转的了,愧对原创者 在终端输入 spctl 命令,并带上安装的 Xcode 的路径: spct ...

  3. 【读书笔记】iOS-ARC-环境下如何查看引用计数的变化

    一,新建立一个工程,用于测试引用计数的变化. 二,找到如下路径Build Phases---->Compile Sources---->AppDelegate.m 三,选中AppDeleg ...

  4. iOS带动画的环形进度条(进度条和数字同步)

    本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...

  5. react学习笔记1

    # 1.hello world 学习一个语言,最好的方式,我们需要去官网去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo ...

  6. nexus搭建maven私服

    下载nexus 首先,从以下地址下载nexus: http://www.sonatype.com/download-oss-sonatype 选择下载nexus-2.13.0-01-bundle.ta ...

  7. mac 远程连接服务器

    很多刚用mac的同学 可能会纠结,连接远程服务器咋整? 有没有类型windows上的securecrt 其实,完全可以不用: mac自带的终端就可以搞定:终端terminal 如何连接远程服务器? s ...

  8. python里面出现中文的时候报错 'ascii' codec can't encode characters in position

    编码问题,在头部添加 import sys reload(sys) sys.setdefaultencoding( "utf-8" ) http://www.xuebuyuan.c ...

  9. ADDM Reports bug:Significant virtual memory paging was detected on the host operating system

    查看ADDM(数据库版本为ORACLE 10.2.0.5.0)报告时,发现其中有个结论非常不靠谱:Significant virtual memory paging was detected on t ...

  10. Javascript之旅——第十站:为什么都说闭包难理解呢?

    研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不少 人就会被忽悠的云里雾里...下面我也试着来说说闭包,看我说的这个 ...