jQuery-WEUI的Uploader实现上传多张图片并且限制上传数量的方法

jQuery-WEUI的Uploader目前只有CSS样式，并没有对应的JS插件。于是自己根据之前在网上找到的未完善的代码做了修改。实现了多图上传并且限制上传数量的方法，点击预览的时候可以删除当前已添加的图片。

这是jQuery-WEUI官网的demo示例代码。只有前端css样式。

特别说明，本人已经重写Uploader上传方法，增加了可配置化和可直接上传到服务器的方法。

新方法地址：https://blog.csdn.net/wuyuander/article/details/100581314

我的上传实现原理是把选择的照片以base64格式存起了。然后我我上传的时候取base64上传再在后台转成图片；

话不多说，先看代码；

<!--weui-uploader 照片上传功能-->
<div class="weui-uploader"><div class="weui-uploader__hd"><p class="weui-uploader__title">上传现场照片</p><div class="weui-uploader__info" id="uploader_count" data-total="3" data-val="0">0/3</div></div><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploader_files"></ul><div class="weui-uploader__input-box"><input class="weui-uploader__input" id="uploader_input" type="file" accept="image/*" multiple="">></div></div>
</div>
<!--weui-uploader 照片上传功能 END-->

其中 <div class="weui-uploader__info" id="uploader-count" data-total="3" data-val="0">0/3</div>

我把实现上传的JS代码封装为weui.expand.js。然后引用js文件：<script src="/weui/js/weui.expand.js"></script>

jQuery-WEUI的Uploader JS拓展代码：

/*========================================================
*****   weui-uploader 实现图片上传+预览+删除方法  ********
* Editor:吴远德_Dale ,最初引用于：http://jqweui.com/components
*引用JS：jquery-2.1.4.js，weui.min.js，jquery-weui.js；
*引用CSS：weui.min.css；jquery-weui.css；
*用到了：weui-uploader及 实现了上传，weui-gallery实现了预览及删除
========================================================*/
$(function () {//var tmpl = '<li id="" class="weui-uploader__file" style="background-image:url(#url#)"></li>',//weui.js中的方法//var tmpl = '<li id="" class="weui-uploader__file" style="background-image:url(#url#)"><input type="hidden" id="#imgid#" name="#imgid#" value="#url#" /></li>',var tmpl = '<li id="" class="weui-uploader__file" style="background-image:url(#url#)"><input type="hidden" id="#imgid#" name="#imgid#" value="#url#" /><div class="weui-uploader__file-content">50%</div></li>',$gallery = $(".weui-gallery"), $galleryImg = $(".weui-gallery__img"),$gallery__del = $(".weui-gallery__del"),$uploaderInput = $("#uploader_input"),$uploaderFiles = $("#uploader_files"),$uploaderCount = $("#uploader_count")//显示已上传数的div元素;// 允许上传的图片类型var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];// 1024KB，也就是 1MBvar maxSize = 1024 * 1024;// 图片最大宽度var maxWidth = 300;// 最大上传图片数量var imgTotal = 0;// 记录当前已上传数量var imgCount = 0;//记录当前被gallery的click事件打开的li元素var $galleryClickLi;$uploaderInput.on("change", function (e) {var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;imgTotal = parseInt($uploaderCount.attr("data-total"));//从显示上传数的$uploaderCount获取最大上传数量imgCount = parseInt($uploaderCount.attr("data-val"));//从显示上传数的$uploaderCount获取当前的数量for (var i = 0, len = files.length; i < len; ++i) {var file = files[i];if (url) {src = url.createObjectURL(file);} else {src = e.target.result;}imgCount = imgCount + 1;//数量+1；//$uploaderFiles.append($(tmpl.replace('#url#', src)));//新方法中对隐藏域的ID和value进行替换var reader = new FileReader();reader.onload = function (e) {var img = new Image();img.onload = function () {// 不要超出最大宽度var w = Math.min(maxWidth, img.width);// 高度按比例计算var h = img.height * (w / img.width);var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 设置 canvas 的宽度和高度canvas.width = w;canvas.height = h;ctx.drawImage(img, 0, 0, w, h);var base64 = canvas.toDataURL('image/png');// 插入到预览区$uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#imgid#', "img" + imgCount).replace('#imgid#', "img" + imgCount).replace('#url#', base64)));// 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传var progress = 0;function uploading() {$uploaderFiles.find('.weui-uploader__file-content').text(++progress + '%');if (progress < 100) {setTimeout(uploading, 30);} else {// 如果是失败，塞一个失败图标//$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');$uploaderFiles.removeClass('weui-uploader__file_status').find('.weui-uploader__file-content').remove();}}setTimeout(uploading, 30);};img.src = e.target.result;};reader.readAsDataURL(file);}//更新记录数量的$uploaderCount 中的值和显示内容updateImgCount();});$uploaderFiles.on("click", "li", function () {$galleryImg.attr("style", this.getAttribute("style"));$gallery.fadeIn(100);$galleryClickLi = this;//记录被单击调用$gallery显示的li元素});$gallery.on("click", function () {$gallery.fadeOut(100);});$gallery__del.on("click", function () {$gallery.fadeOut(100);$galleryClickLi.remove();// $gallery删除事件执行移除li元素imgCount = imgCount - 1;updateImgCount();});//更新记录数量的$uploaderCount中的值和显示内容function updateImgCount() {$uploaderCount.attr("data-val", imgCount);$uploaderCount.html("" + imgCount + "/" + imgTotal + "");if (imgCount >= imgTotal) {$('.weui-uploader__input-box').hide();} else {$('.weui-uploader__input-box').show();}}
});

然后引用拓展JS即可实现：

jQuery-WEUI的Uploader实现上传多张图片并且限制上传数量的方法相关推荐

后台php微信jssdk上传多张图片,微信JSSDK上传多张图片
作过微信开发的都知道,在部分android机型里微信不支持网页上传图片的,这是因为这些机型的文件上传存在内存泄漏,会致使微信闪退,因此微信内置浏览器将文件上传屏蔽.这就致使这些机型的用户在使用微信浏览 ...
易语言c s 上传多张图片,hbuilder如何上传多张图片？
这是发送请求的代码: //提交 let task = window.plus.uploader.createUpload(`${apiConfig.config.baseURL}complaint/i ...
jq+ajax前端上传多张图片_史上最轻量的前端框架-VanillaJS
vanillaJS是史上最轻量跨平台前端框架 ,我们能够使用它构建强大的JS应用.从过去到以后他都是最轻量的框架介绍 vanillaJS目前在国外备受推崇,Bootstrap5舍弃了Jquery,选 ...
Element UI 上传一张图片后隐藏上传按钮
el-upload里面绑定一个占位class: :class="{hide:hideUpload}" data里面初始化: hideUpload: false, limitCoun ...
如何在对话框上显示一张图片
如何在对话框上显示一张图片在对话框上显示一张图片,可能是一个比较常用的功能,在MFC中提供了OnPaint()绘图函数,下面结合这个函数,提供几种在对话框上显示一张图片的代码.首先假设你有一张24 ...
jQuery WeUI 上传
jQuery WeUI 是专为微信公众账号开发而设计的一个框架,jQuery WeUI的官网:http://jqweui.com/ 需求:需要在微信公众号网页添加上传图片功能技术选型:实现上传图片功 ...
jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
续《用最简单的例子实现jQuery图片即时上传》之多图上传实现
本用例主要含两个文件(index.html.submit_form_process.php),一个文件夹(files/).特别的,files中含一个报错图片error.jpg,jquery库引用了外链 ...
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
vue上传文件php,php文件上传 – 前端开发，JQUERY特效，全栈开发，vue开发
文件上传一般有下面2种方式: 有两种: 1.标准input表单方式,典型的用$_FILES进行接收: 2.以Base64的方式进行传送,一般是AJAX异步上传. 第一种标准的input表单方式,适用 ...

jQuery-WEUI的Uploader实现上传多张图片并且限制上传数量的方法

特别说明，本人已经重写Uploader上传方法，增加了可配置化和可直接上传到服务器的方法。

jQuery-WEUI的Uploader实现上传多张图片并且限制上传数量的方法相关推荐

最新文章

热门文章