php文件上传兼容浏览器,浏览器上传文件到PHP的几种方法

使用H5的方法来上传文件

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

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

上传失败，请重试

添加文件

JS代码

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();

}

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) {

})

}

};//上传图片