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>

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

Javascript 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
You might like
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
使用Python神器对付12306变态验证码
2016/01/05 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
Python异常处理操作实例详解
2018/08/28 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python画双y轴图像的示例代码
2019/07/07 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
女大学生毕业找工作的自我评价
2013/10/03 职场文书
电大学习个人自我评价范文
2013/10/04 职场文书
五一口号
2014/06/19 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
高中政治教学反思
2016/02/23 职场文书