angularjs怎样可以用formdata上传图片？

因为input选择图片然后提交到服务器后会返回一个json数组的返回值，用传统的form表单提交图片，图片是能传上去了，但是没法接收到返回值。用的是angularjs框架，就想问一下可以把input选择到的图片放到formdata里传给服务器么？如果可以，具体要怎么实现？

阅读 7.9k

.service('fileUpload', ['$http', function ($http) { this.uploadFileToUrl = function(file, uploadUrl){ var fd = new FormData(); //初始化一个FormData实例 fd.append('file', file); //file就是图片或者其他你要上传的formdata，可以通过$("input")[0].files[0]来获取 $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .success(function(){ }) .error(function(){ }); } }]);

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
  <title></title>


  <meta charset="UTF-8">

<script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular.min.js"></script>
</head>
<body ng-app="myapp">
  

<div controller="upCtrl" >  

<form id='editfile' method='post'  enctype='multipart/form-data'>
    <input name="text" type="text"/>
    选择图片：<input name="avatar" id='upfile' type='file'/>

<button ng-click="upload()"  > upload </button>
</form>
</div>


<script >
var app = angular.module('myapp', []);
   
app.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData(); //初始化一个FormData实例

        fd.append('file', file); //file就是图片或者其他你要上传的formdata，可以通过$("input")[0].files[0]来获取
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        })
        .error(function(){
        });
    }
}]);
   app.controller('upCtrl',  function($scope,$fileUpload){

    $scope.upload = function () {
console.log('upload');
var file=document.getElementById("upfile").files[0];
  
    $fileUpload.uploadFileToUrl('upload.php',file);

    };
});




</script>



</body>
</html>

为什么点击上传没反应?

angularjs怎样可以用formdata上传图片？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

angularjs怎样可以用formdata上传图片？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？