$ .ajax和php的进度条
[英]progress bar with $.ajax and php
问题描述
我正在尝试使用$ .ajax（jquery）和php处理文件上传器的进度条，但我不知道如何组装它。 我知道有一个使用jQuery UI的进度条; 然而，它只是在接收价值时改变。 这就是重点。 如何获得上传的字节的dinamic值？
顺便说一句，这是我的代码：
fx_file.js
/*This function gets Data from the form and send it to server*/
function fiEnviarDatos2(){
$("form#data").click(function(){
/*Some DOM'S animations*/
});
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: "PHP/Core/Archivos/upload.php",
type: 'POST',
data: formData,
async: false,
success: function (data) {
/*After actions**/
},
progress:function(data){
alert(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});`
upload.php的
<?php include ("Class_upload.php");
/*Variables*/
$i=0;
$archivos=0;
/*Contains numbers of file sent*/
$archivos=((count($_FILES,1)-6)/5);
/*Contains the user's session name*/
session_start();
$sUsuario=$_SESSION['usuario'];
/*Use the information of each file to create a new class Upload*/
for($i=0;$i<$archivos;$i++){
/*FileSize*/
$tamaArchivo = $_FILES['formUploader']['size'][$i];
/*Filename*/
$nombArchivo = strtolower($_FILES['formUploader']['name'][$i]);
/*Filetemp*/
$tmpArchivo = $_FILES['formUploader']['tmp_name'][$i];
/*It creates class Upload*/
$archivo_subir=new Upload($nombArchivo,$tamaArchivo,$tmpArchivo,$sUsuario);
/*It validates each file and returns a status*/
$estatus=$archivo_subir->enviarData();
/*Returns if file's been uploaded or not*/
$resultFile=$archivo_subir->resultFile($estatus);
echo "<br>";
if($estatus>0){
echo "<div class='resultDeny'>".$resultFile."</div>";
}else{
if($resultFile=="ServerError"){
echo "<div class='resultServer'>".$resultFile."</div>";
}else{
echo "<div class='resultSuccess'>".$resultFile."</div>";
}
}
}
伙计们，我希望我能找到你的帮助。 我知道你们都是专家。 我是新工作的jquery和php; 然而，我已经看到了“他们的力量在一起”，我想更多地了解他们。
谢谢大家。
PDT：对不起我的英语，这不是我的母语。 JQ和PHP将是。
2 个解决方案
解决方案1
2 已采纳 2013-02-03 21:56:36
查看此页面： http ： //www.johnboy.com/php-upload-progress-bar/
http://www.johnboy.com/php-upload-progress-bar/upload_frame.phps基本上
function(data) //return information back from jQuery's get request
{
$('#progress_container').fadeIn(100); //fade in progress bar
$('#progress_bar').width(data +"%"); //set width of progress bar based on the $status value (set at the top of this page)
$('#progress_completed').html(parseInt(data) +"%"); //display the % completed within the progress bar
}
)},500);
解决方案2
2 2013-02-04 16:48:14
经过几乎整天的调查，我实现了我想要的。
我发现这个名为JQUERY Form Plugin的插件。 [http://malsup.com/jquery/form/][1]
也许你们中的一些人已经使用过它。 它提供了几乎所有必要的选项来构建进度条并在提交表单之前和之后引入代码。
所以，看看吧。 也许有人发现它很有用
顺便说一下，这就是我的代码现在的样子
accountUser.html
<html>
//...
...//
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; margin-top:-200px }
.bar { background-image:url(Imagenes/index/pbar-ani.gif); width:0%; height:20px; border- radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
<script language="javascript" src="Scripts/jquery_min_1.8.js"></script>
<script language="javascript" src="Scripts/fx_file.js"></script>
<script language="javascript" src="Scripts/jquery.form.js"></script>
//...
..//
<form action="#" method="post" enctype="multipart/form-data" id="formu">
<input name="formUploader[]" type="file" multiple id="archivo"/>
<input class="button" type="submit" alt="Upload" value="Subir" id="btn_cargar"/>
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
//...
..//
</html>
fx_file.js
$(document).ready(function() {
// prepare Options Object
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
var options = {
url: "upload.php",
type: 'POST',
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
$(bar).animate({width:percentVal});
percent.html(percentVal);
},
success: function(data){
//After actions
}
};
// bind 'formu' and provide a simple callback function
$('#formu').ajaxForm(options);
});
upload.php的
<?php include ("Class_upload.php");
/*Variables*/
$i=0;
$archivos=0;
/*Contains numbers of file sent*/
$archivos=((count($_FILES,1)-6)/5);
/*Contains the user's session name*/
session_start();
$sUsuario=$_SESSION['usuario'];
/*Use the information of each file to create a new class Upload*/
for($i=0;$i<$archivos;$i++){
/*FileSize*/
$tamaArchivo = $_FILES['formUploader']['size'][$i];
/*Filename*/
$nombArchivo = strtolower($_FILES['formUploader']['name'][$i]);
/*Filetemp*/
$tmpArchivo = $_FILES['formUploader']['tmp_name'][$i];
/*It creates class Upload*/
$archivo_subir=new Upload($nombArchivo,$tamaArchivo,$tmpArchivo,$sUsuario);
/*It validates each file and returns a status*/
$estatus=$archivo_subir->enviarData();
/*Returns if file's been uploaded or not*/
$resultFile=$archivo_subir->resultFile($estatus);
echo "<br>";
if($estatus>0){
echo "<div class='resultDeny'>".$resultFile."</div>";
}else{
if($resultFile=="ServerError"){
echo "<div class='resultServer'>".$resultFile."</div>";
}else{
echo "<div class='resultSuccess'>".$resultFile."</div>";
}
}
}//End For
<?php>
PHP和Ajax的进度条
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.