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

最近做项目要用到上传多张图片的功能,自己用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
    评论
可以使用 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、付费专栏及课程。

余额充值