上传图片实例

// 图片上传功能
var defaults = {
???fileType : ["jpg","png","gif","jpeg"]
};
var file_btn=el.find(".file");
var files_arr=[];
var fileList;
//$(".z_file")为file父级
$(".z_file").delegate(".file","change",function(){
???var idFile = $(this).attr("id");
???var file = document.getElementById(idFile);
???var imgContainer = $(this).parents(".imgbox"); //存放图片的父亲元素
???fileList = file.files; //获取的图片文件
???var input = $(this).parent();//文本框的父亲元素
???var imgArr = [];
???//遍历得到的图片文件
???var numUp = imgContainer.find(".up-section").length;
???var totalNum = numUp + fileList.length; ?//总的数量
???if(fileList.length > 3 || totalNum > 3 ){
???????alert("上传图片数目不可以超过3个，请重新选择");
???????return false; ?//一次选择上传超过3个 或者是已经上传和这次上传的到的总数也不可以超过3个
???}
???else if(numUp < 3){
???????fileList = validateUp(fileList);
???????preview();
???}
???numUp = imgContainer.find(".up-section").length;
???if(numUp >= 3){
???????$(this).parent().hide();
???}
???for(var i=0;i<fileList.length;i++){
???????????files_arr.unshift(fileList[i]);
???????????//兼容性处理
???????????if(file.outerHTML){
???????????????file.outerHTML=file.outerHTML;
???????????}else{
???????????????file_btn.val("");
???????????}
???????????$(".file_judge").val("验证通过");
???}
});

$(".imgbox").delegate(".close-upimg","click",function(event){
???event.preventDefault();
???event.stopPropagation();
???var delParent = $(this).parent();
???var numUp = delParent.siblings().length;
???if(numUp < 4){
???????delParent.parent().find(".z_file").show();
???}
???var del_num=delParent.index();
???delParent.remove();
???files_arr.splice(del_num,1);
???if(files_arr.length==0){
???????$(".file_judge").val("");
???}
});

function preview(){
???for(var i = 0;i<fileList.length;i++){
???????var imgUrl = window.URL.createObjectURL(fileList[i]);
???????imgArr.push(imgUrl);
???????var $section = $("<div class=‘up-section fl loading‘>");
???????imgContainer.prepend($section);
???????var $span = $("<span class=‘up-span‘>");
???????$span.appendTo($section);
???????var $img0 = $("<img class=‘close-upimg‘>");
???????$img0.attr("src","/r-src/i/page/new_saas/fail.png").appendTo($section);
???????var $img = $("<img class=‘up-img up-opcity‘>");
???????$img.attr("src",imgArr[i]);
???????$img.appendTo($section);
???}
}

function validateUp(files){
???var arrFiles = [];//替换的文件数组
???for(var i = 0, file; file = files[i]; i++){
???????//获取文件上传的后缀名
???????var newStr = file.name.split("").reverse().join("");
???????if(newStr.split(".")[0] != null){
???????????var type = newStr.split(".")[0].split("").reverse().join("");
???????????if(jQuery.inArray(type, defaults.fileType) > -1){
???????????????// 类型符合，可以上传
???????????????arrFiles.push(file);
???????????}else{
???????????????alert(‘您这个"‘+ file.name +‘"上传类型不符合‘);
???????????}
???????}else{
???????????alert(‘您这个"‘+ file.name +‘"没有类型, 无法识别‘);
???????}
???}
???return arrFiles;
}
// 图片上传end