Javascript 使用进度条上载文件
我正在制作一个小而实用的系统来上传文件到服务器，我正在使用Jquery、jQueryAjax、PHP、Bootstrap3、FontawesomeyFormvalidation.io 我需要协作来完成和添加一些功能；到目前为止，我已经设法使进度条，并看到剩余的MB的实时量 我想做以下事情：Javascript 使用进度条上载文件,javascript,php,jquery,ajax,twitter-bootstrap,Javascript,Php,Jquery,Ajax,Twitter Bootstrap,我正在制作一个小而实用的系统来上传文件到服务器，我正在使用Jquery、jQueryAjax、PHP、Bootstrap3、FontawesomeyFormvalidation.io 我需要协作来完成和添加一些功能；到目前为止，我已经设法使进度条，并看到剩余的MB的实时量 我想做以下事情： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload files Jquery Ajax - XHR2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/css/formValidation.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Main</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--/ Header -->
<!-- Upload file -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<form action="" method="post" name="form" id="form" enctype="multipart/form-data">
<div class="row">
<div class="col-xs-12">
<h1>Upload files</h1>
</div>
<div class="col-xs-12">
<div class="form-group">
<input type="file" name="image" id="image" class="form-control" multiple>
</div>
</div>
<div class="col-xs-12">
<button type="submit" name="upload" class="btn btn-primary">Upload</button>
<p id="response"></p>
</div>
</div>
</form>
</div>
</div>
</div>
<!--/ Upload file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script>
$(function() {
$('#form').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
image: {
validators: {
notEmpty: {
message: 'Image field required.'
}
}
}
}
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
formData = new FormData(),
params = $form.serializeArray(),
image = $form.find('[name="image"]')[0].files;
$.each(image, function(i, file) {
// Prefix the name of uploaded files with "docs-"
// Of course, you can change it to any string
formData.append('image[]', file);
});
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
// Info add send post
formData.append('id', Math.random());
$.ajax({
beforeSend: function () {
// Show modal
$("#modal_system").modal('show');
},
url: 'ajax/1.4_ajax.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: "json",
timeout: 120000,
xhr: function() {
myXhr = $.ajaxSettings.xhr();
console.log('XHR: ', myXhr);
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function(e){
var loaded = e.loaded;
var total = e.total;
var percentComplete = Math.round((e.loaded / e.total) * 100);
// Quantity of bytes per second
var leftover_bytes = total - loaded;
var leftover_bytes = leftover_bytes / 1048576;
$('.modal-body #dataResponse').html( leftover_bytes.toFixed(2) + ' MB' );
// Progress bar function
$('.progress .progress-bar').css('width', percentComplete + '%');
$('.progress .progress-bar').html( percentComplete + '%');
}, false);
myXhr.upload.addEventListener('load', function(e){
// After upload cant reset progrees bar
//$('.progress .progress-bar').css('width', '0%');
//$('.progress .progress-bar').html( '');
}, false);
}
return myXhr;
}
}).done( function(data, textStatus, jqXHR) { // Before success
$('p#response').html( data.message );
}).fail( function(jqXHR, textStatus, errorThrown) { // Before error
switch(jqXHR.status) {
case 0:
$('p#response').html( 'Timeout exceeded.' );
break;
case 403:
$('p#response').html( 'The session has expired.' );
break;
case 404:
$('p#response').html( 'The requested page does not exist.' );
break;
default:
if(jqXHR.status != 200) {
$('p#response').html( 'Error please try again has occurred.' );
}
break;
}
console.log(jqXHR);
//console.log('Estatus readyState:' + jqXHR.readyState);
//console.log('Estatus status:' + jqXHR.status);
//console.log('Estatus statusText:' + jqXHR.statusText);
//console.log('Estatus responseText:' + jqXHR.responseText);
//console.log('Estatus setRequestHeader:' + jqXHR.setRequestHeader);
});
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="modal_system" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Example</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><strong>Quantity left: </strong> <span id="dataResponse"></span></div>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
/**
* Function to organize uploaded files
*/
function organizeArray( $arr ){
foreach( $arr as $key => $all ){
foreach( $all as $i => $val ){
$new[$i][$key] = $val;
}
}
return $new;
}
// Array organized
$image = organizeArray( $_FILES['image'] );
// Configurations
$document_root = $_SERVER['DOCUMENT_ROOT'];
$directory = "../files/";
// Browse array
foreach ($image as $key => $value) {
move_uploaded_file($value['tmp_name'], $directory . '1.2 -' . date('h-i-s') . $value['name']);
}
$data = array(
'response' => true,
'message' => 'Completed'
);
echo json_encode($data);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload files Jquery Ajax - XHR2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/css/formValidation.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Main</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--/ Header -->
<!-- Upload file -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<form action="" method="post" name="form" id="form" enctype="multipart/form-data">
<div class="row">
<div class="col-xs-12">
<h1>Upload files</h1>
</div>
<div class="col-xs-12">
<div class="form-group">
<input type="file" name="image" id="image" class="form-control" multiple>
</div>
</div>
<div class="col-xs-12">
<button type="submit" name="upload" class="btn btn-primary">Upload</button>
<p id="response"></p>
</div>
</div>
</form>
</div>
</div>
</div>
<!--/ Upload file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script>
$(function() {
$('#form').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
image: {
validators: {
notEmpty: {
message: 'Image field required.'
}
}
}
}
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
formData = new FormData(),
params = $form.serializeArray(),
image = $form.find('[name="image"]')[0].files;
$.each(image, function(i, file) {
// Prefix the name of uploaded files with "docs-"
// Of course, you can change it to any string
formData.append('image[]', file);
});
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
// Info add send post
formData.append('id', Math.random());
$.ajax({
beforeSend: function () {
// Show modal
$("#modal_system").modal('show');
},
url: 'ajax/1.4_ajax.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: "json",
timeout: 120000,
xhr: function() {
myXhr = $.ajaxSettings.xhr();
console.log('XHR: ', myXhr);
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function(e){
var loaded = e.loaded;
var total = e.total;
var percentComplete = Math.round((e.loaded / e.total) * 100);
// Quantity of bytes per second
var leftover_bytes = total - loaded;
var leftover_bytes = leftover_bytes / 1048576;
$('.modal-body #dataResponse').html( leftover_bytes.toFixed(2) + ' MB' );
// Progress bar function
$('.progress .progress-bar').css('width', percentComplete + '%');
$('.progress .progress-bar').html( percentComplete + '%');
}, false);
myXhr.upload.addEventListener('load', function(e){
// After upload cant reset progrees bar
//$('.progress .progress-bar').css('width', '0%');
//$('.progress .progress-bar').html( '');
}, false);
}
return myXhr;
}
}).done( function(data, textStatus, jqXHR) { // Before success
$('p#response').html( data.message );
}).fail( function(jqXHR, textStatus, errorThrown) { // Before error
switch(jqXHR.status) {
case 0:
$('p#response').html( 'Timeout exceeded.' );
break;
case 403:
$('p#response').html( 'The session has expired.' );
break;
case 404:
$('p#response').html( 'The requested page does not exist.' );
break;
default:
if(jqXHR.status != 200) {
$('p#response').html( 'Error please try again has occurred.' );
}
break;
}
console.log(jqXHR);
//console.log('Estatus readyState:' + jqXHR.readyState);
//console.log('Estatus status:' + jqXHR.status);
//console.log('Estatus statusText:' + jqXHR.statusText);
//console.log('Estatus responseText:' + jqXHR.responseText);
//console.log('Estatus setRequestHeader:' + jqXHR.setRequestHeader);
});
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="modal_system" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Example</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><strong>Quantity left: </strong> <span id="dataResponse"></span></div>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
/**
* Function to organize uploaded files
*/
function organizeArray( $arr ){
foreach( $arr as $key => $all ){
foreach( $all as $i => $val ){
$new[$i][$key] = $val;
}
}
return $new;
}
// Array organized
$image = organizeArray( $_FILES['image'] );
// Configurations
$document_root = $_SERVER['DOCUMENT_ROOT'];
$directory = "../files/";
// Browse array
foreach ($image as $key => $value) {
move_uploaded_file($value['tmp_name'], $directory . '1.2 -' . date('h-i-s') . $value['name']);
}
$data = array(
'response' => true,
'message' => 'Completed'
);
echo json_encode($data);
?>
$.ajax({
beforeSend: function () {
// Show modal
$("#modal_system").modal('show');
},
url: 'ajax/1.4_ajax.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: "json",
timeout: 120000,
xhr: function() {
myXhr = $.ajaxSettings.xhr();
console.log('XHR: ', myXhr);
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function(e){
var loaded = e.loaded;
var total = e.total;
var percentComplete = Math.round((e.loaded / e.total) * 100);
// Quantity of bytes per second
var leftover_bytes = total - loaded;
var leftover_bytes = leftover_bytes / 1048576;
$('.modal-body #dataResponse').html( leftover_bytes.toFixed(2) + ' MB' );
// Progress bar function
$('.progress .progress-bar').css('width', percentComplete + '%');
$('.progress .progress-bar').html( percentComplete + '%');
}, false);
myXhr.upload.addEventListener('load', function(e){
// After upload cant reset progrees bar
//$('.progress .progress-bar').css('width', '0%');
//$('.progress .progress-bar').html( '');
}, false);
}
return myXhr;
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload files Jquery Ajax - XHR2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/css/formValidation.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Main</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--/ Header -->
<!-- Upload file -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<form action="" method="post" name="form" id="form" enctype="multipart/form-data">
<div class="row">
<div class="col-xs-12">
<h1>Upload files</h1>
</div>
<div class="col-xs-12">
<div class="form-group">
<input type="file" name="image" id="image" class="form-control" multiple>
</div>
</div>
<div class="col-xs-12">
<button type="submit" name="upload" class="btn btn-primary">Upload</button>
<p id="response"></p>
</div>
</div>
</form>
</div>
</div>
</div>
<!--/ Upload file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="https://cdn.rawgit.com/formvalidation/formvalidation.io/master/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script>
$(function() {
$('#form').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
image: {
validators: {
notEmpty: {
message: 'Image field required.'
}
}
}
}
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
formData = new FormData(),
params = $form.serializeArray(),
image = $form.find('[name="image"]')[0].files;
$.each(image, function(i, file) {
// Prefix the name of uploaded files with "docs-"
// Of course, you can change it to any string
formData.append('image[]', file);
});
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
// Info add send post
formData.append('id', Math.random());
$.ajax({
beforeSend: function () {
// Show modal
$("#modal_system").modal('show');
},
url: 'ajax/1.4_ajax.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: "json",
timeout: 120000,
xhr: function() {
myXhr = $.ajaxSettings.xhr();
console.log('XHR: ', myXhr);
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', function(e){
var loaded = e.loaded;
var total = e.total;
var percentComplete = Math.round((e.loaded / e.total) * 100);
// Quantity of bytes per second
var leftover_bytes = total - loaded;
var leftover_bytes = leftover_bytes / 1048576;
$('.modal-body #dataResponse').html( leftover_bytes.toFixed(2) + ' MB' );
// Progress bar function
$('.progress .progress-bar').css('width', percentComplete + '%');
$('.progress .progress-bar').html( percentComplete + '%');
}, false);
myXhr.upload.addEventListener('load', function(e){
// After upload cant reset progrees bar
//$('.progress .progress-bar').css('width', '0%');
//$('.progress .progress-bar').html( '');
}, false);
}
return myXhr;
}
}).done( function(data, textStatus, jqXHR) { // Before success
$('p#response').html( data.message );
}).fail( function(jqXHR, textStatus, errorThrown) { // Before error
switch(jqXHR.status) {
case 0:
$('p#response').html( 'Timeout exceeded.' );
break;
case 403:
$('p#response').html( 'The session has expired.' );
break;
case 404:
$('p#response').html( 'The requested page does not exist.' );
break;
default:
if(jqXHR.status != 200) {
$('p#response').html( 'Error please try again has occurred.' );
}
break;
}
console.log(jqXHR);
//console.log('Estatus readyState:' + jqXHR.readyState);
//console.log('Estatus status:' + jqXHR.status);
//console.log('Estatus statusText:' + jqXHR.statusText);
//console.log('Estatus responseText:' + jqXHR.responseText);
//console.log('Estatus setRequestHeader:' + jqXHR.setRequestHeader);
});
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="modal_system" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Example</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div><strong>Quantity left: </strong> <span id="dataResponse"></span></div>
</div>
</div>
</div>
</div>
</body>
</html>
<?php
/**
* Function to organize uploaded files
*/
function organizeArray( $arr ){
foreach( $arr as $key => $all ){
foreach( $all as $i => $val ){
$new[$i][$key] = $val;
}
}
return $new;
}
// Array organized
$image = organizeArray( $_FILES['image'] );
// Configurations
$document_root = $_SERVER['DOCUMENT_ROOT'];
$directory = "../files/";
// Browse array
foreach ($image as $key => $value) {
move_uploaded_file($value['tmp_name'], $directory . '1.2 -' . date('h-i-s') . $value['name']);
}
$data = array(
'response' => true,
'message' => 'Completed'
);
echo json_encode($data);
?>
上传文件jqueryajax-XHR2
切换导航
上传文件
上传
$（函数（）{
$（“#表单”）.formValidation({
框架：“bootstrap”，
已排除：'：已禁用'，
图标：{
有效：“glyphicon glyphicon ok”，
无效：“glyphicon glyphicon删除”，
正在验证：“glyphicon glyphicon刷新”
},
字段：{
图片：{
验证器：{
注意：{
消息：“需要图像字段。”
}
}
}
}
})
.on（'success.form.fv'，函数（e）{
//防止表格提交
e、 预防默认值（）；
变量$form=$（e.target），
fv=$form.data（'formValidation'）；
formData=新的formData（），
params=$form.serializeArray（），
image=$form.find（'[name=“image”]'）[0]。文件；
$.each（图像、函数（i、文件）{
//在上传文件的名称前加上“docs——”
//当然，您可以将其更改为任何字符串
append（'image[]，file）；
});
$.each（参数、函数（i、val）{
formData.append（val.name，val.value）；
});
//信息添加发送邮件
append（'id'，Math.random（））；
$.ajax({
beforeSend:函数（）{
//显示模态
$（“#模态系统”）.modal（'show'）；
},
url:'ajax/1.4_ajax.php'，
键入：“POST”，
数据：formData，
cache:false，
contentType:false，
processData:false，
数据类型：“json”，
超时：120000，
xhr:function（）{
myXhr=$.ajaxSettings.xhr（）；
log（'XHR:'，myXhr）；
如果（myXhr.upload）{
myXhr.upload.addEventListener（'progress'，函数（e）{
var加载=e加载；
var total=e.total；
var percentComplete=数学轮（（e.loaded/e.total）*100）；
//每秒字节数
var leftover_bytes=总加载量；
var leftover_bytes=leftover_bytes/1048576；
$（'.modal body#dataResponse'）.html（剩余的_字节.toFixed（2）+'MB'）；
//进度条功能
$（'.progress.progress bar'）.css（'width'，percentComplete+'%'）；
$（'.progress.progress bar'）.html（完成百分比+'%'）；
}，假）；
myXhr.upload.ad