Question

我在下面有一个多文件上传代码。我想要做的是我想用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>

Answer 1

你可以尝试“如果”。

if(percentVal == 50);){
percent.html("you´re text here.");
}

您可以创建另一个HTML标记，并执行相同的百分比变换。

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

如何用jqueryui.com的自定义标签进度条替换任何进度条？

1 个答案: