网上看了很多,自己总结写了些,感觉有点罗嗦,不过还可以用;下面不多说,上代码
<img src="../images/xuanchuanimg.png" class="scimg" id="xuantupian"/>
这是js代码:
<script type="text/javascript">
function upPic(target,e){
/* 检测上传文件的类型 */
var src=e.target||window.event.srcElement; //获取事件源,兼容chrome/IE
var filename=src.value;
var imgName=filename.substring(filename.lastIndexOf( '\\')+1);
var ext,idx;
if(imgName == ''){
alert("请选择需要上传的图片!");
return;
}else{
idx = imgName.lastIndexOf(".");
if(idx != -1){
ext = imgName.substr(idx+1).toUpperCase();
ext = ext.toLowerCase();
if(ext != 'jpg' && ext != 'png' && ext != 'jpeg' && ext != 'gif'){
alert("只能上传.jpg .png .jpeg .gif类型的文件!");
return;
}
}else{
alert("只能上传.jpg .png .jpeg .gif类型的文件!");
target.value = "";
return;
}
}
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var fileSize = 0;
if(isIE && !target.files){
var filePath = target.value;
var fileSystem = new ActiveXObject("Scription.FileSystemObject");
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;
}else{
fileSize = target.files[0].size;
}
//验证大小
if(fileSize>1024*1024){
alert("图片过大不能上传");
return
}
//验证宽高
checkImgPX(target, 240, 300,target.files[0]);
};
//检查图片的宽高是否符合要求
function checkImgPX(ths, width, height,fil) {
var objUrl = getObjectURL(fil) ;
var img = null;
img = document.createElement("img");
document.body.insertAdjacentElement("beforeEnd", img); // firefox不行
img.style.visibility = "hidden";
img.src = objUrl;
var imgwidth=0;
var imgheight=0;
if(img.complete){/*判断是否图片在本页面完成加载*/
imgwidth = img.offsetWidth;
imgheight = img.offsetHeight;
}else{
img.onload = function(){/*待图片加载后获取宽和高*/
imgwidth = img.offsetWidth;
imgheight = img.offsetHeight;
alert(imgwidth+","+imgheight);
if(imgwidth!=width || imgheight!=height) {
alert("必须是240像素*300像素的图片");
ths.value = "";
return
}else{
console.log("objUrl = "+objUrl) ;
if (objUrl) {/*图片预览展示*/
var element = document.getElementById('xuantupian');
alert(objUrl);
element.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) ;
}
return url ;
}//end
</script>