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

2024-12-02 21:01:24

本文为大家分享了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实现文件异步上传的实例讲解

效果图: 代码:(demo33.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label>
JS实现异步上传压缩图片

摘要: 使用iframe来处理异步上传图片,在现在这个时代来说,多多少少都有点落后了!单单就凭AJAX和JS就不能做到异步上传图片了吗? 感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先看调用页面: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewp
JQuery插件ajaxfileupload.js异步上传文件实例

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)

本文实例讲述了asp.net+jquery.form实现图片异步上传的方法.分享给大家供大家参考,具体如下: 首先我们需要做准备工作: jquery 点击此处本站下载. jquery.form.js 点击此处本站下载. 页面JqueryFormTest.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits=
asp.net+ajaxfileupload.js 实现文件异步上传代码分享

由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码代码如下: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("").css("color", "#535353"); $("#_userImgPath").val("");
JavaScript中三种异步上传文件方式

异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使
AjaxFileUpload.js实现异步上传文件功能

做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去- 等真正实现的时候才发现,根本行不通. 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件. AjaxFileUpload 这个插件的原理是创建隐藏的表单和iframe,然后用JS去提交,获得返回值. 语法 $.ajaxFileUpload([options]) 参数说明 url 上传处理程序地址. fileElementId 需要上传的文件域的ID,即的ID. secureur
JavaScript异步上传图片文件的实例代码

html: <form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /> </form> jquery: $("#addfile&
angularjs中$http异步上传Excel文件方法

1.文件上传框html代码如下 <form id="fileForm" enctype="multipart/form-data"> <button id="import_asset" type="button" ng-click="import_asset()">上传文件</button> <input id="file_asset" type
js异步上传多张图片插件的使用方法

本文为大家分享了js异步上传多张图片插件的使用方法,供大家参考,具体内容如下效果展示: 功能描述: 1.实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复上传,且不能移除使用方法: 界面顶部引入IMGUP.css,2.0版本以下的Jquery,页面底部引入IMGUP.js 界面中必须存在三个元素 1.图片选择: id必须是"div_imgfile",可以是任意元素,onclick事件触发选择对话框 2.图片预览容器:id必须是"div
利用jQuery异步上传文件的插件用法详解

现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post
vue.js异步上传文件前后端实现代码

本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&qu
js获取上传文件的绝对路径实现方法

在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen
Android上传多张图片的实例代码(RxJava异步分发)

学习RxJava有一段时间了,一直在考虑怎么使用,如何在项目中合理运用它.在android很多项目中,都会存在图片上传,下面我介绍如何用Rxjava异步上传多张图片. 一,用到的框架 compile 'top.zibin:Luban:1.0.9'//图片压缩 compile 'org.xutils:xutils:3.3.34'//网络请求 compile 'io.reactivex:rxandroid:1.1.0'//rxandroid compile 'io.reactivex:rxjava:
基于jQuery通过jQuery.form.js插件实现异步上传

本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.2.min.j
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数原理:ajaxfileupload是通过监听iframe的onload方
jQuery插件ajaxFileUpload异步上传文件

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能

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

相关推荐

随机推荐