Php 如何将任何进度条替换为jqueryui.com'；自定义标签进度条？_Php_Jquery

Php 如何将任何进度条替换为jqueryui.com'；自定义标签进度条？

php jquery

Php 如何将任何进度条替换为jqueryui.com'；自定义标签进度条？,php,jquery,Php,Jquery,我有一个多文件上传代码如下。我想做的是用jqueryui.com上的自定义标签进度条替换代码中的进度条。我真的不知道该怎么做。有人能帮忙吗？代码如下： <!doctype html> <head> <title>File Upload Progress Demo #2</title> <style> body { padding: 30px } form { display: block; margin: 20px auto; bac

我有一个多文件上传代码如下。我想做的是用jqueryui.com上的自定义标签进度条替换代码中的进度条。我真的不知道该怎么做。有人能帮忙吗？代码如下：

<!doctype html>
<head>
<title>File Upload Progress Demo #2</title>
<style>
body { padding: 30px }
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; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
    <h1>File Upload Progress Demo #2</h1>
    <code>&lt;input type="file" name="myfile[]" multiple></code>
    <form action="file-echo2.php" method="post" enctype="multipart/form-data">
        <input type="file" name="myfile[]" multiple><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
        //console.log(percentVal, position, total);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-850242-2";
urchinTracker();
</script>

下面是上载文件的PHP脚本：

<?php
foreach($_FILES as $file) {
   $n = $file['name'];
    $s = $file['size'];
   if (is_array($n)) {
      $c = count($n);
      for ($i=0; $i < $c; $i++) {
         echo "<br>uploaded: " . $n[$i] . " (" . $s[$i] . " bytes)";
      }
   }
   else
      echo "<br>uploaded: $n ($s bytes)";
}
?>

以下是自定义标签进度条的代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Custom Label</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  .progress-label {
    float: left;
    margin-left: 50%;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }
  </style>
  <script>
  $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 99 ) {
        setTimeout( progress, 100 );
      }
    }

    setTimeout( progress, 3000 );
  });
  </script>
</head>
<body>

<div id="progressbar"><div class="progress-label">Loading...</div></div>


</body>
</html>


jQuery UI Progressbar-自定义标签
.进度标签{
浮动：左；
左边距：50%；
边缘顶部：5px；
字体大小：粗体；
文本阴影：1px 1px 0#fff；
}
$（函数（）{
var progressbar=$（“#progressbar”），
progressLabel=$（“.progressLabel”）；
progressbar.progressbar({
值：false，
更改：函数（）{
progressLabel.text（progressbar.progressbar（“值”）+“%”）；
},
完成：函数（）{
progressLabel.text（“完成！”）；
}
});
功能进展（）{
var val=progressbar.progressbar（“值”）|| 0；
progressbar.progressbar（“值”，val+1）；
如果（val<99）{
设置超时（进度，100）；
}
}
设置超时（进度，3000）；
});
加载。。。

您可以尝试“如果”

您可以创建另一个HTML标记，并对百分比变量执行相同的操作

var uploadText = document.getElementById(".newTag") or $('.newTag');
if(percentVal == 50);){
uploadText.html("you´re text here.");
}

如果你想使用jqueryUI，为什么会有任何进度条呢？看看它的实现first@swapnesh：我想用jqueryui.com上的自定义标签progressbar替换上面第1个代码中的进度条

var uploadText = document.getElementById(".newTag") or $('.newTag');
if(percentVal == 50);){
uploadText.html("you´re text here.");
}