我正在使用 Angular 文件上传。
http://plnkr.co/edit/qLckEIlNLEcIfvwn4Q5x?p=preview
我想在上传文件时进行上传预览。 你能给我什么建议吗? HTML 代码如下:
<div class="form-group">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select to Upload file</span>
<input id="fileupload" file-upload="fileUploadOptions" type="file" name="attData" multiple data-sequential-uploads="true" />
</span>
</div>
这是我的 Controller :
angular.module("myapp", ["ngAnimate", "ngSanitize", "ui.bootstrap"])
.controller("Ctrl", function($scope, $modal, $log) {
$scope.openModal = function() {
$log.log("opening modal");
var modURL = "modalwindow.html";
var theModal = $modal.open({
scope: $scope,
templateUrl: modURL,
controller: 'detailController',
size: 'lg'
});
theModal.opened.then(function() {
$log.log("modal opened");
});
};
})
.controller('detailController', function($scope, $modalInstance) {
$scope.fileUploadOptions = {
notetext: "text",
progress: 0
};
$scope.closeModal = function() {
$modalInstance.close();
};
})
.directive('fileUpload', function($log, $parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var options = $parse(attrs.fileUpload)(scope) || {};
element.fileupload({
dataType: 'json',
url: '//jquery-file-upload.appspot.com/',
done: function(e, data) {
$log.log("done accessed");
},
fail: function(e, data) {
$log.log("fail accessed");
},
progress: function(e, data) {
options.progress = parseInt(data.loaded / data.total * 100, 10);
scope.$apply();
$log.log(options)
$log.log("progress");
},
//add: function(e,data){
//$log.log("add accessed");
//},
submit: function(e, data) {
$log.log("notetext:", options.notetext);
data.formData = {
Description: options.notetext
};
$log.log("submit accessed");
}
});
}
}
});
有人知道预览图像的编码吗?谢谢
最佳答案
我已经调整了 this StackOverflow question 中提供的解决方案根据您的情况,它使用名为 fileReader
的服务:
submit: function(e, data) {
$log.log("notetext:", options.notetext, data);
scope.file = data.files[0]
data.formData = {
Description: options.notetext
};
fileReader.readAsDataUrl(scope.file, scope)
.then(function(result) {
scope.imageSrc = result;
})
$log.log("submit accessed");
}
检查此Plunker中的代码更改.
在下图中,您可以看到图像上传的结果:
关于angularjs - 如何在 AngularJS 中预览上传的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36787730/