带有$.ajax和php的进度条
我正在尝试制作一个进度条，它可以与$.ajax（jquery）和php一起用于文件上传程序，但我不知道如何组装它。我知道有一个使用jQueryUI的进度条；然而，它只是在接收值时发生变化。这就是重点。如何为上传的字节获取dinamic值 顺便说一下，这是我的代码：带有$.ajax和php的进度条,php,jquery,progress-bar,Php,Jquery,Progress Bar,我正在尝试制作一个进度条，它可以与$.ajax（jquery）和php一起用于文件上传程序，但我不知道如何组装它。我知道有一个使用jQueryUI的进度条；然而，它只是在接收值时发生变化。这就是重点。如何为上传的字节获取dinamic值 顺便说一下，这是我的代码： fx_file.js /*This function gets Data from the form and send it to server*/ function fiEnviarDatos2(){ $("form#da
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
查看此页面：
基本上
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);
查看此页面：
基本上
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);
经过几乎一整天的调查，我达到了我想要的
我发现了这个名为JQUERY表单插件的插件。
[http://malsup.com/jquery/form/][1]
也许你们有些人用过。它几乎拥有构建progressbar和在提交表单前后引入代码的所有必要选项
那么，看看吧。也许有人觉得它有用
顺便说一句，这就是我的代码现在的样子
accountUser.html
upload.php
经过几乎一整天的调查，我实现了我想要的
我发现了这个名为JQUERY表单插件的插件。
[http://malsup.com/jquery/form/][1]
也许你们有些人用过。它几乎拥有构建progressbar和在提交表单前后引入代码的所有必要选项
那么，看看吧。也许有人觉得它有用
顺便说一句，这就是我的代码现在的样子
accountUser.html
upload.php
您是否使用支持上载进度的选项？PHP5.4或APC？我不知道如何使用jQuerry实现这一点，但是上传状态的回调是HTTPRequest.upload.onprogress
。回调将event
作为第一个参数，进度百分比通过以下方式获得：event.loaded*100/event.total
。嘿，谢谢你的回答。我使用的是PHP5.4，它会影响什么吗？HTTPRequest？我想知道你是否用这句话发表文章并举例。你是否使用了支持上传进度的选项？PHP5.4或APC？我不知道如何使用jQuerry实现这一点，但是上传状态的回调是HTTPRequest.upload.onprogress
。回调将event
作为第一个参数，进度百分比通过以下方式获得：event.loaded*100/event.total
。嘿，谢谢你的回答。我使用的是PHP5.4，它会影响什么吗？HTTPRequest？我想知道你是否用这句话发帖子和举例。是的，谢谢你的回答，威利安，我昨天在寻找一些信息时看到了你的例子；然而，为了使用它，我必须使用$.get而不是$.ajax。我认为如果更改发送数据的协议，可能会导致更多问题：/是的，谢谢你的回答Willian，我昨天在寻找一些信息时看到了你的例子；然而，为了使用它，我必须使用$.get而不是$.ajax。我认为如果更改发送数据的协议，可能会导致更多问题：/
<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>
$(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);
});
<?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>