上传图片实例

// 图片上传功能
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

只实现了上传预览功能 

html：

<div class="z_file fl">
                    <img src="/r-src/i/page/new_saas/bankimg.jpg" alt="" class="bankpic">
                    <input class="file" multiple="multiple" value="" accept="image/jpg,image/jpeg,image/png,image/gif" type="file" name="refund[refund_file][]" id="refund_refund_file">
                    <input type="file" name="refund_receipt_images[]" id="refund_receipt_images_" class="files" style="visibility:hidden">
                    <input class="file_judge" vaild-required="true" valid-required-msg="验证不通过" value="" type="text" id="file_judge" style="visibility:hidden">
</div>

上传到服务器交互采用from提交 提交图片是

files_arr数组



由于提交from表单默认识别type=file的input（姑且给class:file）,file上传一次 值会被替换，无法取得全部上传图片的信息 所以将值保存在files_arr中，
再将files_arr 赋值给另一个type为file的标签
 var _submit_data = new FormData(this);获取整个form的数据；

for(var i=0; i<files_arr.length; i++){
_submit_data.append('refund_receipt_images[]', files_arr[i]);
}

将files_arr循环赋值给

另一个type为file的标签