javascript 带有上传百分比的ajax php上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5861156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ajax php upload file with uploading percentage
提问by World
I have simple ajax uploading form using iframe. What i want is, the loading message shows the upload percentage in < div id="message"></div>
我有使用 iframe 的简单 ajax 上传表单。我想要的是，加载消息显示了上传百分比< div id="message"></div>
This is my javascript
这是我的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.phpfile is
服务器端upload.php文件是
$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>";
回答by Rakesh Sankar
Two things:
两件事情：
- Using Javascript
- Using APC
- 使用 JavaScript
- 使用 APC
Javascript:
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.
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
APC/PHP
Using APC - you can create a progress-bar on our own.
使用 APC - 您可以自己创建进度条。
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
<?php
if(isset($_GET['progress_key'])) {
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo $status['current']/$status['total']*100;
}
?>
upload.php
上传.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
<?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>
回答by AJ.
回答by cikatomo
From the http://www.matlus.com/html5-file-upload-with-progress/
来自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() + '%';
}
you will get the result in <div id="progressNumber"></div>
你会得到结果 <div id="progressNumber"></div>
