从角度控制器发送带有文本框的多个图像数据 [英] send multiple image data with textbox from angular controller
本文介绍了从角度控制器发送带有文本框的多个图像数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将带有文本框值的多个图像数据发送到服务器端(PHP).我已经完成了多个图像上传,但是在提交表单时我无法将我的数据发送到服务器端.我的视图代码如下
<input type="submit"></form>
在我的控制器中
app.directive('fileUpload', function() {返回 {scope: true,//创建一个新的作用域链接:功能(范围,EL,属性){el.bind('change', function(event) {var 文件 = event.target.files;//迭代文件,因为可以在元素上指定multiple"for (var i = 0; i
当我点击提交按钮时,我想发送图像名称和图像的相应注释.我如何通过 api cal 为 php.in 我的 save() 函数代码发送数据
$scope.save = function(){console.log($scope.files)console.log($scope.comments)}
解决方案
需要使用$http
服务向服务器发送图片
$scope.save = function() {var fd = new FormData();fd.append('file', $scope.files);$http.post('uploadUrl', fd, {变换请求:angular.identity,标题:{'内容类型':未定义}}).then(函数(响应){}).catch(函数(响应){});}
i want to send multiple image data with textbox value to server side(PHP).i have done multiple image upload but i am not able to send my data to server side when submitting form.my view code is below
<form ng-submit="save()"><input type="file" file-upload multiple>
<div ng-repeat="step in files">
<img ng-src="{{step}}" />{{step.name}}
<input type="text" ng-model="comments">
</div>
<input type="submit"></form>
in my controller
app.directive('fileUpload', function() {
return {
scope: true, //create a new scope
link: function(scope, el, attrs) {
el.bind('change', function(event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0; i < files.length; i++) {
//emit event upward
scope.$emit("fileSelected", {
file: files[i]
});
}
});
}
};
});
app.controller('mainCtrl', function($scope) {
$scope.files = [];
$scope.$on("fileSelected", function(event, args) {
var item = args;
$scope.files.push(item);
var reader = new FileReader();
reader.addEventListener("load", function() {
$scope.$apply(function() {
item.src = reader.result;
});
}, false);
if (item.file) {
reader.readAsDataURL(item.file);
}
});
});
when i click submit button i want to send image name with corresponding comments for the image.how could i send the data through api cal for php.in my save() function code looks below
$scope.save = function()
{
console.log($scope.files)console.log($scope.comments)
}
解决方案
you need to use the $http
service to send images to the server
$scope.save = function() {
var fd = new FormData();
fd.append('file', $scope.files);
$http.post('uploadUrl', fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
.then(function(response) {})
.catch(function(response) {});
}
这篇关于从角度控制器发送带有文本框的多个图像数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文