使用 imgUp.js和setImagePreviews多图上传

使用 imgUp.js和setImagePreviews多图上传_第1张图片
image.png

html






上传图片插件







作品图片:最多可以上传5张图片,马上上传

js


$(function(){
    var delParent;
    var defaults = {
        fileType         : ["jpg","png","bmp","jpeg"],   // 上传文件的类型
        fileSize         : 1024 * 1024 * 10                  // 上传文件的大小 10M
    };
        /*点击图片的文本框*/
    $(".file").change(function(){    
        var idFile = $(this).attr("id");
        var file = document.getElementById(idFile);
        var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
        var fileList = file.files; //获取的图片文件
        var input = $(this).parent();//文本框的父亲元素
        var imgArr = [];
        //遍历得到的图片文件
        var numUp = imgContainer.find(".up-section").length;
        var totalNum = numUp + fileList.length;  //总的数量
        if(fileList.length > 5 || totalNum > 5 ){
            alert("上传图片数目不可以超过5个,请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
        }
        else if(numUp < 5){
            fileList = validateUp(fileList);
            for(var i = 0;i");
                 imgContainer.prepend($section);
             var $span = $("");
                 $span.appendTo($section);
            
             var $img0 = $("").on("click",function(event){
                    event.preventDefault();
                    event.stopPropagation();
                    $(".works-mask").show();
                    delParent = $(this).parent();
                });   
                $img0.attr("src","img/a7.png").appendTo($section);
             var $img = $("");
                 $img.attr("src",imgArr[i]);
                 $img.appendTo($section);
             var $p = $("

"); $p.html(fileList[i].name).appendTo($section); var $input = $(""); $input.appendTo($section); var $input2 = $(""); $input2.appendTo($section); } } setTimeout(function(){ $(".up-section").removeClass("loading"); $(".up-img").removeClass("up-opcity"); },450); numUp = imgContainer.find(".up-section").length; if(numUp >= 5){ $(this).parent().hide(); } }); $(".z_photo").delegate(".close-upimg","click",function(){ $(".works-mask").show(); delParent = $(this).parent(); }); $(".wsdel-ok").click(function(){ $(".works-mask").hide(); var numUp = delParent.siblings().length; if(numUp < 6){ delParent.parent().find(".z_file").show(); } delParent.remove(); }); $(".wsdel-no").click(function(){ $(".works-mask").hide(); }); 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(""); console.log(type+"===type==="); if(jQuery.inArray(type, defaults.fileType) > -1){ // 类型符合,可以上传 if (file.size >= defaults.fileSize) { alert(file.size); alert('您这个"'+ file.name +'"文件大小过大'); } else { // 在这里需要判断当前所有文件中 arrFiles.push(file); } }else{ alert('您这个"'+ file.name +'"上传类型不符合'); } }else{ alert('您这个"'+ file.name +'"没有类型, 无法识别'); } } return arrFiles; } })

缺点 : 图片 数量 和HTML格式不能替换修改

使用 imgUp.js和setImagePreviews多图上传_第2张图片
image.png

2 setImagePreviews









By:德马





 



原文地址 1 imgUp.js http://www.jq22.com/jquery-info13194 2 setImagePreviews http://www.jq22.com/jquery-info833

你可能感兴趣的:(使用 imgUp.js和setImagePreviews多图上传)