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请求被禁止访问
