input file 样式以及获取选择文件方法集合

样式一（http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html）

<style>
a{display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden;}
a:hover{background:green;}
input{position:absolute; right:; top:; font-size:100px; opacity:; filter:alpha(opacity=);}
</style>

<a href="#">
    <input type="file" value="浏览" />
</a>

外观一

样式二（http://www.jb51.net/css/69093.html）

CSS 代码
*{margin:;padding:;}
a{text-decoration:none;}
.btn_addPic{
display: block;
position: relative;
width: 140px;
height: 39px;
overflow: hidden;
border: 1px solid #EBEBEB;
background: none repeat scroll   #F3F3F3;
color: #;
cursor: pointer;
text-align: center;
}
.btn_addPic span{display: block;line-height: 39px;}
.btn_addPic em {
background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0;
display: inline-block;
width: 18px;
height: 18px;
overflow: hidden;
margin: 10px 5px 10px ;
line-height: 20em;
vertical-align: middle;
}
.btn_addPic:hover em{background-position:-19px ;}
.filePrew {
display: block;
position: absolute;
top: ;
left: ;
width: 140px;
height: 39px;
font-size: 100px; /* 增大不同浏览器的可点击区域 */
opacity: ; /* 实现的关键点 */
filter:alpha(opacity=);/* 兼容IE */
} 

HTML代码
<A class=btn_addPic href="javascript:void(0);"><SPAN><EM>+</EM>添加图片</SPAN> <INPUT class=filePrew title=支持jpg、jpeg、gif、png格式，文件小于5M tabIndex= type=file size= name=pic></A>

外观二

样式三（http://www.360doc.com/content/12/1229/13/11395036_256962485.shtml）

HTml 代码

  <div class="fileInputContainer">
  <input type="file" name="fileData" id="imgFlie"  onchange="showPicture(this.files)" multiple />
  </div>

CSS代码
.fileInputContainer {
      height: 80px;
      background: url(http://wx115.cnpsim.com/Content/images/imagefile.png);
      background-size: contain;
      position: relative;
      width: 80px;
      text-align:center;
  }
  #imgFlie {
      height: 80px;
      overflow: hidden;
      font-size: 100px;
      position: absolute;
      right: ;
      top: ;
      opacity: ;
      filter: alpha(opacity=);
      cursor: pointer;
  }

样式三

*可以通过JQ注册change事件以便获取选择的文件或图片，在chang事件里面通过 this.files获取选择的文件等，也可像样式三代码中一样通过JS中onchange事件获取，

*有时text-align：center,并不能使其居中时可以尝试用margin-left:30%;margin-right:30%;

 

$("#imgFlie").live("change", function () {
    var data = this.files;
    //var data = document.getElementById('imgFlie').files;js获取
    $(this).clone().replaceAll(file = this); //每次选中都保存旧元素，并使用新的控件替换(解决紧邻的二次不能选择同一图片)
    $.each(data, function (key, value) {
        var objUrl = getObjectURL(value);
        if (objUrl) {
            var img = new Image();
            img.src = objUrl;
            img.onload = function () {
                var size = img.width + 'x' + img.height;
                $("#ImageDiv").append('<figure><div>' +
                '<a  href=' +
                '"' + objUrl + '"' +
                'data-size=' +
                '"' + size + '"' +
                '>' +
                '<img class="WorkOrderimageNew" style="height:90px;width:90px;" src=' +
                    '"' + img.src + '"' +
                '>' +
                '</a>' +
                '</div>' +
                '<figcaption style="display:none;">' +
                '图片' +
                //'<button style="float:right;" onclick=DeleteImage("' + value + '"' +
                //',' +
                //'"' + value + '")>删除图片(手机端需要注册触摸事件)</button> ' +
                '</figcaption></figure>'
                )
            };
        }
    });
});

function showPicture(files) {
  //  var files = document.getElementById('imgFlie').files;
    for (var i = ; i < files.length; i++) {
        var file = files[i];
        if (!/image\/\w+/.test(file.type)) {
            return false;
        }
        var url = getObjectURL(file)
        if (url) {
            var img = new Image();
            img.src = url;
            img.onload = function () {
                var size = img.width + 'x' + img.height;
                $("#ImageDiv").append('<figure><div>' +
                '<a  href=' +
                '"' + img.src + '"' +
                'data-size=' +
                '"' + size + '"' +
                '>' +
                '<img class="WorkOrderimageNew" style="height:40px;width:40px;" src=' +
                    '"' + img.src + '"' +
                '>' +
                '</a>' +
                '</div>' +
                '<figcaption style="display:none;">' +
                '这是的图片名' +
                 '"' + file.name + '"' +
                '</figcaption></figure>'
                )
            }
        }
    }
}