浏览器上传文件到PHP的几种方法

使用H5的方法来上传文件

优点是：上传过程很方便，简单

缺点：并不是所有的浏览器都支持，兼容性比较差，现阶段不推荐使用

<div class="fr">
<!--上传文件方法一：-->
<form name="form1">

        <div class="progress">
            <div class="progress-bars" style="width:1%">
            </div>
        </div>

        <span id="upload_fail" class="red gapr">上传失败，请重试</span>
        <a id="a_upload_file" href="#" class="gap">添加文件</a>
        <input id="input_token" type="hidden" name="<?php echo $tokenName; ?>" value="<?php echo $hash; ?>">
        <input type="hidden" name="audit_type" value="<?php echo $audit_type; ?>">
        <input id="input_upload_file" type="file" name="userfile">
        </form>
</div>

JS代码

<script>
var data = <?php echo $data; ?>;
var audit_type = <?php echo $audit_type; ?>;
var process_id = <?php echo $process_id; ?>;

$(document).ready(function() {
$('#input_upload_file').hide();
$('#input_submit').hide();
$('.progress').hide();
$('#upload_fail').hide();
});
$('#a_upload_file').click(function(){
$('#input_upload_file').click();
$('.progress-bars').width("0%");
});
$('#input_upload_file').change(function(){
$('.progress').show();
$('#upload_fail').hide();
var fd = new FormData();
fd.append($('#input_token').attr("name"),$('#input_token').attr("value"));
fd.append("userfile",document.getElementById('input_upload_file').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.open("POST","http.......................");
xhr.send(fd);
});
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$('.progress-bars').width(percentComplete+"%");
}
else {
$('.progress-bars').width("0%");
}
    }
function uploadComplete(evt) {
alert(evt.target.responseText);
$('.progress').hide();
}
function uploadFailed(evt) {
$('#upload_fail').show();
}

</script>

PHP后台代码，含有过滤文件类型功能

public function do_upload()
    {
        $targetFolder = '/uploads';

        if (!empty($_FILES)) {
            $tempFile = $_FILES['file']['tmp_name'];

            $fileName = $_FILES['file']['name'];
            $targetPath = $this->input->server('DOCUMENT_ROOT') . $targetFolder;
            $targetFile = rtrim($targetPath, '/') . '/' . $fileName;

            // 验证文件类型'wmv', 'wma', 'mp3'
            $photoFileTypes = array('jpg', 'jpeg', 'gif', 'png', 'bmp');
            $audioFileTypes = array('wmv', 'wma', 'mp3');
            $fileParts = pathinfo($fileName);

            if (in_array($fileParts['extension'], $photoFileTypes)) {//图片
                move_uploaded_file($tempFile, $targetFile);
                $file = file_get_contents($targetFile);
                $back = $this->my_model->upload_file($fileName,$file);
                //删除文件
                if( !unlink($targetFile) ){
                    log_message('error', "Remove file error.");
                }
            }
            else if( in_array($fileParts['extension'],$audioFileTypes)){//文件
                move_uploaded_file($tempFile, $targetFile);
                $file = file_get_contents($targetFile);
                $back = $this->my_model->upload_file($fileName,$file);
                //删除文件
                if( !unlink($targetFile) ){
                    log_message('error', "Remove file error.");
                }
            }
            else {
                log_message('error', "Invalid file type.");
            }
        }
    }

AngularJS的插件ng-file-upload来上传文件

使用插件的方式上传没有兼容性问题，并且应用了angular先进的MVC框架，适合扩展

$scope.$watch('files', function () {
        $scope.upload($scope.files);
    });

    var fileID = 0;
    $scope.upload = function(files){
        if (files && files.length){
            var file = files[fileID];
            $scope.progressStyle = {width: "0%"};
            $scope.progress_show = true;
            $scope.upload_status = false;

            Upload.upload({
                url: 'https:xxx',
                fields: {'ecc_csrf_token': hash},
                file: file
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                $scope.progressStyle = {width: progressPercentage + "%"};
            }).success(function (data, status, headers, config) {
                fileID = fileID + 1;
                //限制最多上传10个文件
                if(fileID < files.length && fileID < 10 ){
                    $scope.upload($scope.files);
                }
                else{//真正结束
                    fileID = 0;
                    $scope.progress_show = false;
                }
            }).error(function (data, status, headers, config) {
            })
        }
    };//上传图片