<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现浏览图片预览</title>
<style type="text/css">
body {
}
a, img {
border: 0;
}
.button {
background-color: #0075AC;
border-radius: 20px;
color: #FFF;
font-family: "微软雅黑";
font-size: 14px;
height: 30px;
line-height: 30px;
padding: 0 15px;
display: inline-block;
text-decoration: none;
}
.file {
0px;
height: 0px;
overflow: hidden;
position:absolute;
left:-100px;
top:-100px;
z-index:-999;
}
#filelist {
min-height: 30px;
height: auto;
/*border: 1px solid #c9c9c9;*/
margin: 5px 0;
}
#filelist img {
margin: 5px 0 5px 5px;
}
</style>
<script type="text/javascript">
//预览图片
function previewImage(file) {
//标准浏览器,FF、谷歌
if (file["files"] && file["files"][0]) {
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('img1').src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
//IE
else {
file.select();
var path = document.selection.createRange().text;
document.getElementById('img1').src = path;
}
}
//选择图片
function selectImage() {
document.getElementById('file1').click();
}
//开始上传,这个只适用于我们.NET,上传你暂时用不了
function startUpload() {
var _file1 = document.getElementById("file1");
var _url = "_upload.aspx";
var formData = new FormData();
formData.append("file", _file1.files[0]);
var _request = new XMLHttpRequest();
_request.open("post", _url, true);
_request.onload = function (response) {
var name = response.currentTarget.responseText;
alert(name);//返回上传文件名,失败返回空
}
_request.send(formData);
}
</script>
</head>
<body>
<input id="file1" type="file" onchange="previewImage(this)" class="file" />
<a href="javascript:selectImage()" class="button">选择图片</a>
<a href="javascript:startUpload()" class="button">上传文件</a>
<div id="filelist">
<img src="" width="100" height="70" id="img1" alt="" />
</div>
</body>
</html>
以上个人验证过，可用！