样式一（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>'
)
}
}
}
}