recherche

Maison  >  Questions et réponses  >  le corps du texte

angulaire.js - Problème avec Angularjs : après avoir cliqué sur "Sélectionner une image", la sélection de l'image prend beaucoup de temps

Description du problème

D'autres fonctions peuvent être utilisées normalement. J'ai essayé plusieurs fois, mais à chaque fois, la sélection de l'image prenait beaucoup de temps. Pourquoi faut-il autant de temps pour sélectionner une image ?

Voici mon code : 

<!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="js/lib/angular/angular.js"></script>
    <script type="text/javascript" src="js/lib/angular/ng-file-upload.min.js"></script>
    <script type="text/javascript" src="js/lib/angular/ng-file-upload-shim.min.js"></script>
    <script type="text/javascript" src="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="{{croppedDataUrl}}" /></p>
        <button ng-click="upload(croppedDataUrl, picFile.name)">Submit</button>  
        <span class="progress" ng-show="progress >= 0">
          <p style="width:{{progress}}%" ng-bind="progress + '%'"></p>
        </span>
        <span ng-show="result">Upload Successful</span>
        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </form>
</body>
</html>
<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>
<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>

[Référence]
Le code ci-dessus provient de : http://jsfiddle.net/danialfar...
ng-file-upload introduction : https://github.com / danialfari...

世界只因有你世界只因有你2755 Il y a quelques jours655

répondre à tous(2)je répondrai

  • 天蓬老师

    天蓬老师2017-05-15 17:12:25

    C'est peut-être parce que le type de fichier de téléchargement n'est pas défini. J'ai également eu ce problème auparavant, changez-le simplement en
    accept: 'image/jpg,image/jpeg,image/png' et tout ira bien

    .

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-15 17:12:25

    accept会在计算机中进行过滤，所有打开很慢。换成ngf-pattern过滤，如何不符合ngf-pattern="image/* 的话，返回值是null, ce ne sera pas le fichier que vous avez téléchargé.

    répondre
    0
  • Annulerrépondre