angularjs php上传文件,如何使用AngularJS发布二进制文件（使用上传DEMO）

推荐：直接发布二进制文件

发布二进制文件multi-part/form-data效率很低，因为base64编码会增加33％的额外开销。如果服务器API接受带有二进制数据的POST，请直接发布文件：function upload(url, file) {

if (file.constructor.name != "File") {

throw new Error("Not a file");

}

var config = {

headers: {'Content-Type': undefined},

transformRequest: []

};

return $http.post(url, file, config)

.then(function (response) {

console.log("success!");

return response;

}).catch(function (errorResponse) {

console.error("error!");

throw errorResponse;

});}

通常，$ http服务将JavaScript对象编码为JSON字符串。使用transformRequest: []覆盖默认的转变。angular.module("app",[]).directive("selectNgFiles", function() {

return {

require: "ngModel",

link: postLink  };

function postLink(scope, elem, attrs, ngModel) {

elem.on("change", function(event) {

ngModel.$setViewValue(elem[0].files);

});

}}).controller("ctrl", function($scope, $http) {

var url = "//httpbin.org/post";

var config = {

headers: { 'Content-type': undefined }

};

$scope.upload = function(files) {

var promise = $http.post(url,files[0],config);

promise.then(function(response){

$scope.result="Success "+response.status;

}).catch(function(errorResponse) {

$scope.result="Error "+errorRespone.status;

});

};})

Upload file    

Name={{files[0].name}}

Type={{files[0].type}}

RESULT={{result}}    

张贴 'Content-Type': 'multipart/form-data'

使用FormData API发布数据时，将内容类型设置为undefined：function uploadQuestion(file) {

var form = new FormData();

form.append("j_id", "4124");

form.append("q_id", "6");

form.append("u_id", "159931");

form.append("file", file); //this returns media object which contain all details of recorded video

return $http({

method: 'POST',

headers: { 'Content-Type': undefined ̶'̶m̶u̶l̶t̶i̶p̶a̶r̶t̶/̶f̶o̶r̶m̶-̶d̶a̶t̶a̶'̶ }, // also tried with application/x-www-form-urlencoded

url: 'http://services.example.com/upload.php',

data: form,

̶c̶a̶c̶h̶e̶:̶ ̶f̶a̶l̶s̶e̶,̶

timeout: 300000

̶}̶)̶.̶s̶u̶c̶c̶e̶s̶s̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶

}).then(function(response) {

var data = response.data;

var status = response.status;

if (status == '200') {

console.log("Success");

}

̶}̶)̶.̶e̶r̶r̶o̶r̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶

}).catch(function(response) {

console.log("ERROR");

//IMPORTANT

throw response;

});}

当XHR API发送方法发送FormData对象时，它会自动设置具有适当边界的内容类型标头。当$ http服务覆盖内容类型时，服务器将获得没有正确边界的内容类型标头。