anjularjs的处理文件上传

anjularjs的处理文件上传
前台：

 
 

  
  
1
  
  
2
  
  
3
  
  
4
 
 
 
 

  
  
1
  
  
2
  
  
3
  
  
4
 
 
<div ng-controller="UploaderController" >
    input type="file" file-model="myFile" >
    button ng-click="save()" >保存</button>
div>

js文件：
这里要注意的是，因为是通过anjularjs的http请求来上传文件的，所以要让当前的request成为一个Multipart/form-data请求，anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined，这样浏览器不仅帮我们把Content-Type 设置为 multipart/form-data，还填充上当前的boundary，如果你手动设置为： ‘Content-Type’: multipart/form-data，后台会抛出异常：the current request boundary parameter is null。
ps：
通过设置 transformRequest: angular.identity ，anjularjs transformRequest function 将序列化我们的formdata object.

  
  
1
  
  
2
  
  
3
  
  
4
  
  
5
  
  
6
  
  
7
  
  
8
  
  
9
  
  
10
  
  
11
  
  
12
  
  
13
  
  
14
  
  
15
  
  
16
  
  
17
  
  
18
  
  
19
  
  
20
 
 
 
 

  
  
1
  
  
2
  
  
3
  
  
4
  
  
5
  
  
6
  
  
7
  
  
8
  
  
9
  
  
10
  
  
11
  
  
12
  
  
13
  
  
14
  
  
15
  
  
16
  
  
17
  
  
18
  
  
19
  
  
20
 
 
$scope.save = function() {    
        var fd = new FormData();
        var file = document.querySelector('input[type=file]').files[0];
        fd.append('logo',file); 
         $http({
              method:'POST',url:"your url",data: fd,headers: {'Content-Type':undefined},transformRequest: angular.identity 
               })   
              .success( function ( response ) {
                       //上传成功的操作
                       alert("uplaod success");
                       }); 

     }
    });

ps:上面的file的获取还可以通过：var file = $scope.myFile.同时要注意在js中 data: fd,不能像普通的参数一样写为：params：{ fd，…}，具体的解释是：
官方文档

  
  
1
  
  
2
 
 
 
 

  
  
1
  
  
2
 
 
params – {Object.<string|Object>} – Map of strings or objects which will be serialized with theparamSerializer and appended as GET parameters.
data – {string|Object} – Data to be sent as the request message data.

在GET方法中可以使用params ，在POST/PUT/PATCH/DELETE中不能使用params 来传递数据，要使用data来传递。

<input type="file" accept="application/msword" ><br>accept属性列表 

1.accept="application/msexcel"
2.accept="application/msword"
3.accept="application/pdf"
4.accept="application/poscript"
5.accept="application/rtf"
6.accept="application/x-zip-compressed"
7.accept="audio/basic"
8.accept="audio/x-aiff"
9.accept="audio/x-mpeg"
10.accept="audio/x-pn/realaudio"
11.accept="audio/x-waw"
12.accept="image/gif"
13.accept="image/jpeg"
14.accept="image/tiff"
15.accept="image/x-ms-bmp"
16.accept="image/x-photo-cd"
17.accept="image/x-png"
18.accept="image/x-portablebitmap"
19.accept="image/x-portable-greymap"
20.accept="image/x-portable-pixmap"
21.accept="image/x-rgb"
22.accept="text/html"
23.accept="text/plain"
24.accept="video/quicktime"
25.accept="video/x-mpeg2"
26.accept="video/x-msvideo"

angular上传文件插件

ng-file-upload

ng-flow

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!