首页 > 代码库 > input file 美化及上传本地预览
input file 美化及上传本地预览
效果：
/*input file 美化及上传本地预览，兼容IE6-8，FIrefox， Chrome（需在服务端，本地无效）*/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input file 美化</title>
<script src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[type = ‘file‘]").change(function () {
var explorer = window.navigator.userAgent;
var url = document.getElementById("image");
var file = document.getElementById("file");
if (explorer.indexOf("MSIE") >= 0) {
file.select();
url.src = document.selection.createRange().text;
}
else if (explorer.indexOf("Firefox") >= 0 || explorer.indexOf("Chrome") >= 0) {
var oFReader = new FileReader();
var oFile = file.files[0];
oFReader.onload = function (e) {
url.src = e.target.result;
}
oFReader.readAsDataURL(oFile);
}
});
})
</script>
<style>
* { 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(add.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 */
}
#min_img { width: 100px; }
#min_img img { width: 100%; }
</style>
</head>
<body>
<form>
<a href="javascript:void(0);" class="btn_addPic">
<span><em>+</em>添加图片</span>
<input tabindex="3" title="支持jpg、jpeg、gif、png格式，文件小于5M" size="3" name="file" id="file" class="filePrew" type="file">
</a>
<div id="min_img"><img id="image" /></div>
</form>
</body>
</html>
add.png
**********************************************************************************************************************
input file美化原理：将input file透明值设为0(opacity: 0;)，就不会显示，但是占据位置，可以相应操作，然后在它上面或下面放上美化的元素即可。
**********************************************************************************************************************
1. IE6可以使用value属性获取绝对路径
例：
$("input[type = ‘file‘]").change(function () {
var url= $(this).val();
});
IE7 8本地可以获取地址，服务器只能获取名字，可以使用以下方式获取，支持IE6-8。
file.select();
url.src = document.selection.createRange().text;
2. 火狐和谷歌可以使用html5的File API中得FileReader获取本地路径
readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
readAsBinaryString(file)：将文件读取为二进制字符串
readAsDataURL(file)：将文件读取为Data URL
readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为‘UTF-8‘
FileReader对象在读取文件后，还需要进行处理。为了不阻塞当前线程，API采用了事件模型，可以注册这些事件：
onabort：中断时触发
onerror：出错时触发
onload：文件成功读取完毕时触发
onloadend：文件读取完毕时触发，无论是否失败
onloadstart：文件开始读取时触发
onprogress：当文件读取时，周期性地触发
例：
$("input[type = ‘file‘]").change(function () {
var oFReader = new FileReader();
var oFile = document.getElementById("file").files[0];
oFReader.onload = function(e) {
document.getElementById("image").src = e.target.result; /*不可传递给变量*/
}
oFReader.readAsDataURL(oFile);
});
3. 谷歌可以使用window.webkitURL.createObjectURL(file.files[0])获取本地路径
例：
$("input[type = ‘file‘]").change(function () {
var docObj=document.getElementById("file");
var imgurl= window.webkitURL.createObjectURL(docObj.files[0]);
});
注： 2 3谷歌必须在服务器端才可有效果，2火狐本地可用。
input file 美化及上传本地预览