我正在尝试使用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'content'参数总是未定义的，即使'completed'参数返回true也是如此。
目标是仅上传图像进行裁剪。我在这个过程中做错了什么？
答案 0 :(得分：59)
上传文件的角度很少 - 没有文档。许多解决方案需要自定义指令其他依赖项（在primis中jquery ...只是为了上传文件...）。经过多次尝试，我发现这只是angularjs（在v.1.0.6上测试）
<强> HTML
<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>
Angularjs（1.0.6）不支持“输入文件”标签上的 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!... );
};
很酷的部分是 undefined 内容类型和 transformRequest：angular.identity ，它们在$ http中为选择正确的“内容类型”提供了能力并管理处理多部分数据时所需的边界。
答案 1 :(得分：19)
您可以尝试ng-file-upload angularjs插件（而不是ng-upload）。
设置和处理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);
});
}
};
}];
答案 2 :(得分：1)
在我的情况下上面提到的方法与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);
}
});
};
答案 3 :(得分：0)
var app = angular.module('plunkr', [])
app.controller('UploadController', function($scope, fileReader) {
$scope.imageSrc = "";
$scope.$on("fileProgress", function(e, progress) {
$scope.progress = progress.loaded / progress.total;
});
});
app.directive("ngFileSelect", function(fileReader, $timeout) {
return {
scope: {
ngModel: '='
},
link: function($scope, el) {
function getFile(file) {
fileReader.readAsDataUrl(file, $scope)
.then(function(result) {
$timeout(function() {
$scope.ngModel = result;
});
});
}
el.bind("change", function(e) {
var file = (e.srcElement || e.target).files[0];
getFile(file);
});
}
};
});
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
};
});
*************** CSS ****************
img{width:200px; height:200px;}
************** HTML ****************
<div ng-app="app">
<div ng-controller="UploadController ">
<form>
<input type="file" ng-file-select="onFileSelect($files)" ng-model="imageSrc">
<input type="file" ng-file-select="onFileSelect($files)" ng-model="imageSrc2">
<!-- <input type="file" ng-file-select="onFileSelect($files)" multiple> -->
</form>
<img ng-src="{{imageSrc}}" />
<img ng-src="{{imageSrc2}}" />
</div>
</div>