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:

<form method="POST" name="form1" action="2.php" enctype="multipart/form-data">
    <input id='file' type='file' name='file' onchange="" />
    <input id='button' name='submit' type='button' value="上传" onclick="chunk_upload(this)"/>
</form>

#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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="crypto-js.js"></script>
    <script src="xxx.js"></script>
</head>
<body>
<div ng-app="test" ng-controller="testctl">
    <input type="file" file="file" required />

    <input type="button" ng-click="uptest(1)">

</div>


</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注