首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js异步上传多张图片插件的使用方法

Posted in Javascript onOctober 22, 2018

本文为大家分享了js异步上传多张图片插件的使用方法，供大家参考，具体内容如下

效果展示：

js异步上传多张图片插件的使用方法

功能描述：

1.实现图片预览，预览图片移除，任意张数异步上传，上传进度条指示，已选中且上传的图片不会重复上传，且不能移除

使用方法：

界面顶部引入IMGUP.css，2.0版本以下的Jquery，页面底部引入IMGUP.js
界面中必须存在三个元素

1、图片选择： id必须是“div_imgfile”，可以是任意元素，onclick事件触发选择对话框
2、图片预览容器：id必须是“div_imglook”的div，里面包含一个清除浮动的div
3、确定上传按钮：id必须是“btn_ImgUpStart”，可以是任意元素，onclick事件开始上传全部选中图片        

样式可随意更改，js文件顶部有三个变量，可以分别设置单张图片大小限制，单位MB，最多选中图片张数，异步提交服务端位置

ajax中回调函数可以修改提示信息样式，查找“alert”也可。

<body>
  <!--图片选择对话框-->
  <div id="div_imgfile">选择图片</div>
 
  <!--图片预览容器-->
  <div id="div_imglook">
    <div style="clear: both;"></div>
  </div>
 
  <!--确定上传按钮-->
  <input type="button" value="确定上传" id="btn_ImgUpStart" />
</body>
 
<style>
/*选择图片框样式*/
#div_imgfile {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  font-family: 微软雅黑;
  font-size: 16px;
  box-sizing: border-box;
  border: 2px solid #808080;
  cursor: pointer;
}
  /*选择图片框鼠标移入移出效果*/
  #div_imgfile:hover {
    background-color: #d1cfcf;
  }
 
.imgfile {
  display: none;
}
 
/*这里是图片预览容器样式*/
#div_imglook {
  margin-top: 20px;
  background-color: #FFEFD5;
}
 
/*单个图片预览模块样式*/
.lookimg {
  width: 130px;
  height: 130px;
  box-sizing: border-box;
  border: 1px solid #808080;
  float: left;
  margin-right: 10px;
  position: relative;
}
 
  .lookimg img {
    width: 100%;
    height: 100%;
  }
 
/*删除按钮样式*/
.lookimg_delBtn {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #808080;
  opacity: 0.8;
  color: white;
  font-size: 16px;
  font-family: 微软雅黑;
  display: none;
  cursor: pointer;
}
 
  /*删除按钮移入移出效果*/
  .lookimg_delBtn:hover {
    opacity: 1;
  }
 
/*上传进度条样式*/
.lookimg_progress {
  position: absolute;
  bottom: 15px;
  left: 0px;
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  box-sizing: border-box;
  border: 1px solid black;
  display: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}
 
  .lookimg_progress div {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 0px;
    background-color: #e9cc2e;
  }
 
 
/*确定上传按钮样式*/
#btn_ImgUpStart {
  width: 130px;
  height: 40px;
  margin-top: 30px;
}
</style>
 
<script>
var IMG_LENGTH = 1;//图片最大1MB
var IMG_MAXCOUNT = 5;//最多选中图片张数
var IMG_AJAXPATH = "ajax/ImgUpLoad.ashx";//异步传输服务端位置
 
 
var UP_IMGCOUNT = 0;//上传图片张数记录
//打开文件选择对话框
$("#div_imgfile").click(function () {
  if ($(".lookimg").length >= IMG_MAXCOUNT) {
    alert("一次最多上传" + IMG_MAXCOUNT + "张图片");
    return;
  }
 
  var _CRE_FILE = document.createElement("input");
  if ($(".imgfile").length <= $(".lookimg").length) {//个数不足则新创建对象
    _CRE_FILE.setAttribute("type", "file");
    _CRE_FILE.setAttribute("class", "imgfile");
    _CRE_FILE.setAttribute("accept", ".png,.jpg,.jpeg");
    _CRE_FILE.setAttribute("num", UP_IMGCOUNT);//记录此对象对应的编号
    $("#div_imgfile").after(_CRE_FILE);
  }
  else { //否则获取最后未使用对象
    _CRE_FILE = $(".imgfile").eq(0).get(0);
  }
  return $(_CRE_FILE).click();//打开对象选择框
});
 
//创建预览图，在动态创建的file元素onchange事件中处理
$(".imgfile").live("change", function () {
  if ($(this).val().length > 0) {//判断是否有选中图片
 
    //判断图片格式是否正确
    var FORMAT = $(this).val().substr($(this).val().length - 3, 3);
    if (FORMAT != "png" && FORMAT != "jpg" && FORMAT != "peg") {
      alert("文件格式不正确！！！");
      return;
    }
 
    //判断图片是否过大，当前设置1MB
    var file = this.files[0];//获取file文件对象
    if (file.size > (IMG_LENGTH * 1024 * 1024)) {
      alert("图片大小不能超过" + IMG_LENGTH + "MB");
      $(this).val("");
      return;
    }
    //创建预览外层
    var _prevdiv = document.createElement("div");
    _prevdiv.setAttribute("class", "lookimg");
    //创建内层img对象
    var preview = document.createElement("img");
    $(_prevdiv).append(preview);
    //创建删除按钮
    var IMG_DELBTN = document.createElement("div");
    IMG_DELBTN.setAttribute("class", "lookimg_delBtn");
    IMG_DELBTN.innerHTML = "移除";
    $(_prevdiv).append(IMG_DELBTN);
    //创建进度条
    var IMG_PROGRESS = document.createElement("div");
    IMG_PROGRESS.setAttribute("class", "lookimg_progress");
    $(IMG_PROGRESS).append(document.createElement("div"));
    $(_prevdiv).append(IMG_PROGRESS);
    //记录此对象对应编号
    _prevdiv.setAttribute("num", $(this).attr("num"));
    //对象注入界面
    $("#div_imglook").children("div:last").before(_prevdiv);
    UP_IMGCOUNT++;//编号增长防重复
 
    //预览功能 start
    var reader = new FileReader();//创建读取对象
    reader.onloadend = function () {
      preview.src = reader.result;//读取加载，将图片编码绑定到元素
    }
    if (file) {//如果对象正确
      reader.readAsDataURL(file);//获取图片编码
    } else {
      preview.src = "";//返回空值
    }
    //预览功能 end
  }
});
 
//删除选中图片
$(".lookimg_delBtn").live("click", function () {
  $(".imgfile[num=" + $(this).parent().attr("num") + "]").remove();//移除图片file
  $(this).parent().remove();//移除图片显示
});
 
//删除按钮移入移出效果
$(".lookimg").live("mouseover", function () {
  if ($(this).attr("ISUP") != "1")
    $(this).children(".lookimg_delBtn").eq(0).css("display", "block");;
});
$(".lookimg").live("mouseout", function () {
  $(this).children(".lookimg_delBtn").eq(0).css("display", "none");;
});
 
//确定上传按钮
$("#btn_ImgUpStart").click(function () {
 
  if ($(".lookimg").length <= 0) {
    alert("还未选择需要上传的图片");
    return;
  }
 
  //全部图片上传完毕限制
  if ($(".lookimg[ISUP=1]").length == $(".lookimg").length) {
    alert("图片已全部上传完毕！");
    return;
  }
 
  //循环所有已存在的图片对象，准备上传
  for (var i = 0; i < $(".lookimg").length; i++) {
    var NOWLOOK = $(".lookimg").eq(i);//当前操作的图片预览对象
    NOWLOOK.index = i;
    //如果当前图片已经上传，则不再重复上传
    if (NOWLOOK.attr("ISUP") == "1")
      continue;
 
    //上传图片准备
    var IMG_BASE = NOWLOOK.children("img").eq(0).attr("src"); //要上传的图片的base64编码
    var IMG_IND = NOWLOOK.attr("num");
    var IMG_ROUTE = $(".imgfile[num=" + IMG_IND + "]").eq(0).val();//获取上传图片路径，为获取图片类型使用
    var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位，判断图片类型
    var IMG_FOMATE = "jpeg"; //图片类型***
    if (IMG_ENDFOUR.trim() == ".jpg")
      IMG_FOMATE = "jpg";
    else if (IMG_ENDFOUR.trim() == ".png")
      IMG_FOMATE = "png";
 
    //图片正式开始上传
    $.ajax({
      type: "POST",
      url: IMG_AJAXPATH,
      data: { 'imgBase': IMG_BASE, 'imgFormat': IMG_FOMATE, 'lookIndex': NOWLOOK.index },//图片base64编码，图片格式（当前仅支持jpg,png,jpeg三种），图片对象索引
      dataType: "json",
      success: function (data) {
        if (data.isok == "1") {
          //图片上传成功回调
          var UPTIME = Math.ceil(Math.random() * 400) + 400;//生成一个400-800的随机数，假设进图条加载时间不一致
          $(".lookimg").eq([data.ind]).attr("ISUP", "1");//记录此图片已经上传
          $(".lookimg").eq([data.ind]).children(".lookimg_progress").eq(0).children("div").eq(0).animate({ width: "100%" }, UPTIME, function () {
            $(this).css("background-color", "#00FF00").text('上传成功');
          });
        }
        else {//图片未上传成功回调
          $(".lookimg")[data.ind].children(".lookimg_progress").eq(0).children("div").eq(0).css("width", "100%").css("background-color", "red").text("上传失败");
        }
      },
      error: function (err) {
        //服务器连接失败报错处理
        alert("error");
        //alert(err.responseText);
      },
      beforeSend: function () {
        //图片上传之前执行的操作，当前为进度条显示
        NOWLOOK.children(".lookimg_progress").eq(0).css("display", "block");//进度条显示
      }
    });
  }
});
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js异步上传多张图片插件的使用方法

- Author -

JasonSon__

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
js三种排序算法分享
Aug 16 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
ECMAScript5中的对象存取器属性：getter和setter介绍
Dec 08 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
Ajax是什么？Ajax高级用法之Axios技术
Apr 21 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
Vue slot用法(小结)
Oct 22 #Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 #Javascript
模型保存加载(1) Pyecharts(7) 图像处理(1) PyTorch(1) 人工智能(2) 井字棋(1) FuzzyWuzzy(1) 模糊匹配(1) moviepy(1) opencv(7)
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
详解python datetime模块
2020/08/17 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Marks & Spencer爱尔兰：英国马莎百货
2016/04/20 全球购物
斐乐美国官方网站：FILA美国
2019/03/01 全球购物
巴西美妆购物网站：Kutiz Beauté
2019/03/13 全球购物
平面设计自荐信
2013/10/07 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
暑期培训心得体会
2014/09/02 职场文书
同学聚会通知短信
2015/04/20 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
2019年妇科护士的自我鉴定（3篇）
2019/09/26 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Golang标准库syscall详解（什么是系统调用）
2021/05/25 Golang
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android