weui上傳、預覽和刪除圖片

阿新 • • 發佈：2019-02-06

mui.init(); $(function() { var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>', $gallery = $("#gallery"), $galleryImg = $("#galleryImg"), $uploaderInput = $("#uploaderInput"

), $uploaderFiles = $("#uploaderFiles"); $uploaderInput.on("change", function(e) { var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files; 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; } $uploaderFiles.append($(tmpl.replace('#url#', src))); } }); var

index; //第幾張圖片 $uploaderFiles.on("click", "li", function() { index = $(this).index(); $galleryImg.attr("style", this.getAttribute("style")); $gallery.fadeIn(100); }); $gallery.on("click", function() { $gallery.fadeOut(100); }); //刪除圖片刪除圖片的程式碼也貼出來。 $(".weui-gallery__del").click(function() { //這部分剛才放錯地方了，放到$(function(){})外面去了 console.log('刪除'); $uploaderFiles.find("li").eq(index).remove(); }); });

weui上傳、預覽和刪除圖片

weui上傳、預覽和刪除圖片

小程式單張圖片和九宮格圖片上傳、預覽、刪除示例

vue中圖片轉換為base64上傳、預覽、刪除

基於Bootstrap的多圖片（檔案也可以）上傳、預覽、刪除、縮放、進度...顯示

結合bootstrap fileinput外掛和Bootstrap-table表格外掛，實現檔案上傳、預覽、提交的匯入Excel資料操作流程

小程式實現多圖上傳、預覽

ckeditor的圖片上傳、預覽問題

vue2移動端上傳，預覽，壓縮圖片，解決拍照旋轉問題

基於Vue + Node.js + MongoDB的圖片上傳組件，實現圖片的預覽和刪除

web端文件上傳，預覽，下載，刪除

基於jQuery和cropper點選頭像上傳並預覽裁剪圖片

檢查是否是圖片、限制上傳畫素、圖片上傳時預覽、點選預覽圖在新頁面檢視原圖、上傳圖片

微信小程式圖片上傳放大預覽刪除程式碼

使用js和jquery實現點選圖片上傳及預覽

[轉]html之file標簽 --- 圖片上傳前預覽 -- FileReader

input file實現多選，限制文件上傳類型，圖片上傳前預覽功能

js 文件異步上傳顯示進度條顯示上傳速度預覽文件

vue專案上傳Github預覽

Java web圖片上傳本地預覽,無需後臺寫介面

ionic 本地視訊上傳與預覽圖擷取上傳

weui上傳、預覽和刪除圖片

相關推薦