1.改变页面文件上传默认的样式
<input type="text" size="20" id="upfile" style="border:1px dotted #ccc">
<input type="button" value="浏览" onclick="file.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="file" name="file" style="display:none" onchange="upfile.value=this.value">
2.校验文件类型为图片
/**
* @description 校验文件类型是否是图片文件
* @param file_id 图片文件选择对应的id
*/
function validateFileType(file_id) {
try {
var filePath = $("#"+file_id+"").val() ; //获取文件路径
var extStart = filePath.lastIndexOf(".") ;
var ext = filePath.substring(extStart, filePath.length).toUpperCase() ; //获取文件拓展名
//判断文件是否是图片文件
if(ext !=".JPG" && ext != ".PNG" && ext != ".BMP" && ext != ".DIF" && ext != ".JPEG"){
return false;
}
return true ;
} catch (e) {
// TODO: handle exception
alert('错误','校验图片类型异常','error') ;
}
}
3.获取文件大小
/**
* @description 获取图片文件大小
* @param file_id 图片文件选择对应的id
* @returns fileSize 图片文件大小（单位为byte）
*/
function getFileSize(file_id) {
try {
var fileInput = $("#"+file_id+"")[0] ;
var fileSize = fileInput.files[0].size ;
return fileSize ;
} catch (e) {
// TODO: handle exception
alert('错误','获取文件大小异常','error') ;
}
}
4.本地图片预览（于chrom浏览器而言）
chrome不能直接获取所上传图片的本地路径（实际获取的是一个虚拟路径），故不可以直接给img的 src 赋值来实现图片预览。通过FileReader来解决：
//查看图片
$("#showPicture").click(function(){
var reader = new FileReader();
reader.readAsDataURL($("#file")[0].files[0]);
reader.onload = function(evt){
var imgSrc = evt.target.result;
$("#picture").attr("src", imgSrc) ;
} ;
return false ;
}) ;
5.关于图片的等比例显示
/**
* @description 图片大小自适应
* @param maxWidth: 最宽限； maxHeight： 最高限； width： 图宽； height： 图高
* @returns param
*/
function pictureFit_auto( maxWidth, maxHeight, width, height ){
//图片返回信息
var param = {top:0, left:0, width:width, height:height};
if(width > height){ //宽 > 高
param.width = maxWidth-4 ;
param.height = (param.width/width)*height ;
param.left = 2;
param.top = Math.round((maxHeight - param.height) / 2);
}else{
param.height = maxHeight-4 ;
param.width = (param.height/height)*width
param.left = Math.round((maxWidth - param.width) / 2);
param.top = 2;
}
return param;
}