jQuery WeUI 上傳

jQuery WeUI 是專為微信公眾賬號開發而設計的一個框架，jQuery WeUI的官網：http://jqweui.com/

需求：需要在微信公眾號網頁添加上傳圖片功能

技術選型：實現上傳圖片功能可選百度的WebUploader、餓了么的Element和微信的jQuery WeUI，WebUploader的缺點是自定義UI困難，自定義上傳過程困難，Element的缺點是Web 控件，與手機端樣式不符，而jQuery WeUI專門為微信公眾號做的框架，基本不會出現問題，使用起來比較簡單。最后當然就選微信的jQuery WeUI

HTML部分：

[html]?view plaincopy
  1. <!--圖片上傳-->??
  2. ????????<div?class="weui-gallery"?id="gallery">??
  3. ????????????<span?class="weui-gallery__img"?id="galleryImg"></span>??
  4. ????????????<div?class="weui-gallery__opr">??
  5. ????????????????<a?href="javascript:"?class="weui-gallery__del">??
  6. ????????????????????<i?class="weui-icon-delete?weui-icon_gallery-delete"></i>??
  7. ????????????????</a>??
  8. ????????????</div>??
  9. ????????</div>??
  10. ????????<div?class="weui-cells?weui-cells_form">??
  11. ????????????<div?class="weui-cell">??
  12. ????????????????<div?class="weui-cell__bd">??
  13. ????????????????????<div?class="weui-uploader">??
  14. ????????????????????????<div?class="weui-uploader__hd">??
  15. ????????????????????????????<p?class="weui-uploader__title">圖片上傳</p>??
  16. ????????????????????????</div>??
  17. ????????????????????????<div?class="weui-uploader__bd">??
  18. ????????????????????????????<ul?class="weui-uploader__files"?id="uploaderFiles">??
  19. ??????????????????????????????????
  20. ????????????????????????????</ul>??
  21. ????????????????????????????<div?class="weui-uploader__input-box">??
  22. ????????????????????????????????<input?id="uploaderInput"?class="weui-uploader__input?zjxfjs_file"?type="file"?accept="image/*"?multiple="">??
  23. ????????????????????????????</div>??
  24. ????????????????????????</div>??
  25. ????????????????????</div>??
  26. ????????????????</div>??
  27. ????????????</div>??
  28. ????????</div>??

JS部分：

[html]?view plaincopy
  1. <script?type="text/javascript"?src="../js/mui.min.js"></script>??
  2. <script?type="text/javascript"?src="../js/jquery.min.js"></script>??
  3. <script?src="../js/jquery-weui.min.js"></script>??
  4. <script>??
  5. ????mui.init();??
  6. ????$(function()?{??
  7. ????????var?tmpl?=?'<li?class="weui-uploader__file"?style="background-image:url(#url#)"></li>',??
  8. ????????????$gallery?=?$("#gallery"),??
  9. ????????????$galleryImg?=?$("#galleryImg"),??
  10. ????????????$uploaderInput?=?$("#uploaderInput"),??
  11. ????????????$uploaderFiles?=?$("#uploaderFiles");??
  12. ??
  13. ????????????$uploaderInput.on("change",?function(e)?{??
  14. ????????????????var?src,?url?=?window.URL?||?window.webkitURL?||?window.mozURL,??
  15. ????????????????files?=?e.target.files;??
  16. ????????????????for(var?i?=?0,?len?=?files.length;?i?<?len;?++i)?{??
  17. ????????????????????var?file?=?files[i];??
  18. ??
  19. ????????????????????if(url)?{??
  20. ????????????????????????src?=?url.createObjectURL(file);??
  21. ????????????????????}?else?{??
  22. ????????????????????????src?=?e.target.result;??
  23. ????????????????????}??
  24. ??
  25. ????????????????????$uploaderFiles.append($(tmpl.replace('#url#',?src)));??
  26. ????????????????}??
  27. ????????????});??
  28. ????????var?index;?//第幾張圖片??
  29. ????????$uploaderFiles.on("click",?"li",?function()?{??
  30. ????????????index?=?$(this).index();??
  31. ????????????$galleryImg.attr("style",?this.getAttribute("style"));??
  32. ????????????$gallery.fadeIn(100);??
  33. ????????});??
  34. ????????$gallery.on("click",?function()?{??
  35. ????????????$gallery.fadeOut(100);??
  36. ????????});??
  37. ????????//刪除圖片??
  38. ????????$(".weui-gallery__del").click(function()?{??
  39. ????????????$uploaderFiles.find("li").eq(index).remove();??
  40. ????????});??
  41. ????});??
  42. </script>??

CSS和JS文件可以去官網下載

[html]?view plaincopy
  1. <link?rel="stylesheet"?href="../css/mui.min.css">??
  2. <link?rel="stylesheet"?href="../css/weui.min.css"/>??
  3. <link?rel="stylesheet"?href="../css/jquery-weui.min.css"/>??
[html]?view plaincopy
  1. ?<script?type="text/javascript"?src="../js/mui.min.js"></script>??
  2. ?<script?type="text/javascript"?src="../js/jquery.min.js"></script>??
  3. ?<script?src="../js/jquery-weui.min.js"></script>??

效果圖：

點擊加號，上傳圖片

點擊圖片，可以進行預覽、刪除

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/387111.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/387111.shtml
英文地址，請注明出處：http://en.pswp.cn/news/387111.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

07 模塊

07 模塊

模塊和包的概念 等同于java中的Package 模塊名文件名&#xff08;無后綴&#xff09; 在文件系統中&#xff0c;包就是文件夾&#xff0c;模塊就是xxx.py文件 每層包下面都有__init__.py文件 導入模塊 >>> import math >>> math.pow(2, 0.5) >>…
閱讀更多...
1.rabbitmq 集群版安裝及使用nginx進行四層負載均衡設置

1.rabbitmq 集群版安裝及使用nginx進行四層負載均衡設置

1.安裝erlang 需要注意erlang的版本是否滿足rabbitmq的需求 這里用到的版本是&#xff1a;Erlang 19.0.4 RabbitMQ 3.6.15 wget http://www.rabbitmq.com/releases/erlang/erlang-19.0.4-1.el7.centos.x86_64.rpmrpm -ivh erlang-19.0.4-1.el7.centos.x86_64.rpm yum -y inst…
閱讀更多...
使用WEUI uploader上傳圖片

使用WEUI uploader上傳圖片

使用WEUI uploader上傳圖片&#xff0c;博主費了很大的勁總算找到完整的了&#xff0c;并且帶后臺接收代碼&#xff0c;有需要的朋友拿去吧&#xff0c;親測可用&#xff01; 一、html代碼<link rel"stylesheet" href"https://res.wx.qq.com/open/libs/weui/…
閱讀更多...
08 面向對象編程

08 面向對象編程

1 介紹 面向對象編程是一種程序設計范式 把程序看做不同對象的相互調用&#xff0c;對現實世界建立對象模型。 面向對象編程的基本思想&#xff1a; 類和實例&#xff1a; 類用于定義抽象類型 實例根據類的定義被創建出來 2 定義類并創建實例 類通過class關鍵字定義&…
閱讀更多...
H5+jqweui實現手機端圖片壓縮上傳 Base64

H5+jqweui實現手機端圖片壓縮上傳 Base64

H5jqweui實現手機端圖片壓縮上傳主要功能&#xff0c;使用H5的formData上傳base64格式的圖片&#xff0c;canvas壓縮圖片&#xff0c;前端樣式使用weui&#xff0c;為方便起見&#xff0c;使用了jquery封裝過的weui&#xff0c;jqweui。話不多少&#xff0c;開始上代碼。前端代…
閱讀更多...
09 類的繼承

09 類的繼承

繼承一個類 class Person(object): def __init__(self, name, gender): self.name name self.gender gender class Student(Person): def __init__(self, name, gender, score): super(Student, self).__init__(name, gender) self.score score 判斷類型 isinstance()可以…
閱讀更多...
vue 中v-if 與v-show 的區別

vue 中v-if 與v-show 的區別

相同點或者說功能&#xff0c;都可以動態操作dom元素的顯示隱藏 不同點&#xff1a; 1.手段&#xff1a;v-if是動態的向DOM樹內添加或者刪除DOM元素&#xff1b;v-show是通過設置DOM元素的display樣式屬性控制顯隱&#xff1b;2.編譯過程&#xff1a;v-if切換有一個局部編譯/卸…
閱讀更多...
vue打包后放在 nginx部署時候的配置文件

vue打包后放在 nginx部署時候的配置文件

部署了三套程序,默認的&#xff0c;admin和design#user nobody; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024; }http {include …
閱讀更多...
Lecture 2 Asymptotic Notation

Lecture 2 Asymptotic Notation

閱讀更多...
淘淘商城之技術選型、開發工具和環境、人員配置

淘淘商城之技術選型、開發工具和環境、人員配置

一、技術選型 1&#xff09;Spring、SpringMVC、Mybatis 2&#xff09;JSP、JSTL、jQuery、jQuery plugin、EasyUI、KindEditor&#xff08;富文本編輯器&#xff09;、CSSDIV 3&#xff09;Redis&#xff08;緩存服務器&#xff09; 4&#xff09;Solr&#xff08;搜索&#x…
閱讀更多...
啟動代碼格式：nginx安裝目錄地址 -c nginx配置文件地址

啟動代碼格式：nginx安裝目錄地址 -c nginx配置文件地址

啟動啟動代碼格式&#xff1a;nginx安裝目錄地址 -c nginx配置文件地址 例如&#xff1a;[rootLinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf停止nginx的停止有三種方式&#xff1a; 從容停止1、查看進程號[rootLinuxServer ~]# ps -ef…
閱讀更多...
Lecture 3 Divide and Conquer

Lecture 3 Divide and Conquer

1.Divide the problem(instance) into one or more sub-problem; 2.Conquer each sub-problem recursively; 3.Combine solutions.
閱讀更多...
Maven報錯找不到jre

Maven報錯找不到jre

富人之所以越來越富&#xff0c;窮人之所以越來越窮&#xff0c;中產階級之所以總是在債務泥潭中掙扎&#xff0c;其主要原因之一在于他們對金錢的觀念不是來自學校&#xff0c;而是來自家庭。 ---《窮爸爸富爸爸》 一、報錯提示 常規配置maven環境變量&#xff0c;報錯&#x…
閱讀更多...
vue按照url地址訪問出錯404

vue按照url地址訪問出錯404

問題描述&#xff1a; 最近在開發cms的時候使用Vue.js框架&#xff0c;利用vue-route結合webpack編寫了一個單頁路由項目&#xff0c;自己在服務器端配置nginx。部署完成后&#xff0c;訪問沒問題&#xff0c;從頁面中點擊跳轉也沒問題&#xff0c;但是只要點擊刷新或通過瀏覽器…
閱讀更多...
Lecture 4 Quick Sort and Randomized Quick Sort

Lecture 4 Quick Sort and Randomized Quick Sort

Quick Sort --Divide and Conquer --Sorts “in place” --Very practical with tuning Divide and Conquer: 1.Divide: Partition array into 2 sub-arrays around pivot x such that elements in lower sub-array < x < elements in upper sub-array; 2.Conquer: …
閱讀更多...
HDU 3966 樹鏈剖分后線段樹維護

HDU 3966 樹鏈剖分后線段樹維護

題意: 一棵樹, 操作1.$path(a,b)$之間的點權$k$ 操作2.單點查詢 題解: 樹鏈剖分即可,注意代碼細節,雙向映射 主要是記錄一下板子 #include <string.h> #include <stdio.h> #include <algorithm> #define endl \n #define ll long long #define ull unsigned …
閱讀更多...
VUE config/index.js文件配置

VUE config/index.js文件配置

&#xfeff;&#xfeff; 當我們需要和后臺分離部署的時候&#xff0c;必須配置config/index.js: 用vue-cli 自動構建的目錄里面 &#xff08;環境變量及其基本變量的配置&#xff09;123456789101112131415var path require(path)module.exports {build: {index: path.res…
閱讀更多...
數據規則列表加導入導出

數據規則列表加導入導出

1.進入bos&#xff0c;打開數據規則&#xff0c;進入列表菜單 2.點擊事件-新增操作 3.點擊新增 4.點擊操作類型&#xff0c;輸入%引入 5.點擊確定&#xff0c;保存后生效&#xff0c;導出 、引入模板設置同理轉載于:https://www.cnblogs.com/RogerLu/p/10643521.html
閱讀更多...
Lecture 6 Order Statistics

Lecture 6 Order Statistics

Given n elements in array, find kth smallest element (element of rank k) Worst-case linear time order statistics --by Blum, Floyd, Pratt, Rivest, Tarjan --idea: generate good pivot recursively. Not so hot, because the constant is pretty big.
閱讀更多...
C++ qsort() 函數調用時實參與形參不兼容的問題解決

C++ qsort() 函數調用時實參與形參不兼容的問題解決

《劍指OFFER》刷題筆記 —— 撲克牌順子 LL今天心情特別好,因為他去買了一副撲克牌,發現里面居然有2個大王,2個小王(一副牌原本是54張^_^)...他隨機從中抽出了5張牌,想測測自己的手氣,看看能不能抽到順子,如果抽到的話,他決定去買體育彩票,嘿嘿&#xff01;&#xff01;“紅心A…
閱讀更多...
最新文章

Copyright @ 2022~2023