图片上传预览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div>
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="textfield" id="textfield" />
<input type="button" value="浏览..." />
<input type="file" name="fileField" id="fileField" size="28" onchange="document.getElementById(" textfield").value=this.value" />
<input type="submit" name="submit" value="上传" />
<div id="demo_result"></div>
</form>
</div>
</body>
<script type="text/javascript">
var result = document.getElementById("demo_result");
var input = document.getElementById("fileField");
if (typeof FileReader === "undefined") {
result.innerHTML = '<p>抱歉，你的浏览器不支持 FileReader</p>';
input.setAttribute("disabled", "disabled");
} else {
input.addEventListener("change", readFile, false);
}
function readFile() {
for (var i = 0; i < this.files.length; i++) {
var file = this.files[i];
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
result.innerHTML += '<img src="' + this.result + '" alt=""/>';
}
}
}
</script>
</html>
