关键词：
【中文标题】AngularJS 使用 ng-upload 上传图片【英文标题】：AngularJS Uploading An Image With ng-upload 【发布时间】：2013-06-17 11:55:18 【问题描述】：我正在尝试使用 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。
我们的目标是只上传一张图片进行裁剪。在这个过程中我做错了什么？
【问题讨论】：
访问这里通过 Angular 获取简单的图片上传教程。它真的帮助了我tutorialspoint.com/angularjs/angularjs_upload_file.htm 注意这个问题与ng-upload 库有关。不是ng-file-upload 库。 【参考方案1】：几乎没有关于上传文件的 Angular 文档。许多解决方案需要自定义指令其他依赖项（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 能够选择正确的“内容类型”并管理处理多部分数据时所需的边界。
【讨论】：
我可以在这里连同 fd 一起发送一些 JSON 数据吗？在 fd 我总是得到空值，但文件 [0] 在那里。有什么问题 您使用的是此处发布的代码吗？无论如何关于发送 json 数据，实际上还不知道：p 最好在这个主题上发布一个新答案。 在我开发php之前已经很久了，无论如何这与使用文件“文件”构建表单然后在“uploadUrl”处使用POST提交的效果相同。 @StenMuchow 遗憾的是，'file' 似乎还不支持与 ng-change github.com/angular/angular.js/issues/1375的绑定 答案是针对 AngularJS 1.0.6 给出的。 Angular 1.2.26 或 1.3 现在有更好的东西吗？文档仍然没有提供更好的解决方法。【参考方案2】：你可以试试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);
);
;
];
【讨论】：
【参考方案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);
);
;
【讨论】：
这个答案使用 jQuery 而不是ng-file-upload 或 AngularJS $http 服务。
@Tek Raj Pant 你有什么想法吗？我如何在上面的 html 部分给出默认图像。我想默认设置一个图像，这样我的按钮就可以安全地保存工作，而无需调用或不调用 onchange【参考方案4】：
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 ****************
imgwidth: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>
【讨论】：
如何使用 AngularJS 将文件上传到 Google Drive
】如何使用AngularJS将文件上传到GoogleDrive【英文标题】：HowtouploadfiletoGoogleDrivewithAngularJS【发布时间】：2015-12-1110:07:12【问题描述】：我卡住了，我无法使用AngularJS将文件上传到GoogleDrive。现在我的客户想知道他们想使用AngularJS将... 查看详情
使用 AngularJS 上传文件
】使用AngularJS上传文件【英文标题】：FileUploadusingAngularJS【发布时间】：2013-09-0510:21:53【问题描述】：这是我的HTML表单：<formname="myForm"ng-submit=""><inputng-model=\'file\'type="file"/><inputtype="submit"value=\'Submit\'/></for 查看详情
使用 AngularJS 和 SpringMVC 进行多部分文件上传
】使用AngularJS和SpringMVC进行多部分文件上传【英文标题】：MultipartFileUploadusingAngularJSandSpringMVC【发布时间】：2017-07-2900:45:09【问题描述】：我是angularJS的新手，并尝试使用angularJS和SpringMVC上传文件，但无法获得所需的解决方案并... 查看详情
AngularJS：使用 $resource 上传文件（解决方案）
】AngularJS：使用$resource上传文件（解决方案）【英文标题】：AngularJS:Uploadfilesusing$resource(solution)【发布时间】：2014-02-0215:27:20【问题描述】：我正在使用AngularJS与RESTful网络服务进行交互，使用$resource来抽象暴露的各种实体。其... 查看详情
如何在angularjs中使用ng-file上传裁剪和上传图像
】如何在angularjs中使用ng-file上传裁剪和上传图像【英文标题】：Howtocropanduploadaimageusingng-fileuploadinangularjs【发布时间】：2015-12-0114:04:24【问题描述】：您好，我正在尝试裁剪图像并使用angularjs中的ng-file上传来上传图像。裁剪后... 查看详情
angularjs使用$httppost上传文件的时候，怎样获取文件上传的进度
参考技术A对比一下文件大小 查看详情
AngularJS：如何使用多部分表单实现简单的文件上传？
】AngularJS：如何使用多部分表单实现简单的文件上传？【英文标题】：AngularJS:howtoimplementasimplefileuploadwithmultipartform?【发布时间】：2012-12-0710:23:40【问题描述】：我想从AngularJS到node.js服务器做一个简单的多部分表单发布，表单的... 查看详情
在上传 Angularjs 之前预览图片
】在上传Angularjs之前预览图片【英文标题】：PreviewImagebeforeuploadingAngularjs【发布时间】：2013-09-1606:56:57【问题描述】：您好，我想知道在使用angularjs上传图片之前是否可以预览图片？我正在使用这个库。https://github.com/danialfarid/an... 查看详情
使用 AngularJS 和 ASP.NET Web API 上传/下载字节数组
】使用AngularJS和ASP.NETWebAPI上传/下载字节数组【英文标题】：Uploading/DownloadingByteArrayswithAngularJSandASP.NETWebAPI【发布时间】：2014-11-1806:50:12【问题描述】：我花了几天时间研究和研究上传/下载byte[]的解决方案。我很接近，但还有一... 查看详情
使用 angularjs 中的图像视图、裁剪和上传创建用于图像上传的 md 对话框
】使用angularjs中的图像视图、裁剪和上传创建用于图像上传的md对话框【英文标题】：Createamd-dialogboxforimageuploadwithimageview,cropanduploadinangularjs【发布时间】：2016-07-1319:24:38【问题描述】：我想使用Angular材质创建一个md对话框，其... 查看详情
无法上传文件，php和angularjs
】无法上传文件，php和angularjs【英文标题】：Can\'tuploadfiles,phpandangularjs【发布时间】：2014-11-2113:33:40【问题描述】：我正在尝试使用angularJs和PHP上传文件。我正在使用angular-file-upload，https://github.com/danialfarid/angular-file-upload。问题... 查看详情
在 MVC .net 核心中使用 Angularjs 上传文件和数据
】在MVC.net核心中使用Angularjs上传文件和数据【英文标题】：UploadFileandDatawithAngularjsinMVC.netcore【发布时间】：2021-09-1914:01:31【问题描述】：<inputtype="file"ng-model="ch.FileName"id="file"name="myFile"nchange="angular.element(this).scope().saveC 查看详情
angularjs上传图片
上传图片需要引入插件ngFileUpload，使用bower安装方法：bowerinstall ng-file-upload--save,安装后需要在命名app的名字js文件中注入，如下所示：(function(){angular.module(‘app‘,[‘ionic‘,‘ngStorage‘,‘ngFileUpload‘]);})();在相应的html中引入... 查看详情
nodejs + multer + angularjs 无需重定向即可上传
】nodejs+multer+angularjs无需重定向即可上传【英文标题】：nodejs+multer+angularjsforuploadingwithoutredirecting【发布时间】：2016-01-0214:32:18【问题描述】：我正在使用Nodejs+Multer+angularjs在服务器上上传文件。我有一个简单的HTML文件：<formact... 查看详情
以角度上传多个文件
...必须在单击保存按钮时立即提交所有这些文件。我有点被ng-upload卡住了，它需要一个api调用，而且我真的不能对这个 查看详情
angularjs使用$httppost上传文件的时候，怎样获取文件上传的进度
angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法，所以可以直接这样写：$http(method:'POST',url:url,eventHandlers:progress:function(c)console.log('Progress->'+c);console.log(c);,uploadEventHandlers:progress:function(e)co... 查看详情
带有文件上传的AngularJs Ajax POST表单
】带有文件上传的AngularJsAjaxPOST表单【英文标题】：AngularJsAjaxPOSTformwithfileupload【发布时间】：2013-10-2501:33:53【问题描述】：我正在尝试设置一个表单，以使用ajax请求提交给已经使用Ajax构建的api。出于某种原因，文件只是不想传... 查看详情
在Laravel中通过AngularJs上传文件时获取值为null
】在Laravel中通过AngularJs上传文件时获取值为null【英文标题】：GettingvaluenullwhileuploadingfilethroughAngularJsinLaravel【发布时间】：2020-02-2704:32:19【问题描述】：当我尝试在AngularJs中使用POST请求上传文件时，我无法上传文件，因为它显... 查看详情