<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>上传图片前，浏览时实现预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: "宋体", Arial, Helvetica, sans-serif;
font-size: 14px;
background: #fff;
color: #414141
}
#tit {
margin: 10px 15px 20px 20px;
}
#prev {
margin: 0px 0px 12px 0px;
}
#btn {
padding: 2px 10px 2px 10px;
}
input {
margin: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="tit">
<input type="file" name="carpoolpic1" id="carpoolpic1" onchange="changesrc(this)"/>
<h3>预览：</h3>
<img src="" alt="" id="prev" height="192" width="300" />
</div>
当前选择文件大小：
<div id="fileSize"></div>
</body>
<script type="text/javascript">
var flag = true;
/**预览图片*/
function changesrc(sender) {
sender_id = sender.id;
var imgSrc = document.getElementById(sender_id).value;
var t = document.getElementById(sender_id);
if (imgSrc == "") {
flag = false;
return false;
}
if (checkType('jpg,bpm,png',imgSrc) == false) {
document.getElementById(sender_id).value = "";
alert("图片格式不正确!");
flag = false;
return false; //如果不是jpg返回false
} else {
var imgs = document.createElement("img");
imgs.src = imgSrc;
////判断图片大小
if (fileChange(sender) > 500 * 1024) {
alert("图片大小不能超过 500 KB!");
flag = false;
return false; //超过50K返回false
}
////
flag = true;
}
if (isFirefox = navigator.userAgent.indexOf("IE") > 0) {
document.getElementById("prev").src = imgSrc;
}else{
document.getElementById("prev").src = window.URL.createObjectURL(t.files[0]);
}
}
/**判断图片类型*/
function checkType(types,imgSrc){
var typeArr = types.split(",");
var rg;
var length = typeArr.length;
var sb=new StringBuilder();
for(var i = 0, len = length; i < len; i++) {
rg = '/(.*?)\.'+typeArr[i]+'$/.test(imgSrc.toLowerCase())';
if(i+1 != length)
rg = rg + " || ";
sb.append(rg);
}
return eval(sb.toString());
}
/**够造StringBuilder*/
function StringBuilder(){
this._strings_=new Array;
}
StringBuilder.prototype.append=function(str){
this._strings_.push(str);
};
StringBuilder.prototype.toString=function(){
return this._strings_.join("");
};
//文件大小
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var sizeLabel = ["B", "KB", "MB", "GB"];
//获取文件大小
function fileChange(target) {
var fileSize = 0;
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
displayFileSize(fileSize);
return fileSize;
}
//显示文件大小
function displayFileSize(size) {
var fileSize = document.getElementById("fileSize");
fileSize.innerHTML = calFileSize(size);
}
//计算文件大小 返回格式化后的字符串 xx kb xx Mb
function calFileSize(size) {
for (var index = 0; index < sizeLabel.length; index++) {
if (size < 1024) {
return round(size, 2) + sizeLabel[index];
}
size = size / 1024;
}
return round(size, 2) + sizeLabel[index];
}
function round(number, count) {
return Math.round(number * Math.pow(10, count)) / Math.pow(10, count);
}
</script>
</html>
纯javascript实现上传图片前图片预览，判断图片大小
5星 · 超过95%的资源 需积分: 14 119 浏览量
2013-12-26
17:02:56
上传
评论
收藏 2KB RAR 举报 
imgPreview.rar （1个子文件） 
imgPreview.html 4KB资源评论
Super_Blank2015-03-02单图上传预览，功能还 可以！
Wintercoder2015-03-07不兼容Ie,不过在火狐和谷歌浏览器好用！
he20101020
- 粉丝: 52
- 资源: 51
