文件上传

1.以表单数据提交

<input type="button"  ng-model="jtCombo.detail.comboBanner" name="file" ngf-select='true' value="shangchuan ">
<button type="button" class="btn btn-success btn-s" ng-click="pushFile()">开始上传</button>

$scope.pushFile = function(){
        var fd = new FormData();
        //var file = document.querySelector('input[type=file]').files[0];
        fd.append('comboBanner', $scope.jtCombo.detail.comboBanner); 
        $http({
              method:'POST',
              url:comboFile,
              data: fd,
              headers: {'Content-Type':undefined},
              transformRequest: angular.identity 
        })   
        .success( function ( response )
            {
             //上传成功的操作
                       
        }); 
   }
这里要注意的是，因为是通过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。 
注意:上面原生获取的file =  $scope.jtCombo.detail.comboBanner；输出他们两个得到file类如下图：

image.png

2.以base64编码后的格式上传
这里西药用到HTML5的FileReader对象

//文件上传
myApp.service('fileReader', function($q) {
    // AngularJS will instantiate a singleton by calling "new" on this function
    var onLoad = function(reader, deferred, scope) {
        return function() {
            scope.$apply(function() {
                deferred.resolve(reader.result);
            });
        };
    };
    var onError = function(reader, deferred, scope) {
        return function() {
            scope.$apply(function() {
                deferred.reject(reader.result);
            });
        };
    };

    var getReader = function(deferred, scope) {
        var reader = new FileReader();
        reader.onload = onLoad(reader, deferred, scope);
        reader.onerror = onError(reader, deferred, scope);
        return reader;
    }

    var readAsDataURL = function(file, scope) { /*上传图片的主函数*/
        var deferred = $q.defer();
        var reader = getReader(deferred, scope);
        reader.readAsDataURL(file);
        return deferred.promise;
    };

    return {
        readAsDataUrl: readAsDataURL
    };
});

//获取图片的base64编码
scope.getFile = function () {
        console.log($scope.myFile)
            fileReader.readAsDataUrl($scope.myFile, $scope)
                .then(function(result) {
                  console.log($scope.myFile) //输出的也是一个file类
                   $scope.imageSrc = result;    //result就是base64的编码 
        });

下面是以base64的数据转化为Blob

   /**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 *            用url方式表示的base64图片数据
 */
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}

3.用angular插件# ng-file-upload

<input type="button"  ng-model="jtCombo.detail.comboBanner" name="file" ngf-select='true' value="shangchuan ">

Upload.upload({
     //服务端接收
     url: 'Ashx/UploadFile.ashx',
     //上传的同时带的其他参数
     data: {'username': $scope.username},
     //上传的文件
     file:$scope.jtCombo.detail.comboBanner
    }).progress(function (evt) {
     //进度条
     var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
     console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
     //上传成功
     console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
     $scope.uploadImg = data;
    }).error(function (data, status, headers, config) {
     //上传失败
     console.log('error status: ' + status);
    });

但是我在用ng-file-upload时总是提示预先发送的option请求被禁止访问