javascript - ajax php upload file with uploading percentage - Stack Overflow

admin管理员组

文章数量:1290306

I have simple ajax uploading form using iframe. What i want is, the loading message shows the upload percentage in < div id="message"></div>

This is my javascript

function start_Uploading(){
      document.getElementById('message').innerHTML = 'Uploading...';
      return true;
}

function stopUpload(success)
    {
      var result = '';
      if (success == 1)
        document.getElementById('message').innerHTML = 'Success';
      else 
         document.getElementById('message').innerHTML = 'Failed';
    }

This is form

< div id="message"><br/></div>
< form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="start_Uploading();" >
    File:< input name="myfile" type="file" size="30" />
    < input type="submit" name="submitBtn" value="Upload" />
    < br/>< iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

and the server side upload.php file is

$destination_path = getcwd().DIRECTORY_SEPARATOR;
   $result = 0;
   $target_path = $destination_path . basename( $_FILES['myfile']['name']);
   if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path))
      $result = 1;
   sleep(1);
   echo "<script language=\"javascript\" type=\"text/javascript\">window.top.window.stopUpload($result);</script>";

I have simple ajax uploading form using iframe. What i want is, the loading message shows the upload percentage in < div id="message"></div>

This is my javascript

function start_Uploading(){
      document.getElementById('message').innerHTML = 'Uploading...';
      return true;
}

function stopUpload(success)
    {
      var result = '';
      if (success == 1)
        document.getElementById('message').innerHTML = 'Success';
      else 
         document.getElementById('message').innerHTML = 'Failed';
    }

This is form

< div id="message"><br/></div>
< form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="start_Uploading();" >
    File:< input name="myfile" type="file" size="30" />
    < input type="submit" name="submitBtn" value="Upload" />
    < br/>< iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

and the server side upload.php file is

$destination_path = getcwd().DIRECTORY_SEPARATOR;
   $result = 0;
   $target_path = $destination_path . basename( $_FILES['myfile']['name']);
   if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path))
      $result = 1;
   sleep(1);
   echo "<script language=\"javascript\" type=\"text/javascript\">window.top.window.stopUpload($result);</script>";

• php
• javascript
• ajax
• upload

Share Improve this question Follow edited May 2, 2011 at 18:55 Naftali 146k4141 gold badges247247 silver badges304304 bronze badges asked May 2, 2011 at 18:53 WorldWorld 2,05777 gold badges2727 silver badges3737 bronze badges 1

• if you get a correct answer i will copy it :-) Oterwise fake it to the user by showing js gimmick till 99% . when upload plete and php return success show 100%. – zod Commented May 2, 2011 at 19:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Two things:

1. Using Javascript
2. Using APC

Javascript:

You can use plupload (http://www.plupload./) 
- pretty good multiple file uploader

Pretty decent JS plugin for uploading files in PHP in two methods, 
1. normal upload 
2. chunk based uploading.

Limitations/Assumptions:

1. Flash Plugin - in the browser
2. Session problem - since it's flash, a different session's are created for 
   each file upload.

APC/PHP

Using APC - you can create a progress-bar on our own.

Limitation/Assumptions:

1. Install APC on the server - using PECL (pecl install APC)
2. Write a separate code to get the status of upload.

Code:

getprogress.php

<?php
if(isset($_GET['progress_key'])) {

$status = apc_fetch('upload_'.$_GET['progress_key']);
echo $status['current']/$status['total']*100;

}
?>

upload.php

<?php
$id = uniqid("");
?>
<html>
<head><title>Upload Example</title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
function getProgress(){
$.get("getprogress.php?progress_key=<?php echo($id)?>", 
           function(percent) {
               document.getElementById("progressinner").style.width = percent+"%";
               if (percent < 100){
                    setTimeout("getProgress()", 100);
               }
           });

}

function startProgress(){
   document.getElementById("progressouter").style.display="block";
   setTimeout("getProgress()", 1000);
}

</script>

<iframe id="theframe" name="theframe" 
    src="fileupload.php?id=<?php echo($id) ?>" 
    style="border: none; height: 100px; width: 400px;" > 
</iframe>
<br/><br/>

<div id="progressouter" style="width: 500px; height: 20px; border: 6px solid red; display:none;">
<div id="progressinner" style="position: relative; height: 20px; background-color: purple; width: 0%; ">
</div>
</div>

</body>
</html>

fileupload.php

<?php
$id = $_GET['id'];
?>

<form enctype="multipart/form-data" id="upload_form" 
  action="target.php" method="POST">

<input type="hidden" name="APC_UPLOAD_PROGRESS" 
   id="progress_key"  value="<?php echo $id?>"/>

<input type="file" id="test_file" name="test_file"/><br/>

<input onclick="window.parent.startProgress(); return true;"
type="submit" value="Upload!"/>

</form>

Here is an example solution to using PHP w/ Ajax to get progress based on server-side check of the file size of the file being written during the upload:

Perhaps this could interest you here

From the http://www.matlus./html5-file-upload-with-progress/

function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.open("POST", "UploadMinimal.aspx");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }

you will get the result in <div id="progressNumber"></div>

本文标签： javascriptajax php upload file with uploading percentageStack Overflow