Multipart Formulaire d'Upload d'Image et Json

Peu coincé sur ce point, besoin de télécharger une image et json à l'aide d'un formulaire multipart.. ne sais pas comment faire pour envoyer le type de contenu des en-têtes ou télécharger l'image.. pense que j'ai besoin de les convertir à goutte.. pour le moment je suis tout à fait d'envoyer les données-je obtenir à partir du fichier d'entrée.

toute suggestion serait grand merci

        $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!");

    });
  • tout d'abord, vous devez définir type multipart. Voir à ce sujet: stackoverflow.com/questions/16958448/... stackoverflow.com/questions/5392344/...
  • Im en utilisant angularjs, c'est comment avez-vous mis en place un formulaire multipart.. comme im obtenir le bon de sortie.. Juste ne peut pas sembler joindre l'image et de définir le type de contenu pour chaque partie
  • Ma compréhension est que vous ne pouvez pas le faire. J'ai l'habitude de télécharger le fichier/s en premier et ensuite utiliser l'identifiant/s retourné pour ensuite envoyer le json. Jetez un oeil à ceci
InformationsquelleAutor user3355603 | 2015-01-19
  1. 7
    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
    vérifiez le post d'en-tête dans firebug, vous trouverez qu'il affiche l'image dans une forme cryptée et des données à la fin de celui-ci.

    • Merci, tordu vous code un peu, mais me mettre dans la bonne direction.. merci pour votre aide...
    InformationsquelleAutor squiroid
  2. -1

    Utilisation formData comme conteiner comme dis @squiroid

    Dans le code html

    <form ng-submit="vm.uploadFile()">
<input type="file" id="filePhoto" name="file">
<button type="submit">Save</button>
</form>
{{vm.previewImage()}}

    Dans mon contrôleur

    vm.previewImage = previewImage;
function previewImage(){
console.info("vm.file "+vm.file);
var imageLoader = document.getElementById('filePhoto');
console.info(imageLoader);
imageLoader.addEventListener('change', handleImages, false);
function handleImages(e) {
console.info("entra handleImage");
vm.file = e.target.files[0];
console.info("archivo ");
console.info(vm.file);
}
}
vm.uploadFile = uploadFile;
function uploadFile() {
return dataFactory.uploadFile(
vm.file)
.then(function successCallback(response) {
console.info('uploadFile success');
console.info(response);
}, function errorCallback(response) {
console.info('updauploadFileteUser fail');
console.info(response);
});
}

    Dans DataFactory

    function updateUser(token,file,username,email,lenguaje,colapsarMenu){
var formData=new FormData();
formData.append('file',file);
//append more params if you want
return $http
.post('/uploadFile',
formData,{
transformRequest:angular.identity,
headers: {
//Optional token bearer 'Authorization': 'Bearer '+token,
'Content-type':undefined
}
});
}
    InformationsquelleAutor Samuel Ivan