国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

Angularjs實現上傳圖片預覽功能

來源:懂視網 責編:小采 時間:2020-11-27 22:31:07
文檔

Angularjs實現上傳圖片預覽功能

Angularjs實現上傳圖片預覽功能:廢話不多說了,直接給大家貼代碼了,具體代碼如下所示: <input type=file ng-file-select=onFileSelect($files) accept=image/*> app.factory(fileReader, function($q, $log) { var onLoad
推薦度:
導讀Angularjs實現上傳圖片預覽功能:廢話不多說了,直接給大家貼代碼了,具體代碼如下所示: <input type=file ng-file-select=onFileSelect($files) accept=image/*> app.factory(fileReader, function($q, $log) { var onLoad

廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:

<input type="file" ng-file-select="onFileSelect($files)" accept="image/*">
app.factory("fileReader", function($q, $log) {
 var onLoad = function(reader, deferred, scope) {
 return function () {
 scope.$apply(function () {
 deferred.resolve(reader.result);
 });
 };
 };
 var onError = function (reader, deferred, scope) {
 return function () {
 scope.$apply(function () {
 deferred.reject(reader.result);
 });
 };
 };
 var onProgress = function(reader, scope) {
 return function (event) {
 scope.$broadcast("fileProgress",
 {
 total: event.total,
 loaded: event.loaded
 });
 };
 };
 var getReader = function(deferred, scope) {
 var reader = new FileReader();
 reader.onload = onLoad(reader, deferred, scope);
 reader.onerror = onError(reader, deferred, scope);
 reader.onprogress = onProgress(reader, scope);
 return reader;
 };
 var readAsDataURL = function (file, scope) {
 var deferred = $q.defer();
 var reader = getReader(deferred, scope);
 reader.readAsDataURL(file);
 return deferred.promise;
 };
 return {
 readAsDataUrl: readAsDataURL
 };
 });

選擇圖片后執行的方法

$scope.onFileSelect = function(files) {
 var fileIn=files[0];
 var img = new Image();
 var fileType = fileIn.name.substring(fileIn.name.lastIndexOf(".") + 1, fileIn.name.length);
 if(fileIn.size>5242880){//單位是B,此處不允許超過5M
 alert("圖片不能超過5M")
 return;
 }
 if(fileType=='JPG' || fileType=='PNG' || fileType=='JPEG ' || fileType=='jpg' || fileType=='png' || fileType=='jpeg'){
 }else{
 alert("圖片格式只支持:JPG,PNG,JPEG")
 return;
 }
 fileReader.readAsDataUrl(fileIn, $scope)
 .then(function(result) {
 $scope.imageSrc = result;
 console.log(img.width);
 });
 }

總結

以上所述是小編給大家介紹的Angularjs實現上傳圖片預覽功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

Angularjs實現上傳圖片預覽功能

Angularjs實現上傳圖片預覽功能:廢話不多說了,直接給大家貼代碼了,具體代碼如下所示: <input type=file ng-file-select=onFileSelect($files) accept=image/*> app.factory(fileReader, function($q, $log) { var onLoad
推薦度:
標簽: 圖片 上傳 實現
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 一道本一区二区三区 | 亚洲第一区se | 国产免费网| 亚洲一二三区视频 | 久久精品一区二区 | 欧美中文一区 | 国产精品美女一区二区 | 久久一精品 | 国产成人精品三级在线 | 一级一级一级毛片免费毛片 | 国产成人在线观看免费网站 | 成人亚洲国产综合精品91 | 亚洲国产精品免费 | 在线日韩欧美一区二区三区 | 国产精品国产三级国产普通话一 | 欧美在线不卡视频 | 国产成人亚洲欧美三区综合 | 国产成人一区二区小说 | 国内免费视频成人精品 | 亚洲精品高清国产一久久 | 日韩欧美片 | 高清亚洲 | 久久久久久久一精品 | 国产视频1区 | 国产免费全部免费观看 | 视频精品一区二区三区 | 国产欧美日韩精品在线 | 国产亚洲欧美一区二区三区 | 欧美综合亚洲 | 99久久精品国产一区二区三区 | 久久精品国产一区 | 国产精品永久免费自在线观看 | 2019亚洲日韩新视频 | 97r久久精品国产99国产精 | 久久伊| 欧美日韩精品国产一区二区 | 国产欧美一区二区 | 免费a一毛片 | 国产欧美日韩视频 | 一级毛片免费毛片毛片 | 欧美一区二区三区日韩免费播 |