使用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) {
})
}
};//上传图片