Ajax和Javascript以HTML形式上传进度和状态

Question

我有一个HTML文件上传表单，在php post方法上传文件。

表单在点击上传提交按钮后显示一条消息(上传进行中)。

HTML表单:

<!-- upload boxes -->
<div class="tabmain">
<ul class="tabnav">
<!-- First-Tab -->
<li title="{lang.DOWNLOAD_F}"><a href="#" onclick="return false;"><i class="fa lnk-icon-0"></i><em>{lang.DOWNLOAD_F}</em></a></li>
<!-- @First-Tab -->
<!--you-can-add-another-tab-here-->
</ul>
<!-- First-Box -->
<div class="tabcon" title="{lang.DOWNLOAD_F}">
<div class="go_up clfx">
<!-- upload normal -->
<LOOP NAME=FILES_NUM_LOOP>
<div class="up-input clfx" id="up_{{i}}"><div class="input-group">  <label class="input-group-btn">
<input id="fileID" class="file" type="file" name="file_{{i}}_" data-number="{{i}}" style="{{show}}" onchange="readURL_file_(this,'.file-icon-{{i}}','#up_{{i}}','#info_list_{{i}}');" />
<span class="btn"><i class="fa fa-folder-open"></i> <em> Choose a File </em></span>
<span class="file-icon"><i></i><img class="file-icon-{{i}}" src="{STYLE_PATH}img/blank.png" alt=""></span>
<a href="#" class="reset-input"><i class="fa fa-close"></i></a> </label></div>
</div>
<ul class="info-up_{{i}} file-info clfx" id="info_list_{{i}}"></ul>
</LOOP>
<div class="agree"><span>{terms_msg}</span></div>
<div class="bn_up"><input type="submit" id="submitr" name="submitr" value=" {lang.DOWNLOAD_F}" onclick="upload_image();"/></div>
<!-- @upload normal -->
</div>
</div>
<!-- @First-Box -->
<!--you-can-add-another-box-here-->
</div>
<!-- @upload boxes -->

现在我想在点击提交按钮时显示上传速度和上传进度或状态，注意我已经尝试过这个解决方案:

我使用了以下javascript代码:

<script>
function upload_image() 
{
var bar = $('#bar');
var percent = $('#percent');
$('#uploader').ajaxForm({
beforeSubmit: function() {
document.getElementById("progress_div").style.display="block";
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
if(xhr.responseText)
{
document.getElementById("output_image").innerHTML=xhr.responseText;
}
}
}); 
}
</script>

把它放到HTML表单中:

<div class='progress' id="progress_div">
<div class='bar' id='bar1'></div>
<div class='percent' id='percent1'>0%</div>
</div>
<div id='output_image'>

上传仍在工作，但进度条不工作，从未出现在页面中，而且，javascript部分使上传刷新页面而不是显示上传文件的下载链接，因为PHP上传脚本函数显示文件的下载链接。

所以我的问题是，我应该在javascript代码中做什么改变，使进度条和上传速度显示在页面上，而不刷新页面?

Answer 1

我用过这段代码，看一看，也许会对你有所帮助:

$.ajax({
url: 'upload.php',
type: 'post',
data: formdata,
contentType: false,
processData: false,
dataType: 'json',
success: function(response){
addThumbnail(response);
$("h1").text("Feldolgozás....");
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
// Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
// console.log(Math.round(percentComplete*100));
}
}, false);
// Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
}
});