在现有上传按钮中附加进度条

Attach progressbar in existing upload button

本文关键字：按钮      更新时间：2023-09-26

我有一个浏览按钮，用户可以通过它浏览高达100 mb的文件。但问题是，当用户提交表单时，它正在上传attch文件。而且它没有在任何地方显示上传了多少文件。我想用进度条显示它。

你可以访问我的网站http://historikindia.com/contact_us.php.

请帮我做。它现在正在向我的电子邮件发送附件。但我需要向用户显示进度条，否则他们可能会认为它没有正确响应（对于大文件上传）。

这是ajax上传器更新状态栏的代码。你需要在你的html页面上有一个html5进度条才能工作。

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}
$('#btnupload').click(function(){
                var formData = new FormData(document.getElementById('fileupload'));
                $.ajax({
                    url: 'upload.php', //server script to process data
                    type: 'POST',
                    xhr: function() {  // custom xhr
                        myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload){ // check if upload property exists                               
                             myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                        }
                        return myXhr;
                    },
                    //Ajax events
                    beforeSend: function (e) { return true; },
                    success: function (json) { return true; },
                    error: function (json) { return false; },
                    // Form data
                    data: formData,
                    dataType: "json",
                    //Options to tell JQuery not to process data or worry about content-type
                    cache: false,
                    processData: false
                });
            });

html5进度条看起来像这个

 <progress value="1" max="100"></progress>
相关文章：