angular文件上传php,ajax jquery angular 上传文件与分隔上传

简单总结下

#ajax上传文件

var xmlhttp = new XMLHttpRequest();

xmlhttp.open("POST", "2.php", false);

var formData = new FormData();

var f = button.form;

var file = f['file']['files'][0];

formData.append('abc', data, "xxx.txt");

xmlhttp.send(formData);

$.ajax({

url:"2.php",

type:'POST',

data:formData,

processData: false,

contentType: false,

success:function(result){

}});

#服务端很简单：

$tmp_name = $_FILES["abc"]["tmp_name"];

$target = "end.txt";

if(is_file($target)){

$target_old = $target;

$target="tmp.txt";

}

move_uploaded_file($tmp_name, $target);

#html:

#angular

$http({

method: 'POST',

url: '2.php',

headers: {

'Content-Type': undefined

},

data: {

email: 'aaaa@aaa.com',

token: 'bbbbasdfasdfasdf',

abc: $scope.filesplitdata

},

transformRequest: function (data, headersGetter) {

var formData = new FormData();

angular.forEach(data, function (value, key) {

formData.append(key, value);

});

var headers = headersGetter();

delete headers['Content-Type'];

return formData;

}

}).success(function (data) {

//alert(data);

}).error(function (data, status) {

});

#接下来是分片上传

#ajax分片上传

var fileSplitSize = 1024 * 1024; //1024 = 1kb 1024*1024 =1Mb

var start = 0, end = 0;

var i = 0;

// 文件段上传

function chunk_upload(button) {

var xmlhttp = new XMLHttpRequest();

var formData = new FormData();

xmlhttp.open("POST", "2.php", false);

var f = button.form;

var file = f['file']['files'][0];

var size = file.size;

end = start + fileSplitSize;

if (end > size) {

i = -1;

end = size;

} else {

i += 1;

end = end;

}　　//按大小切割文件段

var data = file.slice(start, end);

var r = new FileReader();

r.readAsBinaryString(data);

$(r).load(function (e) {

var bolb = e.target.result;

//var check = CryptoJS.MD5(bolb).toString();

formData.append('abc', data, "xxx.txt");

xmlhttp.send(formData);

if (xmlhttp.status == 200) {

if (end == size) {

var backtext = xmlhttp.responseText;

alert(backtext);

} else {

//alert("上传完成第" + i + "段");

start = end;

chunk_upload(button);

}

} else {

alert("上传错误");

//chunk_upload(button);

}

});

}

#jquery 分片上传

var fileSplitSize = 1024 * 1024 *10 ;

var start = 0, end = 0;

var i = 0;

// 文件段上传

function chunk_upload(button) {

var formData = new FormData();

var f = button.form;

var file = f['file']['files'][0];

var size = file.size;

end = start + fileSplitSize;

if (end > size) {

i = -1;

end = size;

} else {

i += 1;

end = end;

}　　//按大小切割文件段

var data = file.slice(start, end);

var r = new FileReader();

r.readAsBinaryString(data);

$(r).load(function (e) {

var bolb = e.target.result;

//var check = CryptoJS.MD5(bolb).toString();

formData.append('abc', data, "xxx.txt");

$.ajax({

url:"2.php",

type:'POST',

data:formData,

processData: false,

contentType: false,

success:function(result){

if (end == size) {

alert('good');

} else {

//alert("上传完成第" + i + "段");

start = end;

chunk_upload(button);

}

}});

});

}

#angularjs分片上传

(function () {

'use strict';

angular

.module('test', [

])

.directive('file', function () {

return {

scope: {

file: '='

},

link: function (scope, el, attrs) {

el.bind('change', function (event) {

var file = event.target.files[0];

scope.file = file ? file : undefined;

scope.$apply();

});

}

};

})

.controller('testctl',['$scope','$http',function ($scope,$http) {

$scope.uptest = function (currentpage) {

var persize=1024;

var allpage = Math.ceil($scope.file.size/persize);

if(typeof currentpage === "undefined"){

currentpage=1;

}

var start = (currentpage-1)*persize;

var end = start+persize;

if(currentpage===allpage){

end=$scope.file.size;

}

$scope.filesplitdata = $scope.file.slice(start, end);

currentpage=currentpage+1;

$http({

method: 'POST',

url: '2.php',

headers: {

'Content-Type': undefined

},

data: {

email: 'aaaa@aaa.com',

token: 'bbbbasdfasdfasdf',

abc: $scope.filesplitdata

},

transformRequest: function (data, headersGetter) {

var formData = new FormData();

angular.forEach(data, function (value, key) {

formData.append(key, value);

});

var headers = headersGetter();

delete headers['Content-Type'];

return formData;

}

}).success(function (data) {

if(currentpage>allpage){

alert("gooood");

}else{

$scope.uptest(currentpage);

}

//alert(data);

}).error(function (data, status) {

});

};

}]);

}());

#angularjs对应html

Title