使用jquery实现多张图片的上传

最新推荐文章于 2023-10-06 20:32:57 发布
最新推荐文章于 2023-10-06 20:32:57 发布
阅读量1w 收藏 13
点赞数 4
分类专栏： 前端技术 文章标签： jquery上传多张图片 jquery 图片 遍历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37481512/article/details/78717371
版权

最近做项目要用到上传多张图片的功能，自己用jquery写了一个图片上传，期间遇到一个麻烦，就是给后台传的时候总是会覆盖前面一张的图片，只能传过去一张图片，最后解决的办法就是创建一个空对象用来保存传入的图片，然后遍历图片，最后将图片push到这个空对象中，实现多张图片的上传，现在将代码展示出来，提供大家参考：

html代码：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>申请加盟</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/franchiseeApplication.css"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
缘飞梦
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
如何实现上传多个图片并依次展示_jQuery实现多张图片上传预览（不经过后端处理）...
weixin_35620886的博客
01-17 847
效果图：图(1)图(2)代码如下：jQuery图片上传预览(不经过后端处理) jQuery.fn.extend({uploadPreview: function(opts) {var _self = this,_this = $(this);opts = jQuery.extend({Img: "ImgPr",Width: 100,Height: 100,ImgType: ["gif", "jp...
jquery实现图片上传(包含多图上传)
xioxi
07-19 1300
*.html <div class="aui-list-item-input"> <input type="file" name="files" placeholder="请上传头像" id="files" onchange="uploadFile"> </div> *.js function uploadFile(){ var myform = new FormData(); myform.append('files',$('#file
基于jQuery实现的图片上传
一路走一路看，一边哭一边笑
03-30 1967
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma......
jquery上传图片单图多图
最新发布
qq_61869009的博客
10-06 1605
主要用到的就是input里面的file，上传完成拿到文件流发给后端后端返回图片路径，让后前端展示出来。本篇文章包含单图上传和多图上传。最后有代码复制后更换上传接口，即可使用
jquery实现图片上传
qq_43209524的博客
02-22 5232
<style> .imageDiv { display:inline-block; width:100px; height:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:1px dashed darkgray; background:#f8f8f8; position:relative; overflow...
JQuery实现 图片上传
奋斗的小杨i的博客
07-02 774
核心代码 <input type="hidden" name="avatar" id="avatar"> <img src="" alt="" id="avatarShow" width="200px" height="200px"> <span>上传头像</span> <input type="file" name="file" id="file" onchange="uploadImg();" > <script> .
jquery上传图片
weixin_35756624的博客
01-10 499
jQuery 是一种常用的 JavaScript 库，它提供了很多方便的 DOM 操作和事件处理函数。在 jQuery 中，你可以使用 $.ajax() 或 $.post() 等方法来上传图片。 具体的实现方式如下： 首先，在 HTML 中添加一个文件上传输入框，例如：<inputtype="file" id="fileInput" name="fileInput"> ...
jQuery实现上传图片的预览
一步一脚印的博客
08-18 750
在html中： <form id="certForm" method="post" enctype="multipart/form-data" role="form" > <div class="form-group"> <input type="file" > <img src="#" style="display: none"> </div> </fo..
使用jquery上传多个图像
weixin_45119097的博客
11-19 964
使用jquery上传多个图像
jQuery多张图片批量上传插件
06-24
而“jQuery多张图片批量上传插件”是针对网页上图片上传功能的一种优化解决方案，尤其适合需要用户上传多张图片的场景。这款插件允许用户一次选择多张图片，然后通过异步方式批量上传，提高了用户体验，同时也减轻了...
jQuery实现多张图片上传预览（不经过后端处理）
10-19
本篇文章主要介绍了jQuery实现多张图片上传预览（不经过后端处理）的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
jquery实现多次上传同一张图片
10-20
本文将深入讲解如何利用JQuery实现在一个Web应用中多次上传同一张图片。 首先，理解基本的HTML结构。通常，一个文件输入（`<input type="file">`）元素用于让用户选择本地的文件，如图片。当用户选择文件后，我们...
jQuery选择多张图片上传特效
06-24
"jQuery选择多张图片上传特效"是一个优秀的解决方案，它利用了jQuery的强大功能和layer.js的弹窗交互优势，为用户提供了一个高效、易用且功能丰富的图片上传组件。 首先，我们来了解一下jQuery。jQuery是一个广泛...
jQuery多张图片上传预览代码
06-24
本项目涉及的主题是“jQuery多张图片上传预览代码”，这是一个实用的功能，允许用户在实际上传之前预览他们选择的多张图片，同时提供图片弹出放大查看的特效。这种功能可以提升用户体验，让用户在上传前对图片有直观...
使用jquery中$.each()方法来循环一个数据列表
热门推荐
猿飞梦的博客
08-23 2万+
  定义和用法 jQuery.each() 函数用于遍历指定的对象和数组。 语法 $.each( object, callback )   参数 描述 object Object类型 指定需要遍历的对象或数组。 callback Function类型 指定的用于循环执行的函数。 通过这个方法可以将工作中遇到的数据列表如商城里面的商品列表等很好的进行循环，简...
vue实现登陆功能
猿飞梦的博客
09-10 1万+
最近在学习vue，发现了vue的好多坑，比如怎么更好的获取input框输入的值而减少获取dom节点的消耗 ，以及怎么绑定一个函数，去执行业务逻辑。 1、首先说说怎么获取input框的值 vue中提供了一个ref属性，这里需要在html代码中用ref属性来绑定这个input框，再通过js代码来获取input的值： HTML代码： &lt;input type="text" v-model=...
微信小程序实现banner图轮播（动态获取数据），自动获取图片高度
猿飞梦的博客
01-17 1万+
效果图： indicator-active-color="#007aff"//当前选中的指示点颜色 js: const app = getApp() Page({ data: { //-----------模拟banner图----------- imgUrls: [ '/image/1545118381903.jpg', '/imag...
layui jquery如何实现多图片上传
05-05
可以使用 layui 的 upload 模块和 jquery 实现多图片上传。 1. 引入 layui 和 jquery： ``` <link rel="stylesheet" href="layui/css/layui.css"> <script src="jquery/jquery.min.js"></script> <script src="layui/layui.all.js"></script> ``` 2. 定义上传组件： ``` <div class="layui-upload"> <button type="button" class="layui-btn" id="upload">上传图片</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 预览图： <div class="layui-upload-list" id="preview"></div> </blockquote> </div> ``` 3. 初始化上传组件： ``` layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#upload', //绑定元素 multiple: true, //是否允许多文件上传 accept: 'images', //指定允许上传的文件类型 field: 'file', //设定文件域的字段名 url: '/upload/', //上传接口 done: function(res){ //上传完毕回调 console.log(res); $('#preview').append('<img src="'+ res.url +'" class="layui-upload-img">') }, error: function(){ //请求异常回调 } }); }); ``` 说明： - `elem`：绑定选择器，即上传按钮的选择器。 - `multiple`：是否允许多文件上传。 - `accept`：指定允许上传的文件类型。 - `field`：设定文件域的字段名。 - `url`：上传接口。 - `done`：上传完毕回调函数。 - `error`：请求异常回调函数。 4. 上传成功后，将图片预览在页面上： ``` $('#preview').append('<img src="'+ res.url +'" class="layui-upload-img">') ``` 说明： - `#preview`：预览图片的容器选择器。 - `res.url`：上传成功后返回的图片地址。 以上就是利用 layui 和 jquery 实现多图片上传的方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘飞梦

如果觉得有用请您赞助一下，谢谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值