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

Posted 2020-08-06 名扬博客

样式一（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:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}
</style>
    
<a href="#">
    <input type="file" value="浏览" />
</a>

外观一

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

CSS 代码
*{margin:0;padding:0;} 
a{text-decoration:none;} 
.btn_addPic{ 
display: block; 
position: relative; 
width: 140px; 
height: 39px; 
overflow: hidden; 
border: 1px solid #EBEBEB; 
background: none repeat scroll 0 0 #F3F3F3; 
color: #999999; 
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 0; 
line-height: 20em; 
vertical-align: middle; 
} 
.btn_addPic:hover em{background-position:-19px 0;} 
.filePrew { 
display: block; 
position: absolute; 
top: 0; 
left: 0; 
width: 140px; 
height: 39px; 
font-size: 100px; /* 增大不同浏览器的可点击区域 */ 
opacity: 0; /* 实现的关键点 */ 
filter:alpha(opacity=0);/* 兼容IE */ 
} 

html代码
<A class=btn_addPic href="javascript:void(0);"><SPAN><EM>+</EM>添加图片</SPAN> <INPUT class=filePrew title=支持jpg、jpeg、gif、png格式，文件小于5M tabIndex=3 type=file size=3 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: 0;
      top: 0;
      opacity: 0;
      filter: alpha(opacity=0);
      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 = 0; 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>\'
                )
            }
        }
    }
}