My Little World

上传

发表于

上传文件

方式一 用http方法，但需要写获取文件的指令

[相关链接]（http://my.oschina.net/u/1453451/blog/502885)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$scope.fileupload = function(){
       var  fd = new FormData();
        //var file = document.querySelector('input[type=file]').files[0];
       console.log($scope.fileItem);
       fd.append('import_file', $scope.fileItem.import_file);
        console.log(fd)
        $http({
            method:'POST',
            url:"http://172.16.0.207/py/erp/v1/credit_sell/import_files/",
           //url:"http://172.16.7.184:8000/py/erp/v1/credit_sell/import_files/",
            data: fd,
            headers: {'Content-Type':undefined},
            transformRequest: angular.identity
             })
            .success( function ( response )
                     {
                      if(response.statusCode===0){
                     //上传成功的操作
                     alert("uplaod success");
                   }else{
                    console.log(response.msg)
                   }
                     });
   }

方式二 用angular-file-upload 插件，利用FileUploader 服务属性和方法进行上传

[相关链接]（http://blog.csdn.net/lai_xu/article/details/49535847)
[相关链接]（http://www.cnblogs.com/aikewang/p/5691723.html)

上传图片

使用 drop-master 插件

angular引入引入fileReader依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
JS:
$scope.getFile = function () {
  console.log($scope.file);
   var postData = {
      fileName: $scope.file
    };
 fileReader.readAsDataUrl($rootScope.settings.url + "UPLOADURL", postData)
 .success(function(response) {
          $scope.detaildata.image=response;
  });
 };

HTML:
<div class="col-md-4 fileinput">
<img src="{{detaildata.image}}" name="img" style="width:32px;height: 32px;">
<span class="btn red btn-outline btn-file">
<span class="fileinput-new"> 重新上传 </span>
<input type="hidden">
<input type="file" file-model="myFile" name="..." accept="image/*"> 
</span>
</div>