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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
javascript self对象使用详解
Oct 18 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python中反射用法实例
2015/03/27 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
学校岗位设置方案
2014/01/16 职场文书
旅游个人求职信范文
2014/01/30 职场文书
高中班主任评语大全
2014/04/25 职场文书
跳槽求职信范文
2014/05/26 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
主持人开场白台词
2015/05/29 职场文书
2015年高三教学工作总结
2015/07/21 职场文书