在做后台管理的时候,遇到这样一个需求,实现多张图片上传并按选中的顺序显示。PS:图片上传的时候是即时上传到服务器,后台返回图片在服务器上的地址,在最后点击提交按钮的时候,把地址传给后端写入数据库即可。

1、input标签,accept='image/*'上传图片格式只要是image就行,multiple实现文件可以多选

<input type="file" id="add-pic2" accept="image/*" multiple>

2、监听选中事件

       $("#add-pic2").on("change", function () {
// if (pic_banner.length >= 10 || pic_banner.length + this.files.length >= 10) {
// return swal("最多10张图片");
// }
//递归上传
var files = this.files
files.length && diguiAjax(this.files, 0, this.files.length, function (res, i) {
var obj = {
pic: res.data.list
};
pic_banner.push(obj);
var bannerHtml = "";
bannerHtml = `<div class="pic-wrap pull-left"><span class="closeX" data-index="${res.data.list}">x</span><img src="${res.data.list}" alt=""></div>`;
$(".banner-wrap").append(bannerHtml);
if (i >= files.length) {
document.getElementById('add-pic2').value = null
}
})
});
//递归上传banner图片
function diguiAjax(files, j, length, cb) {
var ele = files[j];
//压缩图片 lrz压缩图片
lrz(ele).then(function (rst) { $post({
url: api_www + "/upload_img/uploadImg",
data: {
token: token,
img: rst.base64,
is: 1
},
callback: function (res) {
if (res.code == 1) {
cb(res, j)
if (++j < length) {
diguiAjax(files, j, length, cb)
}
}
}
});
})
}

附:如果选择图片先保存在本地,不上传,点击提交按钮统一上传,核心代码如下,

imgObjPreview1是要显示图片的div
imgObjPreview1.src = window.URL.createObjectURL(this.files[0]);

jquery实现多图片上传的更多相关文章

  1. Jquery插件-Html5图片上传并裁剪

    /** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:f ...

  2. JQuery插件:图片上传本地预览插件,改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  3. jquery实现本地图片上传预览和限流处理

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. jquery.cropper 裁剪图片上传

    https://github.com/fengyuanchen/cropper 1.必要的文件引用: <script src="/path/to/jquery.js"> ...

  5. 【原创】MVC项目中使用JQuery的upladify图片上传插件相关问题的解决方案

    一. 关于Uploadify Uploadify是一个jQuery插件,你可以很容易的为你的网站添加多个文件上传功能.有两个不同的版本(HTML5和Flash)允许你灵活选择为您的网站和回退方法正确实 ...

  6. JQuery的ajaxFileUpload图片上传初试

    本案例主要说讲使用ajaxFileUpload实现图片的异步上传. 1.html代码部分 这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxF ...

  7. jQuery File Upload 图片上传解决方案兼容IE6+

    1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...

  8. 使用ajax,结合jquery,php实现图片上传预览功能

    大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...

  9. jquery插件fileupload图片上传(前端如何处理)

    1.页面首先引入jquery,版本不要低于1.6 <script src="../js/jquery.min.js"></script>2.其次页面引入对应 ...

  10. Java+jquery实现裁剪图片上传到服务器

    大体分两步: 1.利用jquery裁剪图片,把裁剪到的几个点传入后端 2.利用前端传入的几个点,来裁剪图片 首先,用到一个jquery的插件 imgAreaSelect 实例及插件下载地址:http: ...

随机推荐

  1. 前端必备ps切图方法,拿下ui设计师就靠它了。

    方法1(图层切图): 点击源psd文件中需要的图片,右击鼠标选择导出为png,保存即可.图片与文字在两个或两个以上图层上的时候,按住Control选择多个图层,右键选择合并图层(快捷键:Control ...

  2. vulnhub靶场之HACKER KID: 1.0.1

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Hacker kid: 1.0.1,下载地址:https://download.vulnhub.com/hackerkid/Hacker_Kid ...

  3. [WPF]Win10便签软件

    项目地址 Github:项目地址 软件截图 项目中用到的技术和问题 [WPF]限制程序单例运行 [WPF]创建系统栏小图标 [WPF]程序随系统自启动 [WPF]xml序列化以及反序列化数据 [WPF ...

  4. [LeetCode]226.翻转二叉树——递归遍历交换孩子

    题目   翻转一棵二叉树. 4 / \ 2 7 / \ / \ 1 3 6 9 //转换为: 4 / \ 7 2 / \ / \ 9 6 3 1 代码 TreeNode* invertTree(Tre ...

  5. 模板层之标签、自定义模板语法、母版(模版)的继承与导入、模型层前期准备知识点、ORM常用关键字

    今日内容概要 模板层之标签 if判断 {% if 条件1 %} #条件1成立 <p>Hello!</p> #执行 {% elif 条件2 %} #条件1不成立 条件2成立 &l ...

  6. 对 Pulsar 集群的压测与优化

    前言 这段时间在做 MQ(Pulsar)相关的治理工作,其中一个部分内容关于消息队列的升级,比如: 一键创建一个测试集群. 运行一批测试用例,覆盖我们线上使用到的功能,并输出测试报告. 模拟压测,输出 ...

  7. (14)go-micro微服务服务层Handle开发

    目录 一 Handle层开发功能说明 需要完成的服务开发功能: 从哪找需要开发的功能 二 代码编写 三 最后 一 Handle层开发功能说明 需要完成的服务开发功能: 登录 注册 查询用户信息 修改信 ...

  8. centos搭建neo4j环境(含java)2021_12

    限centos neo4j与java下载: 链接:https://pan.baidu.com/s/1ei15dROGy3OwJfbislxH7g 提取码:8B3A   下载后 1.在linux中建立文 ...

  9. day10-AOP-03

    AOP-03 7.AOP-切入表达式 7.1切入表达式的具体使用 1.切入表达式的作用: 通过表达式的方式定义一个或多个具体的连接点. 2.语法细节: (1)切入表达式的语法格式: execution ...

  10. Python 装饰器原理

    装饰器是 Python 编程中常用的一个功能,可以将通用的逻辑抽象成装饰器,通过装饰器语法应用到不同的目标上,达到增强或修改目标逻辑的目的. 先来看一个简单的例子 # 打印耗时的装饰器 def log ...