ajax php上傳文件與上傳百分比

我有簡單的ajax上傳形式使用iframe。我想要的是，加載消息顯示< div id="message"></div>ajax php上傳文件與上傳百分比

上傳百分比這是我的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'; 
    }

這是形式

< 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>

和服務器端上傳。 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>";

來源

2011-05-02 World

它通過顯示js噱頭直到99％給用戶。當上傳完成和PHP返回成功顯示100％。 – zod 2011-05-02 19:06:02

3210是一個示例解決方案使用PHP瓦特/ Ajax獲得進展基於文件的文件大小上載過程中被寫入服務器端的檢查：

來源

2011-05-02 19:41:37

這也許能吸引您here

來源

2011-05-10 20:33:27

兩件事情：

使用JavaScript
使用APC

的Javascript：

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

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

限制/假設：

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

使用APC - 你可以創建自己的進度條。

限制/假設：

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

代碼：

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.com/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>

來源

2011-05-25 04:51:58

從http://www.matlus.com/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() + '%'; 
     }

如果你得到一個正確的答案，我將它複製:-) Oterwise假的你將得到的結果<div id="progressNumber"></div>

來源

2012-12-11 01:38:47 cikatomo

非常感謝。不過，我使用了幾個月前提供的相同代碼。 – World 2012-12-12 12:36:08

ajax php上傳文件與上傳百分比

回答

相關問題