首页 > 代码库 > input file 样式以及获取选择文件方法集合
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:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}</style> <a href=http://www.mamicode.com/"#"> <input type="file" value=http://www.mamicode.com/"浏览" /></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=http://www.mamicode.com/"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 = http://www.mamicode.com/this.files; //var data = http://www.mamicode.com/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=http://www.mamicode.com/‘ + ‘"‘ + objUrl + ‘"‘ + ‘data-size=‘ + ‘"‘ + size + ‘"‘ + ‘>‘ + ‘<img class="WorkOrderimageNew" style="height:90px;width:90px;" src=http://www.mamicode.com/‘ + ‘"‘ + 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=http://www.mamicode.com/‘ + ‘"‘ + img.src + ‘"‘ + ‘data-size=‘ + ‘"‘ + size + ‘"‘ + ‘>‘ + ‘<img class="WorkOrderimageNew" style="height:40px;width:40px;" src=http://www.mamicode.com/‘ + ‘"‘ + img.src + ‘"‘ + ‘>‘ + ‘</a>‘ + ‘</div>‘ + ‘<figcaption style="display:none;">‘ + ‘这是的图片名‘ + ‘"‘ + file.name + ‘"‘ + ‘</figcaption></figure>‘ ) } } }}
input file 样式以及获取选择文件方法集合
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。