Question

我正在使用jQuery $ .ajax上传文件。

如何获取进度事件，然后应用适当的设置？

这是我的$ .ajax：

$.ajax({
                url : "upload.php",
                type : "POST",
                data : formData,
                processData : false,
                contentType : false,
                success : function(message, response){
                    document.getElementById("status").innerHTML = response;
                }
            })

我需要的是在上传过程中显示progressBar。我该怎么做到这一点？

注意：我不想要放置加载器的假效果，并且成功删除它并显示正确的数据。我需要的是在上传过程中获取的真实progressData。

Answer 1

这是一个答案检查这个满足php文件上传enter link description here 让我们从编写HTML表单，进度条的元素开始，我们只需要设置样式并将它们转换为漂亮的进度条。

<div id="upload-wrapper">
<div align="center">
<h3>Ajax Image Uploader with Progressbar</h3>
<span class="">Image Type allowed: Jpeg, Jpg, Png and Gif. | Maximum Size 1 MB</span>
<form action="processupload.php" onSubmit="return false" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="ImageFile" id="imageInput" type="file" />
<input type="submit"  id="submit-btn" value="Upload" />
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="progressbox" style="display:none;"><div id="progressbar"></div ><div id="statustxt">0%</div></div>
<div id="output"></div>
</div>
</div>

Css //开始

这是我们的CSS文件的样子，这将变成一个漂亮的进度条。外部进度框设置为400像素宽度，其周围有1个像素边框。 progresbar最初保持隐藏状态，只有在上传开始时才会显示。

#progressbox {
border: 1px solid #0099CC;
padding: 1px; 
position:relative;
width:400px;
border-radius: 3px;
margin: 10px;
display:none;
text-align:left;
}
#progressbar {
height:20px;
border-radius: 3px;
background-color: #003333;
width:1%;
}
#statustxt {
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}

Jquery的

 $(document).ready(function() {  
        var options = { 
                target:   '#output', 
                beforeSubmit:  beforeSubmit,
                uploadProgress: OnProgress, //upload progress callback 
                success:       afterSuccess,
                resetForm: true  
            }; 

         $('#MyUploadForm').submit(function() { 
                $(this).ajaxSubmit(options);            
                return false; 
            });
    });

下面的函数捕获表单插件传递的参数，实时更改进度条的宽度和文本。

function OnProgress(event, position, total, percentComplete)
{
    //Progress bar
    progressbar.width(percentComplete + '%') //update progressbar percent complete
    statustxt.html(percentComplete + '%'); //update status text
    if(percentComplete>50)
        {
            statustxt.css('color','#fff'); //change status text to white after 50%
        }
}

总结此脚本中的其他所有内容与Ajax Image上载相同，您应该在下面的示例文件中找到其余代码。这篇文章很中级，祝你好运！

jQuery ajax进度事件

1 个答案:

Css //开始

Jquery的