如何在angularjs和php中通过webservice上传图像 [英] How to upload image through webservice in angularjs and php
问题描述
我正在使用AngularJS for mobile应用程序开发Web服务，我必须在其中上传图像，已经在Web应用程序中完成了图像上传，但是如何使用AngularJS和PHP在Webservice中上传图像?我为此花了十多个小时，现在我急需帮助.
下面是我的代码.
var app = angular.module('myApp'，['ngRoute'，'ngFileUpload']);app.service('fileUpload'，['$ http'，function($ http){this.uploadFileToUrl =函数(文件，uploadUrl){var fd = new FormData();fd.append('file'，file);$ http.post(uploadUrl，fd，{transformRequest:angular.identity，标头:{'Content-Type':未定义}}).success(function(){}).error(function(){});}}]);app.directive('fileModel'，['$ parse'，function($ parse){返回 {限制:"A"，链接:函数(作用域，元素，属性){var model = $ parse(attrs.fileModel);var modelSetter = model.assign;element.bind('change'，function(){scope.$ apply(function(){modelSetter(scope，element [0] .files [0]);});});}};}]);app.config(['$ routeProvider'，函数($ routeProvider){$ routeProvider.when('/signup'，{标题:注册"，templateUrl:"partials/registration_form.html"，//控制器:"signupCtrl"});}]).run(function($ rootScope，$ location，Data，$ templateCache){$ rootScope.$ on("$ viewContentLoaded"，function(){$ templateCache.removeAll();});});app.controller('signupCtrl'，['$ scope'，'Data'，'$ upload'，'$ http'，'fileUpload'，函数($ scope，Data，$ upload，$ http，fileUpload){$ scope.postForm =函数(文件，用户){Data.post('signup.php'，{obj:user}).then(function(results){//Data.post('signup.php'，{obj:$ location.search()}).then(function(results){如果(results.status =="0"){$ scope.formUpload = true;if(文件！= null){$ scope.uploadFile(file);}}$ scope.result =结果；});//uploadUsing $ upload(file，user);}$ scope.uploadFile =函数(文件){var uploadUrl =上传/用户";fileUpload.uploadFileToUrl(file，uploadUrl);};}]); 我已经创建了一个演示表单来测试图像上传
< div ng-controller ="signupCtrl">< form name ="userForm" ng-submit ="postForm(vImage，obj)" role ="form">< table>< tr>< td>名字</td>< td><输入type ="text" ng-model ="obj.vFirst"></td></tr>< tr>< td>姓氏</td>< td><输入type ="text" ng-model ="obj.vLast"></td></tr>< tr>< td>电子邮件</td>< td><输入type ="text" ng-model ="obj.vEmail"></td></tr>< tr>< td> vPassword</td>< td><输入type ="text" ng-model ="obj.vPassword"></td></tr>< tr>< td> eGender</td>< td>男性:< input type ="radio" ng-model ="obj.eGender" name ="eGender" value ="Male">女性:< input type ="radio" ng-model ="obj.eGender" name ="eGender" value ="Female"></td></tr>< tr>< td>图片</td>< td><输入类型=文件" file-model ="vImage" name ="vImage" accept ="image/*"</td></tr>< tr>< td> Dob</td>< td><输入type ="text" ng-model ="obj.vDob"></td></tr>< tr>< td>电话</td>< td><输入type ="text" ng-model ="obj.vPhone"></td></tr>< tr>< td>地址</td>< td>< textarea type ="text" ng-model ="obj.tAddress"></textarea</td></tr>< tr>< td>城市</td>< td><输入type ="text" ng-model ="obj.vCity"></td></tr>< tr>< td>国家</td>< td><输入type ="text" ng-model ="obj.vCountry"></td></tr>< tr>< td colspan ="2"><输入类型="submit" value =提交表单"></td></tr></table></form></div> 我已经尝试过这种方法以及其他许多解决方案，但是没有运气...
https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
如果我确定这种不正确的方式，请让我知道创建Web服务的正确方法.
在我目前正在从事的项目中，我使用了以下组件: https://github.com/nervgh/angular-file-upload 我可以诚实地说它的工作正常.
这是一个有效的示例 http://nervgh.github.io/pages/angular-file-upload/examples/simple/，这是一个使用 PHP 作为后端 您的HTML将如下所示 一旦您从弹出窗口中选择一个文件，然后单击确定"，上传就会开始.而且，如果您想提供加载栏或其他功能，此插件还为您提供了下载的每个步骤的钩子 示例: 您还可以通过将文件添加到队列中并仅在 form commit 上触发上传来控制文件.您可以将 并手动触发上传，如下所示: API参考: https://github.com/nervgh/angular-file-upload/wiki/Module-API 希望这会有所帮助. I am working on webservice using AngularJS for mobile application where I have to upload image, I have done Image uploading in web application, but how do I upload an image in webservice using AngularJS and PHP ? I have spent more then 10 hrs for this and now I need help badly. Bellow is my code. I have created one demo form to testing image upload I have tried this and many other solutions but no luck... :( https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs Please let me know the proper way to create webservice if I have crated this one improper way. On the project I'm currently working on I've used this component:
https://github.com/nervgh/angular-file-upload I can honestly said it did it's job ok. Here's a working example http://nervgh.github.io/pages/angular-file-upload/examples/simple/ and here's a working sample using PHP as the back-end https://github.com/nervgh/angular-file-upload/tree/master/examples/simple Your angularjs controller will simply contain an instance of And your HTML will look like this once you will select a file from the pop up and click ok the upload will pretty much start. And this plugin also offers you hooks on every step of the download if you want to provide a loading bar or something Example: You can also control your file by adding it to a queue and trigger the upload only on form submit. You can set the and trigger the upload manually like so: API Ref: https://github.com/nervgh/angular-file-upload/wiki/Module-API Hope this helps. 这篇关于如何在angularjs和php中通过webservice上传图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
<输入id ="image-upload-input" class ="hide" name ="image" nv-file-select =" uploader ="uploader" type ="file"/>
uploader.onAfterAddingFile = function(){scope.uploading = true;progressbar.width('0％');};uploader.onProgressItem =函数(文件项，进度){var progressBar = element.find('.progressbar');progressBar.width(进度+'％');scope.uploading = fileitem.isUploading;};uploader.onSuccessItem = function(fileitem){scope.uploading = fileitem.isUploading;scope.$ broadcast('image :: uploaded'，'test');};uploader.onCompleteItem = function(fileitem){scope.uploading = fileitem.isUploading;}; autoupload 属性设置为false，如下所示:
$ scope.uploader = new FileUploader({网址:imageModel.getUploadURL()，别名:"image"，autoUpload:否});
$ scope.uploader.uploadAll(); var app = angular.module('myApp', ['ngRoute', 'ngFileUpload']);
app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function (file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function () {
})
.error(function () {
});
}
}]);
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/signup', {
title: 'signup',
templateUrl: 'partials/registration_form.html',
// controller: 'signupCtrl'
})
;
}])
.run(function ($rootScope, $location, Data, $templateCache) {
$rootScope.$on("$viewContentLoaded", function () {
$templateCache.removeAll();
});
});
app.controller('signupCtrl', ['$scope', 'Data', '$upload', '$http', 'fileUpload', function ($scope, Data, $upload, $http, fileUpload) {
$scope.postForm = function (file, user) {
Data.post('signup.php', {obj: user}).then(function (results) {
// Data.post('signup.php', {obj: $location.search()}).then(function (results) {
if (results.status == "0") {
$scope.formUpload = true;
if (file != null) {
$scope.uploadFile(file);
}
}
$scope.result = results;
});
//uploadUsing$upload(file, user);
}
$scope.uploadFile = function (file) {
var uploadUrl = "upload/user";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
<div ng-controller="signupCtrl">
<form name="userForm" ng-submit="postForm(vImage,obj)" role="form">
<table>
<tr>
<td>First Name</td>
<td><input type="text" ng-model="obj.vFirst"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" ng-model="obj.vLast"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" ng-model="obj.vEmail"></td>
</tr>
<tr>
<td>vPassword</td>
<td><input type="text" ng-model="obj.vPassword"></td>
</tr>
<tr>
<td>eGender</td>
<td>Male: <input type="radio" ng-model="obj.eGender" name="eGender" value="Male"> Female: <input type="radio" ng-model="obj.eGender" name="eGender" value="Female"></td>
</tr>
<tr>
<td>Image</td>
<td><input type="file" file-model="vImage" name="vImage" accept="image/*"></td>
</tr>
<tr>
<td>Dob</td>
<td><input type="text" ng-model="obj.vDob"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" ng-model="obj.vPhone"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea type="text" ng-model="obj.tAddress">
</textarea></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" ng-model="obj.vCity"></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text" ng-model="obj.vCountry"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit Form">
</td>
</tr>
</table>
</form>
</div>
FileUplaoder$scope.uploader = new FileUploader({
url: 'upload.php'
});
<input id="image-upload-input" class="hide" name="image" nv-file-select="" uploader="uploader" type="file" />
uploader.onAfterAddingFile = function() {
scope.uploading = true;
progressbar.width('0%');
};
uploader.onProgressItem = function(fileitem, progress) {
var progressBar = element.find('.progressbar');
progressBar.width(progress + '%');
scope.uploading = fileitem.isUploading;
};
uploader.onSuccessItem = function(fileitem) {
scope.uploading = fileitem.isUploading;
scope.$broadcast('image::uploaded', 'test');
};
uploader.onCompleteItem = function(fileitem) {
scope.uploading = fileitem.isUploading;
};
autoupload property to false like so: $scope.uploader = new FileUploader({
url: imageModel.getUploadURL(),
alias: 'image',
autoUpload: false
});
$scope.uploader.uploadAll();
