嗨,我想知道在使用 angularjs 上传图像之前是否有办法预览图像?我正在使用这个库。 https://github.com/danialfarid/angular-file-upload
谢谢。这是我的代码:
模板.html
<div ng-controller="picUploadCtr">
<form>
<input type="text" ng-model="myModelObj">
<input type="file" ng-file-select="onFileSelect($files)" >
<input type="file" ng-file-select="onFileSelect($files)" multiple>
</form>
</div>
Controller .js
.controller('picUploadCtr', function($scope, $http,$location, userSettingsService) {
$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];
$http.uploadFile({
url: 'server/upload/url', //upload.php script, node.js route, or servlet uplaod url)
data: {myObj: $scope.myModelObj},
file: $file
}).then(function(data, status, headers, config) {
// file is uploaded successfully
console.log(data);
});
}
}
最佳答案
OdeToCode posted great service对于这个东西。因此,通过这个简单的指令,您可以轻松预览甚至看到进度条:
.directive("ngFileSelect",function(){
return {
link: function($scope,el){
el.bind("change", function(e){
$scope.file = (e.srcElement || e.target).files[0];
$scope.getFile();
});
}
}
它适用于所有现代浏览器!
关于ajax - 上传 Angularjs 之前预览图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18754943/