使用Angular JS和Cordova上传表单数据和图像(Upload form data & image using Angular JS and Cordova)

我有一个表单，用户可以输入数据，从相机中选择一个图像（使用cordova-plugin-camera插件）并提交表单。

我不知道如何将表单提交给服务器，因此它是POST请求的一部分。

HTML ：

<form name="recommendationForm" ng-submit="submitForm(recommendationForm.$valid)" novalidate> <div class="list"> <label class="item item-input item-stacked-label"> <span class="input-label">Recommendation</span> <textarea name="content" ng-model="formData.content" rows="10" required></textarea> <input type="hidden" name="user_id" ng-value="customer.User.id" /> <input type="hidden" name="customer_id" ng-value="customer.Customer.id" /> <p ng-show="recommendationForm.content.$invalid && !recommendationForm.content.$pristine" class="help-block">Please write something first ...</p> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Image</span><br> <img style="display:none" id="smallImage" src="" class="uploaded-image" ng-model="formData.image" /> <button class="button button-calm" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Foto aus Bibliothek wählen</button> </label> </div> <button type="submit" class="button button-balanced" ng-disabled="recommendationForm.$invalid">Hinzufügen</button> </form>

JS ：

// CAMERA HANDLING // Called when a photo is successfully retrieved function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData; } // Called when a photo is successfully retrieved // function onPhotoURISuccess(imageURI) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = imageURI; } // A button will call this function // function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); } // A button will call this function // function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); } // A button will call this function // function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { setTimeout(function() { // do your thing here! alert('Failed because: ' + message); }, 0); }

JS控制器：

$scope.submitForm = function(isValid) { // check to make sure the form is completely valid if (isValid) { $http({ method : 'POST', url : 'https://www.something.com/api/add.json', data : $('form[name="recommendationForm"]').serialize(), headers : { 'Content-Type': 'multipart/form-data' } }) .success(function(data) { if (data.success == false) { $scope.error = data.message; $scope.message = ""; } else { $scope.message = data.message; $scope.error = ""; } }); } }

我知道如何上传表单数据，并知道如何上传单个图片，但目前我无法将两者结合起来。我怎样才能将表单数据与图像一起上传？

I have a form where a user can enter data, select an image from the camera (using the cordova-plugin-camera plugin) and submit the form.

I am not sure how to submit the form to the server so it is part of the POST request.

HTML:

<form name="recommendationForm" ng-submit="submitForm(recommendationForm.$valid)" novalidate> <div class="list"> <label class="item item-input item-stacked-label"> <span class="input-label">Recommendation</span> <textarea name="content" ng-model="formData.content" rows="10" required></textarea> <input type="hidden" name="user_id" ng-value="customer.User.id" /> <input type="hidden" name="customer_id" ng-value="customer.Customer.id" /> <p ng-show="recommendationForm.content.$invalid && !recommendationForm.content.$pristine" class="help-block">Please write something first ...</p> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Image</span><br> <img style="display:none" id="smallImage" src="" class="uploaded-image" ng-model="formData.image" /> <button class="button button-calm" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Foto aus Bibliothek wählen</button> </label> </div> <button type="submit" class="button button-balanced" ng-disabled="recommendationForm.$invalid">Hinzufügen</button> </form>

JS:

// CAMERA HANDLING // Called when a photo is successfully retrieved function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData; } // Called when a photo is successfully retrieved // function onPhotoURISuccess(imageURI) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = imageURI; } // A button will call this function // function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); } // A button will call this function // function capturePhotoEdit() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); } // A button will call this function // function getPhoto(source) { navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { setTimeout(function() { // do your thing here! alert('Failed because: ' + message); }, 0); }

JS Controller:

$scope.submitForm = function(isValid) { // check to make sure the form is completely valid if (isValid) { $http({ method : 'POST', url : 'https://www.something.com/api/add.json', data : $('form[name="recommendationForm"]').serialize(), headers : { 'Content-Type': 'multipart/form-data' } }) .success(function(data) { if (data.success == false) { $scope.error = data.message; $scope.message = ""; } else { $scope.message = data.message; $scope.error = ""; } }); } }

I know how to upload form data and I know how to upload a single image, but I am currently not able to combine both. How can I upload the form data along with the image?

最满意答案

您可以尝试使用cordova-plugin-filetransfer ：

// !! Assumes variable fileURL contains a valid URL to a text file on the device, // for example, cdvfile://localhost/persistent/path/to/file.txt var win = function (r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); } var fail = function (error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1); options.mimeType = "text/plain"; var params = {}; params.value1 = "test"; params.value2 = "param"; options.params = params; var ft = new FileTransfer(); ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

请注意，为了使用multipart / form-data上载模式，不应定义options.headers["Content-Type"] 。

You can try to use cordova-plugin-filetransfer:

// !! Assumes variable fileURL contains a valid URL to a text file on the device, // for example, cdvfile://localhost/persistent/path/to/file.txt var win = function (r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); } var fail = function (error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1); options.mimeType = "text/plain"; var params = {}; params.value1 = "test"; params.value2 = "param"; options.params = params; var ft = new FileTransfer(); ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

Note that in order to use multipart/form-data upload mode, options.headers["Content-Type"] should not be defined.

更多推荐