标签：
<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>
外观一
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>
外观二
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; }
样式三
$("#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>‘ ) } } } }
标签：
原文地址：http://www.cnblogs.com/wangboke/p/5842512.html
