angular.js - angularjs的問(wèn)題：點(diǎn)擊”選擇圖片“后，需要很長(zhǎng)的時(shí)間才能選擇圖片
問(wèn)題描述
問(wèn)題描述
如下圖，點(diǎn)擊“選擇圖片”
然后過(guò)了約6秒，系統(tǒng)彈出框來(lái)，選擇圖片
其他功能能正常使用。嘗試了很多次，每次都要較長(zhǎng)時(shí)間才能進(jìn)行圖片選擇。為什么需要那么長(zhǎng)的時(shí)間才能選擇圖片？
以下是我的代碼：
HTML
<!DOCTYPE html><html ng-app='fileUpload'><head> <meta name='renderer' content='webkit|ie-comp|ie-stand'> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <title>AngularJs</title> <script type='text/javascript' src='http://m.cgvv.com.cn/wenda/js/lib/angular/angular.js'></script> <script type='text/javascript' src='http://m.cgvv.com.cn/wenda/js/lib/angular/ng-file-upload.min.js'></script> <script type='text/javascript' src='http://m.cgvv.com.cn/wenda/js/lib/angular/ng-file-upload-shim.min.js'></script> <script type='text/javascript' src='http://m.cgvv.com.cn/wenda/js/lib/angular/ng-img-crop.js'></script></head><body ng-app='fileUpload' ng-controller='MyCtrl'> <form name='myForm'><p>Crop Image and Upload</p><button ngf-select ng-model='picFile' accept='image/*'>Select Picture</button><p ngf-drop ng-model='picFile' ngf-pattern='image/*' class='cropArea'> <img-crop image='picFile | ngfDataUrl' result-image='croppedDataUrl' ng-init='croppedDataUrl=’’'></img-crop></p><p><img ng-src='http://m.cgvv.com.cn/wenda/{{croppedDataUrl}}' /></p><button ng-click='upload(croppedDataUrl, picFile.name)'>Submit</button> <span ng-show='progress >= 0'> <p ng-bind='progress + ’%’'></p></span><span ng-show='result'>Upload Successful</span><span ng-show='errorMsg'>{{errorMsg}}</span> </form></body></html>
javascript
<script type='text/javascript'> var app = angular.module(’fileUpload’, [’ngFileUpload’, ’ngImgCrop’]); app.controller(’MyCtrl’, [’$scope’, ’Upload’, ’$timeout’, function ($scope, Upload, $timeout) {$scope.upload = function (dataUrl, name) { Upload.upload({url: ’https://angular-file-upload-cors-srv.appspot.com/upload’,data: { file: Upload.dataUrltoBlob(dataUrl, name)}, }).then(function (response) {$timeout(function () { $scope.result = response.data;}); }, function (response) {if (response.status > 0) $scope.errorMsg = response.status + ’: ’ + response.data; }, function (evt) {$scope.progress = parseInt(100.0 * evt.loaded / evt.total); });} }]);</script>
CSS
<style type='text/css'> .cropArea {background: #E4E4E4; overflow: hidden; width:500px; height:350px; } form .progress {line-height: 15px; } .progress {display: inline-block; width: 100px; border: 3px groove #CCC; } .progress p {font-size: smaller; background: orange; width: 0; } img-crop {width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } img-crop canvas {display: block; position: absolute; top: 50%; left: 50%; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}</style>
【參考】上面的代碼來(lái)自：http://jsfiddle.net/danialfar...ng-file-upload介紹：https://github.com/danialfari...
問(wèn)題解答
回答1：有可能是因?yàn)闆](méi)有設(shè)置上傳文件類型的原因，我之前也是有這樣的問(wèn)題改成accept: ’image/jpg,image/jpeg,image/png’就好了
回答2：accept會(huì)在計(jì)算機(jī)中進(jìn)行過(guò)濾，所有打開(kāi)很慢。換成ngf-pattern過(guò)濾，如何不符合ngf-pattern='image/* 的話，返回值是null,不會(huì)是你上傳的文件。
網(wǎng)公網(wǎng)安備