jQuery实现上传图片本地预览
程序员文章站
2022-06-14 14:58:14
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta content="" name="Keywords" />
<meta content="" name="Description" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/uploadPreview.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("[type=file]").change(function(){
//预览图片
var $img = $(this).next();
//最大 1M
var maxSize = 1024;
//获取文件大小
var fileSize = this.files[0].size/1024;
if(fileSize>maxSize){
alert('文件过大最大为：' + maxSize + ' KB ');
return false;
};
//后缀正则表达式
var reg = /^.+[.]png|.+[.]gif|.+[.]jpeg|.+[.]jpg|.+[.]bmp$/;
var val = $(this).val();
if(reg.test(val)==false){
alert('图片格式不正确,包含以下格式[gif,jpeg,jpg,bmp,png]');
return false;
}
if($.browser.msie){//判断是否为ie浏览器
$img.attr("src",$(this).val())
}else{//不是IE浏览器
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$img.attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}else{
alert('浏览器不支持预览功能！');
}
return url ;
}
});
</script>
</head>
<body>
<form id="form" method="post">
<input type="file" />
<img class="img"/>
</form>
</body>
</html>
上一篇： 求助：php项目如何部署在服务器上？
下一篇： php session的问题