AngularJS用ng-upload上傳圖片

Question

我想用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，它上傳整個窗體。不想要的行爲，但我可以讓它工作。最大的問題是在js中，函數uploadPostImage的'contents'參數始終未定義，即使'completed'參數返回爲true。

目標是僅上傳圖像進行裁剪。我在這個過程中做錯了什麼？

Answer 1

上傳文件的角度很少沒有文檔。許多解決方案需要自定義指令的其他依賴（jquery in primis ...只是上傳文件...）。多次嘗試後，我發現這個只有angularjs（在1.0.6版測試）

HTML

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

Angularjs（1.0.6）不支持在「輸入NG-模型文件「標籤，所以你必須以」本地方式「來傳遞用戶所有（最終）選擇的文件。

控制器

$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!...); 

}; 

涼爽的部分是不確定的內容型和transformRequest：angular.identity，讓在$ HTTP選擇權的能力「內容類型「並處理處理多部分數據時所需的邊界。

Answer 2

你可以試試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', ['angularFileUpload']); 

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)); 
     }).success(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    }; 
}]; 

Answer 3

在我的情況下上述方法做工精細用PHP，但是當我嘗試與node.js的這些方法上傳文件，然後我有一些問題。 因此，而不是使用$ http（{..，..，...}）使用正常的jquery ajax。

對於特定文件，請使用此

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

並在控制器

$scope.uploadFile = function(element) { 
var data = new FormData(); 
data.append('file', $(element)[0].files[0]); 
jQuery.ajax({ 
     url: 'brand/upload', 
     type:'post', 
     data: data, 
     contentType: false, 
     processData: false, 
     success: function(response) { 
     console.log(response); 
     }, 
     error: function(jqXHR, textStatus, errorMessage) { 
     alert('Error uploading: ' + errorMessage); 
     } 
}); 
}; 

Answer 4

錯誤上載文件： 「容器沒有方法處理POST」

App.service('fileUpload', ['$http', function($http) { 
    this.uploadFileToUrl = function(file, uploadUrl) { 
     console.log("inside upload file service js "); 
     var fd = new FormData(); 
     fd.append('file', file); 

     $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: { 
        'Content-Type': undefined 
       } 
      }) 
      .success(function(response) { 

       console.log("file uploaded sucessfully " + response); 

      }) 
      .error(function(error) { 

       console.log("Error while uploading file " + JSON.stringify(error)); 
      }); 
    } 
}]); 

{「錯誤「：{」name「：」Error「，」status「：404，」message「：」Shared class \「container \」沒有方法處理「POST/5555-1111」，「statusCode」：404，「stack」：「錯誤：