多重表单上传图片和JSON [英] Multipart Form Upload Image and Json
本文介绍了多重表单上传图片和JSON的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
位停留在这一块，需要上传图片和JSON一起使用一个多形式..不知道如何发送的内容类型标题或上传图片..想我需要转换为BLOB ..此刻我只是送我从文件输入字段中获取数据。
任何建议将是巨大的感谢
$ HTTP（{
方法：POST，
网址：网址，
标题：{内容类型：虚假}， transformRequest：功能（数据）{ 的console.log（数据）; VAR FORMDATA =新FORMDATA（）;
formData.append（formatteddata，angular.toJson（data.model））;
formData.append（'媒体'，图像） 返回FORMDATA;
}， 数据：{型号：shoutoutData，图像：shoutoutImage}
}）。
成功（功能（数据，状态，头，配置）{ 警报（成功！）; }）。
错误（功能（数据，状态，头，配置）{ 警报（失败！）; }）;
解决方案
这里是code，我所做的在我的项目上载图像和数据： -
HTML页： -
＆LT;形式的作用=形式NAME =myForm会NG提交=submitCuisine（myForm的$有效）。NOVALIDATE＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：。myForm.name $无效和放大器;＆安培; myForm.name $感动}＆GT;
＆LT;标签=名与GT;名称和LT; /标签＆gt;
＆LT;输入类型=文本级=表格控ID =名称NAME =名
占位=美食名NG-模式=dataform.name要求＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：。myForm.description $无效和放大器;＆安培; myForm.description $感动}＆GT;
＆LT;标签=描述＆GT;说明与LT; /标签＆gt;
＆LT;输入类型=文本级=表格控ID =说明NAME =说明
占位=描述的美食NG模型=dataform.description要求＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：。myForm.category $无效和放大器;＆安培; myForm.category $感动}＆GT;
＆LT;标签=描述＆GT;分类和LT; /标签＆gt;
＆LT;选择类=表格控NG模型=dataform.categoryID =类别NAME =类别要求＆GT;
＆LT;选项＆GT;＆贴贴LT; /选项＆GT;
＆LT;选项＆GT;非蔬菜＆LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：。myForm.subcategory $无效和放大器;＆安培; myForm.subcategory $感动}＆GT;
＆LT;标签=描述＆GT;子类别＆LT; /标签＆gt;
＆LT;选择类=表格控NG模型=dataform.subcategoryID =子类别NAME =子类别要求＆GT;
＆LT;选项＆GT;主菜＆LT; /选项＆GT;
＆LT;选项＆GT;＆本州LT; /选项＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：。myForm.price $无效和放大器;＆安培; myForm.price $感动}＆GT;
＆LT;标签=描述＆GT;价格＆LT; /标签＆gt;
＆LT;跨度类=发发美元的＆GT;＆LT; / SPAN＆GT;
＆LT;输入类型=数字级=表格控ID =价格NAME =价格
占位=价格NG模型=dataform.price要求＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=描述＆GT;形象和LT; /标签＆gt;
＆LT;输入类型=文件的文件输入=文件NAME =文件/＆GT;
＆LT; / DIV＆GT;
＆LT;按钮类=BTN BTN-主要TYPE =提交NG-禁用=myForm会$无效的。＆GT;提交＆LT; /按钮＆GT;
＆LT; /表及GT;控制器： -
$ scope.submitCuisine =功能（的isValid）{
如果（的isValid）{
变种FD =新FORMDATA（）;
angular.forEach（$ scope.files，功能（文件）{
fd.append（文件，文件）;
}）; fd.append（'FORMDATA'，JSON.stringify（$ scope.dataform））; $ http.post（管理/ managecuisineAdd'，FD {
transformRequest：angular.identity，
标题：{'内容类型'：未定义}
}）。成功（功能（数据）{
$ scope.status =数据;
$ scope.itemlist.push（数据）
$ scope.message =新菜成功添加
}）;
}
}指令： -
myApp.directive（的FileInput，['$解析'，函数（$解析）{
返回{
限制：'A'，
链接：功能（范围，ELE，ATTRS）{
ele.bind（'变'，函数（）{
$解析（attrs.fileInput）。
分配（范围，ELE [0] .files）
范围。$适用（）
}）;
}
}
}]）;
Plunker： - http://plnkr.co/edit/yPNA0ij3Dn37tsI9w7Z2?p= preVIEW
检查后头球萤火你会发现，它显示在它的结束以加密格式和数据图像。
Bit stuck on this one, need to upload an image and json together using a multipart form.. not sure how to sent the content type headers or upload the image.. think i need to convert to blob.. at the moment im just sending the data i get from the file input field.
any suggestion would be great thanks
$http({
method: 'POST',
url: URL,
headers: { 'Content-Type': false },
transformRequest: function (data) {
console.log(data);
var formData = new FormData();
formData.append("formatteddata", angular.toJson(data.model));
formData.append('media', Image)
return formData;
},
data: { model: shoutoutData, image: shoutoutImage}
}).
success(function (data, status, headers, config) {
alert("success!");
}).
error(function (data, status, headers, config) {
alert("failed!");
});
解决方案
Here is the code what i did in my project to upload image and data:-
HTML PAGE :-
<form role="form" name="myForm" ng-submit="submitCuisine(myForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && myForm.name.$touched }">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name"
placeholder="Name of cuisine" ng-model="dataform.name" required>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.description.$invalid && myForm.description.$touched }">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" name="description"
placeholder="Description for cuisine" ng-model="dataform.description" required>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.category.$invalid && myForm.category.$touched }">
<label for="description">Category</label>
<select class="form-control" ng-model="dataform.category" id="category" name="category" required>
<option>Veg</option>
<option>Non-veg</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.subcategory.$invalid && myForm.subcategory.$touched }">
<label for="description">Sub-Category</label>
<select class="form-control" ng-model="dataform.subcategory" id="subcategory" name="subcategory" required>
<option>Main Course</option>
<option>Staters</option>
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' : myForm.price.$invalid && myForm.price.$touched }">
<label for="description">Price</label>
<span class="fa fa-dollar"></span>
<input type="number" class="form-control" id="price" name="price"
placeholder="Price" ng-model="dataform.price" required>
</div>
<div class="form-group">
<label for="description">Image</label>
<input type="file" file-input="files" name="file"/>
</div>
<button class="btn btn-primary" type="submit" ng-disabled="myForm.$invalid"> Submit</button>
</form>
Controller:-
$scope.submitCuisine=function(isvalid){
if(isvalid){
var fd=new FormData();
angular.forEach($scope.files,function(file){
fd.append('file',file);
});
fd.append('formdata',JSON.stringify($scope.dataform));
$http.post('admin/managecuisineAdd',fd,{
transformRequest:angular.identity,
headers:{'Content-type':undefined}
}).success(function(data){
$scope.status=data;
$scope.itemlist.push(data)
$scope.message="New Dish Added Successfully"
});
}
}
Directive :-
myApp.directive("fileInput",['$parse',function($parse){
return{
restrict:'A',
link:function(scope,ele,attrs){
ele.bind('change',function(){
$parse(attrs.fileInput).
assign(scope,ele[0].files)
scope.$apply()
});
}
}
}]);
Plunker:- http://plnkr.co/edit/yPNA0ij3Dn37tsI9w7Z2?p=preview check the post header in firebug you will find that it is showing image in encrypted form and data in the end of it.
这篇关于多重表单上传图片和JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
