对于很多新手来说，实现上传图片并且预览功能，都会感到不知所可，然后开始在网站搜索各种各样的图片上传预览插件，但是有的时候我们只是想简单的实现判断格式，以及预览的功能，使用插件的话，会使得项目的资源空间很大，代码臃肿。
下面，我就整理一个小方法实现判断上传格式，大小，以及预览图片的功能，大大的减少了代码量。
思路：点击上传按钮(id=“PhotoFile”)，选择文件，触发改变事件，调用base64data函数，调用完毕后，执行回调函数，把返回的base64数据分别赋值到img标签的src 和 隐藏的input 的value 上，这样就实现了图片的预览，并且把隐藏的inout 里面的 base64数据提交到后端就可以了。
html:
<div id="IDPhoto">
<input id="PhotoFile" name="" type="file">
<input hidden id="PhotoData" name="" type="text">
<img class="PhotoImg" src="../images/IDPhotoBG.jpg">
</div>
方法：
$(document).ready(function(){
$('body').on('change','#PhotoFile',function(event) {
base64data("PhotoFile",function(data){
$('#PhotoFile').siblings('.PhotoImg').attr('src',data);
$('#PhotoFile').siblings('#PhotoData').val(data);
});
});
});
//图片转换base64数据
function base64data(fileID,clackFn){ //fileID:选取文件的ID,clackFn:回调函数,size：限制的大小（单位M）
var size = arguments[2]?arguments[2]:3;
var file = document.getElementById(fileID);
var arr = ["gif","jpeg","jpg","png"];
var size = 1024*1024*parseInt(size);
var fileContentType = file.value.match(/^(.*)(.)(.{1,8})$/)[3]; //文件类型
if (file.files && file.files[0]){
var f_size = file.files[0].size; //文件大小
if(arr.join(',').toLowerCase().indexOf(fileContentType.toLowerCase()) != -1){ //检索上传的文件类型是不是在允许的arr数组之内
if(f_size > size){
alert("图片太大，请重新上传",'确定');
file.value="";
return false;
}else {
var reader = new FileReader();
reader.onload = function(evt){
clackFn(evt.target.result);
}
reader.readAsDataURL(file.files[0]);
}
} else {
alert("文件格式不匹配，请重新上传",'确定');
}
} else { //兼容IE
alert('请切到高级浏览器,再进行图片上传','确定');
}
}