html中選取圖片並預覽

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

var app = angular.module("myAppShowPic", []); //======================================本地儲存資料服務=================================== app.factory('locals', ['$window', function ($window) { return { //儲存單個屬性 set: function (key, value) { $window.sessionStorage[key] = value; }, //讀取單個屬性

get: function (key, defaultValue) { return $window.sessionStorage[key] || defaultValue; }, //儲存物件，以JSON格式儲存 setObject: function (key, value) { $window.sessionStorage[key] = JSON.stringify(value);//將物件以字串儲存 }, //讀取物件

getObject: function (key) { return JSON.parse($window.sessionStorage[key] || '{}');//獲取字串並解析成物件 } } }]); app.controller("myCtrlShowPic", function ($scope, $compile, locals) { /*------------------------------------- 示例一 ------------------------------------------*/

$("#file").change(function () { var files = $(this).prop('files');//獲取input file的files屬性：包含所選擇的圖片資訊 for (var i = 0; i < files.length; i++) { var fileReader = new FileReader(); fileReader.onload = function (event) { var txt = event.target.result;//圖片url資訊：base64的字串 fileToImg(txt);//先選擇的先顯示：預覽圖片 //i=6（列印6次）：後執行 console.log("========fileReader.onload========i========================" + i); }; //i=0,1,2,3,4,5：先執行 console.log("========= fileReader.readAsDataURL========i=========" + i); fileReader.readAsDataURL(files[i]); // 返回一個基於Base64編碼的data-uri物件。 } }); function fileToImg(base64) { if (!checkPhotoNum()) { return; } if (base64) { var img = document.createElement("img"); img.src = base64; var div = document.createElement("div"); div.className = "spanStyle"; div.innerHTML = base64; document.getElementById("result").appendChild(img); document.getElementById("result").appendChild(div); } } function checkPhotoNum() { var img = $("#result").children("img"); if (img.length == 4) { layer.msg("僅能上傳4張圖片！"); return false; } else { return true; } } /*-----------------------------------------------------------------------------------------*/ /*------------------------------------- 示例二 ------------------------------------------*/ /*設定input file和需要顯示的圖片的大小為：加號圖片的大小*/ var imgWidth = 0; var imgHeight = 0; imgWidth = $("#inputIcon").width(); imgHeight = $("#inputIcon").height();//加號大小 console.log("imgheight===" + imgHeight); console.log("imgwidth===" + imgWidth); $("#input_sel_file").width(imgWidth); $("#input_sel_file").height(imgHeight);//設定input file的大小 console.log("input寬度" + $("#input_sel_file").width()); console.log("inputbutton寬度" + $("#inputIcon").width()); var localImgDatas = ''; if (locals.get("localImgDatas")) { console.log("獲取快取！！！！！！！！！！！！！！！！"); localImgDatas = locals.get("localImgDatas");//快取的圖片 } $("#input_sel_file").change(function () { var files = $(this).prop('files'); for (var i = 0; i < files.length; i++) { var fileReader = new FileReader(); fileReader.onload = function (event) { fileToImg1(event.target.result); localImgDatas = localImgDatas + "=" + event.target.result; locals.set("localImgDatas", localImgDatas); }; fileReader.readAsDataURL(files[i]); // 返回一個基於Base64編碼的data-uri物件。 } }); var showImgDatas = ''; showImgDatas = localImgDatas; if (showImgDatas) { var showImgDataArr = showImgDatas.split("="); for (var i = 0; i < showImgDataArr.length; i++) { if (showImgDataArr[i]) { fileToImg1(showImgDataArr[i]); } } } /*顯示選擇的圖片*/ function fileToImg1(base64) { if (!checkPhotoNum1()) { return; } if (base64) { var li = "<li class='pic-li'>" + "<img class='sel-photo' style='height:" + imgHeight + "px;width:" + imgWidth + "px' src='" + base64 + "'>" + "<i class='pic-i' ng-click='deletePhoto($event)'>" + "<img src='quiz_del.png'>" + "</i>" + "</li>"; var $li = $compile(li)($scope); $("#showPics").append($li); } } /*不能超過四張圖片*/ function checkPhotoNum1() { var img = $("#showPics li").children("img.sel-photo"); if (img.length == 4) { layer.msg("僅能上傳4張圖片！"); return false; } else { return true; } } $scope.deletePhoto = function (event) { var delImg = event.target.parentElement.parentElement;//li var delSrc = delImg.children[0].src;//選取的圖片 var delSrcIndex = localImgDatas.indexOf(delSrc);//如果有快取則刪除 if (delSrcIndex > 0) { localImgDatas = localImgDatas.replace(delSrc, ""); } locals.set("localImgDatas", localImgDatas); delImg.remove();//刪除節點 }; /*-----------------------------------------------------------------------------------------------*/ });

html中選取圖片並預覽

html中選取圖片並預覽

js上傳圖片並預覽

上傳圖片並預覽

input上傳圖片並預覽

apicloud 上傳頭像或圖片並預覽

JS互動點選WKWebView中的圖片實現預覽效果

利用formdata非同步上傳圖片並預覽圖片

laravel中上傳圖片並預覽

cropper.js實現圖片裁剪預覽並轉換為base64發送至服務端。

前端H5實現多圖片上傳並預覽

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

JQuery Ajax實現圖片上傳並預覽

選擇並預覽圖片

HTML頁面上傳圖片直接預覽

html5 FileReader 實現本地圖片上傳並預覽應用例項

使用FormData格式上傳影象並預覽圖片

ajaxFileUpload實現圖片的上傳並預覽

tp5簡單的多圖片上傳並預覽demo

Ajax實現圖片上傳並預覽

用javascript實現圖片上傳並預覽

html中選取圖片並預覽

相關推薦