多图上传，限制上传图片个数（增删）及限制上传图片的大小

html代码

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;

}

//注意

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

多图上传，限制上传图片个数（增删）及限制上传图片的大小相关推荐

微信公众号开发JSSDK上传图片（多图上传）
前面做了微信公众号开发,涉及到了图片上传功能.微信jssdk-api带有一套完整的调用选择本地图片上传的功能,很多朋友在问到多图上传的问题.在这里分享一下自己的做法,其实并不是自己的做法,就是完全按照 ...
vant weapp 多选上传图片_微信小程序结合vant weapp ui实现多图上传组件
微信小程序多图上传最近在写小程序的商品上传,为方便需要使用多张图片的上传的功能.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求创建了一个组件希望能够帮到大家效果图创建一个图片上传的p ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
多图上传以及多图排序的方法及流程详解
多图上传以及多图排序的方法及流程详解 ps:本人亲测,阿里云2核4G5M的服务器性价比很高,新用户一块多一天,老用户三块多一天,最高可以买三年,感兴趣的可以戳一下:阿里云折扣服务器所用插件包打包下载 ...
Bootstrap+PHP实现多图上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...
php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
Bootstrap+PHP fileinput 实现多图上传这是ajax上传，只能单张单张图片地上传
插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231 下面是根据下载的demo进行补充: 使用bootstrap界面美观,可预览,可拖拽上传,可配合aja ...
小程序 | 微信小程序多图上传（点击上传、可修改删除与放大回显）
微信小程序实现多图上传需求文章目录基本图片处理 index.js(选择上传.点击回显.修改删除) index.js(实现循环多图上传数据库) 公共组件utils utils/common.util ...
续《用最简单的例子实现jQuery图片即时上传》之多图上传实现
本用例主要含两个文件(index.html.submit_form_process.php),一个文件夹(files/).特别的,files中含一个报错图片error.jpg,jquery库引用了外链 ...
九宫格拼图android代码,Android 多图上传后将图片进行九宫格展示的实例代码
不多说上代码 public abstract class NineGridAdapter { protected Context context; protected List list; publi ...

多图上传，限制上传图片个数（增删）及限制上传图片的大小

多图上传，限制上传图片个数（增删）及限制上传图片的大小相关推荐

最新文章

热门文章