首页
所有分类
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 相关文章推荐
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
layui表格实现代码
May 20 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
感言(394) 教学反思(909) 检讨书(456) 事迹材料(636) 广播稿(323) 辞职信(98) 介绍信(57) 邀请函(127) 道歉信(39) 表扬信(62)
You might like
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php实现等比例压缩图片
2018/07/26 PHP
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
switchery按钮的使用方法
2017/12/18 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python实现点云投影到平面显示
2020/01/18 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
办公文员的工作岗位职责
2013/11/12 职场文书
领导班子对照检查材料
2014/09/22 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
化验室安全管理制度
2015/08/06 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
vue实现Toast组件轻提示
2022/04/10 Vue.js
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL