文件上传，跨浏览器统一的样式
1.JS代码
<script type="text/javascript" src="${contextPath}/js/ajaxfileupload.js"></script>
var downTemplate = function() {
var url = ctx + '/rva/template/goveente/order/cost_template.xls';
window.open(url);
};
var uploadTemplate = function() {
$.ajaxFileUpload({
url : ctx + '/goveente/order/cost_audit!upload.action',
secureuri : false,
timeout : 10000,
fileElementId : "costFile",
dataType : 'json',
data : {
latnId : $("#latnId").val()
},
success : function(result, status) {
alert("上传数据成功！");
Messenger().post({
message : "上传数据成功!!",
type : 'info',
showCloseButton : true
});
},
error : function(result, status, e) {
bootbox.alert("加载数据出错!");
}
});
};
====================================================
2.CSS代码
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.btn_addPic {
display: block;
position: relative;
width: 140px;
height: 26px;
overflow: hidden;
border: 1px solid #EBEBEB;
background: none repeat scroll 0 0 #1A7BC9;
color: white;
cursor: pointer;
text-align: center;
}
.btn_addPic span {
display: inline-block;
line-height: 26px;
}
.btn_addPic em {
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: 26px;
font-size: 100px; /* 增大不同浏览器的可点击区域 */
opacity: 0; /* 实现的关键点 */
filter: alpha(opacity = 0); /* 兼容IE */
}
</style>
============================================================
3. HTML代码
<a class="ailk-linkbutton" onclick="downTemplate()">下载模板</a>
<a class="btn_addPic" href="javascript:void(0);"><span>上传</span>
<input id="costFile" name="costFile" class=filePrew type=file onchange="uploadTemplate()" size=3>
</a>