html代码

<div class="media_con Indus_license_up">
                     <ul class="up_ul">
                         <!--<li>
                             <img src="ajaxImageUpload/images/upload.png">
                         </li>-->
                         <li id="addFile">
                             <div class="keyWebload">
                                 <img  src="img/up_media.png">
                                 <input type="file"   class="webuploader" multiple="multiple" accept="" value=""  name="file1">
                                 
                             </div>
                         
                         </li>
                         
                     </ul>   
                        
   </div>

js 代码

 //上传图片选择文件改变后刷新预览图
        $(".Indus_license_up .webuploader").change(function (e) {      
            fileItem = e.target.files || e.dataTransfer.files;
            var initlen = $(".up_ul li").length -1;//原有的图片数目
            var len = fileItem.length;
            if(len + initlen >= 8){
                len = 8 - initlen;
                $("#addFile").css("visibility","hidden");
            }
            if(len == undefined || len == 0){
                return false;
            }
            for(var i=0;i<len;i++){
                fileList.push(fileItem[i]); //将传入的图片push到空对象中      
                reads(fileItem[i]); 
                console.log(fileList);
            }
        })

 /**
      * 删除图片
      * 先后天删除，成功之后前台删除
      */
     var DeleFile=[];
     var deleteName;//保存删除的图片将其传给后台处理
     $(".Indus_license_up .up_ul").on("click","a", function(){
         var add = false;
         if($(".up_ul li").length >= 8){
            add = true;
         }
         var srcPath =$(this).next("img").attr("src");
         var namePath=$(this).next("img").attr("name");
         if(srcPath.split("http").length == 1){
            //base64图片，还没有上传到后台,要对应删除list里面文件
            $(this).parent().remove();
            DeleFile.push(namePath);
            console.log(DeleFile);
            deleteName=DeleFile.join(",");
            console.log(deleteName);
            if(add){
                $("#addFile").css("display","none");
            }
            return false;
         }
         var _this = this;
         $.ajax({
                type: "post",
                url: "",
                data:{
                    userId:Islogin,
                    imagePath:srcPath
                },
                success: function(res) {
                    console.log(res);
                    if(res.code==1){
                        $(_this).parent().remove();
                        if(add){
                            $("#addFile").css("display","none");
                        }
                        return false;
                    }
                },
                error: function(res) {
                    console.log(res);
                    return false;
                }
            });
        
     });
        

    * 生成预览图
    function reads(file) {
            //定义一个文件阅读器   
            var FileName=file.name;
            console.log(FileName);
            var reader = new FileReader();
            reader.readAsDataURL(file);
           //文件装载后将其显示在图片预览里
            reader.onload = function () {
                console.log(fileList);
                var oli=$("<li></li>");            
                   var img ='<a><img src="img/dele.png"></a><img src="'+reader.result+'" name="'+FileName+'"/><div>';                    
                oli.prepend(img);
                $(".up_ul").prepend(oli);                
            }           
       }

限制上传图片的大小不能超过2M

 if(fileList[i].size>1024*1024*2){
                  alert("您上传的图片中含有超过2M的图片,请重新选择");
                  location.reload();
                  return;

}

//注意

上传图片时需要在表单里进行上传，独立的不能上传