实例如下：
reader.onloadend = function(event) {
var imgObj = new Image();
imgObj.src = event.target.result; // image src
imgObj.onload = function(event) {
filePath = this.src;
if(photo_flag){
$("#imgShow").attr("src",filePath);
} else {
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
}
}
}
} else { ///////////////////////////////////////////// ie
obj.select();
var path = document.selection.createRange().text;
var img = new Image();
img.src = path;
var fileType = path.substring(path.length-4,path.length);
if(img.readyState == "complete") {
fileSize = img.fileSize;
} else {
img.onreadystatechange=function(){
if(img.readyState=='complete'){//当<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>load完毕
fileSize = img.fileSize;
if(fileSize > fSize){
setMsg('photoSrc_msg','<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>太大了！','reg_wrong');
photo_flag = false;
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
return;
}
}
}
}
if (path) {
filePath = path;
}
}
if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){//image/jpeg
setMsg('photoSrc_msg','<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>格式<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>！','reg_wrong');
photo_flag = false;
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
return;
}
if(fileSize > fSize){
setMsg('photoSrc_msg',"<%=request.getContextPath()%>/userTx/default.jpg");
return;
}
setMsg('photoSrc_msg','正确','reg_ok');
if(photo_flag){
$("#imgShow").attr("src",filePath);
} else {
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
}}
下面讲解上面的代码：
下面是一个用户上传头像的格式和大小的验证的方法，在用户注册的时候要求用户上传头像的时候进行的验证。在方法中我给予了最详细的注释
fileType = thisFile.type;//获取文件的类型，一般来说，如果类型是image/jpeg,.jpg,.gif等等图片格式的话就是合理的
fileSize=thisFile.size;//获取当前上传的文件的大小
fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize;
//如果是firefox,调用
reader.readAsDataURL(thisFile);
// readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
reader.onloadend = function(event) {
//文件读取成功完成时触发
var imgObj = new Image();
imgObj.src = event.target.result; // 图像的路径 imgObj.onload = function(event) {
// 图片加载完毕后
filePath = this.src;
if(photo_flag){
$("#imgShow").attr("src",filePath);//设置图片为当前上传的图片路径
} else {
$("#imgShow").attr("src","default.jpg");
//否则设置默认的图片
}
}
}
} else { //如果是ie
obj.select();
var path = document.selection.createRange().text;
//ie下返回上传时选定的文件路径
var img = new Image();
img.src = path;
var fileType = path.substring(path.length-4,path.length);
if(img.readyState == "complete") {//图片加载完毕,获取图片的大小
fileSize = img.fileSize;
} else {
img.onreadystatechange=function(){
if(img.readyState=='complete'){
//当图片load完毕
fileSize = img.fileSize;
if(fileSize > fSize){
photo_flag = false;
$("#imgShow").attr("src","default.jpg");
return;
}
}
}
}
if (path) {
filePath = path;
}
}
//图片格式的判断
if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){
photo_flag = false;
$("#imgShow").attr("src","default.jpg");
return;
}
if(fileSize > fSize){
alert("图片太大了！");
photo_flag = false;
$("#imgShow").attr("src","default.jpg");
return;
}
if(photo_flag){
$("#imgShow").attr("src",filePath);
} else {
$("#imgShow").attr("src","default.jpg");
}
}