正文
javascript 图片上传缩略图预览
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片上传缩略图预览</title>
<script language="JavaScript" type="text/javascript">
var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
var preivew = function (file, container) {
try {
var pic = new Picture(file, container);
}
catch (e) {
alert(e);
}
}
//缩略图类定义
var Picture = function (file, container) {
try {
var height = ,
widht = ,
ext = '',
size = ,
name = '',
path = '';
var self = this;
if (file)
{
name = file.value;
if (window.navigator.userAgent.indexOf("MSIE") >= ) {
var browser = navigator.appName;
var b_version = navigator.appVersion
var version = b_version.split(";");
var trim_Version = version[].replace(/[ ]/g, ""); if (trim_Version == "MSIE6.0") {
file.select();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
} else if (trim_Version == "MSIE7.0") {
file.select();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
} else if (trim_Version == "MSIE8.0") {
file.select();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
} else {
file.select();
//file.blur();
//path = document.selection.createRange().text;
path = window.URL.createObjectURL(file.files[]);
}
}
else if (window.navigator.userAgent.indexOf("Firefox") >= ) {
if (file.files) {
path = file.files.item().getAsDataURL();
} else {
path = file.value;
}
}
}
else {
throw "bad file";
}
ext = name.substr(name.lastIndexOf("."), name.length);
if (container.tagName.toLowerCase() != 'img') {
throw "container is not a valid img label";
container.visibility = 'hidden';
}
container.src = path;
container.alt = name;
container.style.visibility = 'visible';
height = container.height;
widht = container.widht;
size = container.fileSize;
this.get = function (name) {
return self[name];
}
this.isValid = function () {
if (allowExt.indexOf(self.ext) !== -) {
throw 'the ext is not allowed to upload';
return false;
}
}
}
catch (e) {
alert("R:"+e);
} /***
*读取，图片为流文件
***/
/*
var reader = new FileReader();
reader.onload = function(e)
{
console.log(e.target.result);
alert(e.target.result);
var fromData = new FormData();
fromData.append("base64", e.target.result);
}
reader.readAsDataURL(document.querySelector("input[type=file]").files[0]);
*/
}
</script>
</head>
<body>
<div class='previewDemo'>
<input id="file" type="file" onchange="preivew(this, document.getElementById('img'));" />
<br />
<img id="img" style="visibility:hidden" height="100px" width="100px" /></div>
</body>
</html>
