Javascript REST调用的基本HTML进度条实现_Javascript_Html_Rest_File Upload

Javascript REST调用的基本HTML进度条实现

javascript html rest file-upload

Javascript REST调用的基本HTML进度条实现,javascript,html,rest,file-upload,Javascript,Html,Rest,File Upload,我想为上传文件REST请求实现一个进度条或微调器，直到它完成。我的HTML代码如下所示： <html> <body> <form action="http://localhost:8080/services/rest/fileupload" method="post" enctype="multipart/form-data"> <b>Upload Supported Files:</b>

我想为上传文件REST请求实现一个进度条或微调器，直到它完成。我的HTML代码如下所示：

<html>
    <body>
        <form action="http://localhost:8080/services/rest/fileupload" method="post" enctype="multipart/form-data">
            <b>Upload Supported Files:</b>
            <input type="file" name="file" id="file" />
            <input type="submit">
        </form>
    </body>
</html>


上载支持的文件：

一旦开始，我可以正确上传文件，但在上传完成之前，我必须保持在同一页面上。我想实现一个“请等待…”类型的弹出消息或进度条，从开始到POST请求完成。我如何在尽量少使用库的情况下实现这一点

提前感谢。

您可以尝试此描述如何实现进度条

$.ajax({
    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);
            }
       }, 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;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        // Do something success-ish
    }
});

您可以使用

ajaxForm

执行此操作

您需要为

ajaxForm

<script src="http://malsup.github.com/jquery.form.js"></script>

不管是谁投了反对票，请在评论部分解释原因，因为这会影响他人的声誉。

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
}); 

 <form action="http://localhost:8080/services/rest/fileupload" method="post" enctype="multipart/form-data">
        <b>Upload Supported Files:</b>
        <input type="file" name="file" id="file" />
        <input type="submit">
    </form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>