使用AngularJS上传文件
以下是我的HTML表单：
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>我想从本地机器上传一个图像，并希望读取上传文件的内容。所有这些我都想用AngularJS来做。
当我试图打印$scope.file的值时，它是未定义的。
回答 28
Stack Overflow用户
发布于 2013-12-10 21:50:00
这里的一些答案建议使用FormData()，但不幸的是，这是Internet 9及更低版本中不可用的浏览器对象。如果您需要支持那些旧的浏览器，您将需要一个备份策略，例如使用<iframe>或Flash。
已经有许多Angular.js模块可以执行文件上传。这两种浏览器对旧浏览器都有明确的支持：
- https://github.com/leon/angular-upload -使用iframes作为后盾
- https://github.com/danialfarid/ng-file-upload -使用FileAPI/Flash作为后盾
还有其他一些选择：
- https://github.com/nervgh/angular-file-upload/
- https://github.com/uor/angular-file
- https://github.com/twilson63/ngUpload
- https://github.com/uploadcare/angular-uploadcare
其中一个应该适合您的项目，或者可以让您了解如何自己编写代码。
Stack Overflow用户
发布于 2014-03-20 16:08:01
最简单的方法是使用HTML5 API，即FileReader。
HTML非常简单：
<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>在控制器中定义'add‘方法：
$scope.add = function() {
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e) {
var data = e.target.result;
//send your binary data via $http or $resource or do anything else with it
}
r.readAsBinaryString(f);
}浏览器兼容性
桌面浏览器
Edge 12，Firefox(壁虎) 3.6(1.9.2)，Chrome 7，Opera* 12.02，Safari 6.0.2
移动浏览器
Firefox(壁虎) 32，Chrome 3，Opera* 11.5，Safari 6.1
注意:不推荐使用readAsBinaryString()方法，而应该使用https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer。
Stack Overflow用户
发布于 2015-08-17 18:32:31
这是现代浏览器的方式，没有第三方图书馆。适用于所有最新的浏览器。
app.directive('myDirective', function (httpPostFactory) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attr) {
element.bind('change', function () {
var formData = new FormData();
formData.append('file', element[0].files[0]);
httpPostFactory('upload_image.php', formData, function (callback) {
// recieve image name to use in a ng-src
console.log(callback);
});
});
}
};
});
app.factory('httpPostFactory', function ($http) {
return function (file, data, callback) {
$http({
url: file,
method: "POST",
data: data,
headers: {'Content-Type': undefined}
}).success(function (response) {
callback(response);
});
};
});HTML：
<input data-my-Directive type="file" name="file">PHP：
if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
// uploads image in the folder images
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);
// give callback to your angular code with the image src name
echo json_encode($newfilename);
}js小提琴(仅前端) https://jsfiddle.net/vince123/8d18tsey/31/
https://stackoverflow.com/questions/18571001
复制相似问题
腾讯云开发者
