首页
所有分类
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 相关文章推荐
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
基于node实现websocket协议
Apr 25 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
微信小程序登录换取token的教程
May 31 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
scss(1) sched(1) 监听(2) watch(1) 无限迭代(1) okenizer(1) 分词器(1) re模块(2) while(1) 事件调度器(1)
You might like
php 无法载入mysql扩展
2010/03/12 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python中装饰器高级用法详解
2017/12/25 Python
Django数据库表反向生成实例解析
2018/02/06 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
75条笑死人的知乎神回复，用60行代码就爬完了
2019/05/06 Python
Pyqt5自适应布局实例
2019/12/13 Python
python将音频进行变速的操作方法
2020/04/08 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python 高阶函数简单介绍
2021/02/19 Python
北美主要的汽车零部件零售商：AutoShack.com
2019/02/23 全球购物
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
教师党员承诺书
2014/03/25 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
公司奖励通知
2015/04/21 职场文书
新员工辞职信范文
2015/05/12 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android