H5移動端實現仿QQ空間照片上傳效果程式碼

阿新 • • 發佈：2019-01-09

//獲取檔案url function createObjectURL(blob){ if (window.URL){ return window.URL.createObjectURL(blob); } else if (window.webkitURL){ return window.webkitURL.createObjectURL(blob); } else

{ return null; } } var box = $("#fileBox .review-box"); //顯示圖片box var file = $("#file"); //file物件 var domFragment = document.createDocumentFragment(); //文件流優化多次改動dom $("#fileBox"

).on("click", ".file-btn",function(){ var index = $(this).parent().index(); if(index == 6){ alert("最多可以上傳4張圖片！"); return false; } }); //觸發選中檔案事件 $("#fileBox"

).on("change", ".file-btn", function(event){ var imgNum = parseInt($("#fileBox .review-box img").length); if(imgNum < 4){ var file = event.target.files; //獲取選中的檔案物件 var imgTag = $("<img src=''/>"); var fileName = file[0].name; //獲取當前檔案的檔名 var url = createObjectURL(file[0]); //獲取當前檔案物件的URL //忽略大小寫 var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1); var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1); var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1); //判斷檔案是否是圖片型別 if(jpg || png || jpeg){ imgTag.attr("src",url); }else{ alert("請選擇圖片型別檔案！"); } //最佳顯示 var imgbox = $("<div class='prev-item'><span class='closebtn'>×</span></div>"); imgbox.append(imgTag); box.append(imgbox); event.target.parentNode.style.display = "none"; var cloneDom = $(".clone-dom").eq(0).clone().removeAttr("style"); $("#fileBox").append(cloneDom); } }); $(".review-box").on("click", ".prev-item", function(){ var index = $(this).index(); $(this).remove(); $("#fileBox label:eq(" + (index + 1) + ")").remove(); });

H5移動端實現仿QQ空間照片上傳效果程式碼

H5移動端實現仿QQ空間照片上傳效果程式碼

jsp實現仿QQ空間新建多個相冊名稱，向相冊中加入照片

jsp實現仿QQ空間新建多個相簿名稱，向相簿中新增照片

H5移動端實現手機震動效果

移動端HTML5 檔案預覽及上傳

egg-ueditor，基於egg的UEditor百度編輯器後端實現，支援圖片/檔案上傳、列表及圖片遠端抓取

移動端使用vue單頁面圖片上傳

前端 html h5 移動端手機端仿ios左滑刪除效果

h5移動端聊天室|仿微信界面聊天室|h5多人聊天室

h5移動端阻止瀏覽器長按事件

基於jQuery的 h5移動端抽獎頁面插件

H5移動端項目案例、web手機微商城實戰開發

移動端實現焦點圖

旅行app(遊記、攻略、私人定制) | 順便遊旅行H5移動端實例

h5移動端flexible源碼適配終端解讀以及常用sass函數

h5移動端常見虛擬鍵盤頂起底部導航欄解決辦法

css 手機適配手淘H5移動端適配方案flexible原始碼分析

thinkphp+ajax 移動端實現滾動到底部載入資料(無重新整理動態載入資料技術的應用)

H5移動端常見問題

【Android檢視效果】仿QQ空間滑動改變標題欄顏色

H5移動端實現仿QQ空間照片上傳效果程式碼

相關推薦