33

ng-upload を使用して AngularJS でファイルをアップロードしようとしていますが、問題が発生しています。私のhtmlは次のようになります：

<div class="create-article" ng-controller="PostCreateCtrl">
        <form ng-upload method="post" enctype="multipart/form-data" action="/write" >
            <fieldset>
                <label>Category</label>
                <select name="category_id" class="">
                    <option value="0">Select A Category</option>
                    <?php foreach($categories as $category): ?>
                        <option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option>
                    <?php endforeach; ?>
                </select>

                <label>Title</label>
                <input type="text" class="title span5" name="post_title"
                       placeholder="A catchy title here..."
                       value="<?= $post -> post_title; ?>" />

                <label>Attach Image</label>
                <input type="file" name="post_image" />

                 <a href='javascript:void(0)'  class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a>

                <label>Body</label>
                <div id="container">
                <textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea>
                </div>
                <div style='clear:both;'></div>
                <label>Preview</label>
                <div id='textarea-preview'></div>

            </fieldset>
            <div class="span7" style="margin: 0;">
                <input type="submit" class="btn btn-success" value="Create Post" />
            <input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" />
            </div>

        </form>
    </div>

そして、私の js コントローラーは次のようになります。

ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel',
function($scope, PostModel) {

    $scope.uploadPostImage = function(contents, completed) {
        console.log(completed);
        alert(contents);
    }

}]);

私が直面している問題は、切り抜き画像がヒットして uploadPostImage が実行され、フォーム全体がアップロードされたときです。望ましい動作ではありませんが、動作させることができます。大きな問題は、「完了」パラメーターが true に戻った場合でも、関数 uploadPostImage の「コンテンツ」パラメーターが常に未定義であるという js にあります。

目標は、トリミング用の画像のみをアップロードすることです。このプロセスで何が間違っていますか?

4

4 に答える 4

63

ファイルをアップロードするための角度に関するドキュメントはほとんどありません。多くのソリューションでは、カスタム ディレクティブやその他の依存関係が必要です (プリミスの jquery... ファイルをアップロードするためだけに...)。何度も試した後、angularjsだけでこれを見つけました（v.1.0.6でテスト済み）

html

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>

Angularjs (1.0.6) は「input-file」タグでng-modelをサポートしていないため、ユーザーから (最終的に) 選択されたすべてのファイルを渡す「ネイティブな方法」で行う必要があります。

コントローラ

$scope.uploadFile = function(files) {
    var fd = new FormData();
    //Take the first selected file
    fd.append("file", files[0]);

    $http.post(uploadUrl, fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success( ...all right!... ).error( ..damn!... );

};

クールな部分は、未定義のcontent-type とtransformRequest: angular.identityで、$http で正しい「コンテンツ タイプ」を選択し、マルチパート データを処理するときに必要な境界を管理する機能を提供します。

于 2013-07-06T16:46:33.593 に答える
19

( ng-uploadの代わりに) ng-file-upload angularjs プラグインを試すことができます。

angularjs の仕様をセットアップして処理するのはかなり簡単です。また、進行、キャンセル、ドラッグ アンド ドロップをサポートし、クロス ブラウザーです。

html

<!-- Note: MUST BE PLACED BEFORE angular.js-->
<script src="ng-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script>
<script src="ng-file-upload.min.js"></script> 

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directives and service.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        data: {myObj: $scope.myModelObj},
        file: file,
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).then(function(response) {
        var data = response.data;
        // file is uploaded successfully
        console.log(data);
      });
    }
  };
}];
于 2013-12-24T19:35:09.240 に答える