显示在多文件上传进度jQuery的/阿贾克斯 [英] Show a progress on multiple file upload Jquery/Ajax

问题描述

我已经上传的形式，允许用户上传多个文件。我决定，进度条将是一件好事，如果这些文件是相当大的。下面是我的源$ C ​​$ C。我是新来的jQuery通常我会只是PHP的，但我发现，Ajax是更加人性化。

I have upload form that allows users to upload multiple files. I decided that a progress bar would be good if the files are quite large. Below is my source code. I am new to jquery normally I would just php but I find that ajax is more user friendly.

<div id="new_upload">
    <div class="close_btn"></div>
    <div id="uploads"></div>
    <form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file">
    <fieldset><legend>Upload an image or video</legend>
    <input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required />
    </fieldset>

    <div class="bar">
        <div class="bar_fill" id="pb">
            <div class="bar_fill_text" id="pt"></div>
        </div>
    </div>

    </form>
</div>
<script>
function OnProgress(event, position, total, percentComplete){    
    //Progress bar
    console.log(total);
    $('#pb').width(percentComplete + '%') //update progressbar percent complete
    $('#pt').html(percentComplete + '%'); //update status text
}
function beforeSubmit(){
    console.log('ajax start');
}
function afterSuccess(data){
    console.log(data);
}
$(document).ready(function(e) {
    $('#upload_file').submit(function(event){
        event.preventDefault();
        var filedata = document.getElementById("file");
        formdata = new FormData();
        var i = 0, len = filedata.files.length, file;
         for (i; i < len; i++) {
            file = filedata.files[i];
            formdata.append("file[]", file);
        }
        formdata.append("json",true);
        $.ajax({
            url: "global.func/file_upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            dataType:"JSON",
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            beforeSubmit: beforeSubmit,
            uploadProgress:OnProgress, 
            success: afterSuccess,
            resetForm: true
        });
    });
});
</script>

图片上传工作正常，数组发送到AJAX，但进度条不动。事实上，对于console.log的两个函数调用需要产生这种不出现任何。有没有一种正确的方法来调用函数在我的AJAX请求会得到这个进度条的工作。

The image upload works fine, the array send to ajax but the progress bar doesn't move. In fact the console.log for the two functions called need to produce this don't appear either. Is there a correct way to call the functions in my ajax request that would get this progress bar to work.

beforeSubmit：beforeSubmit，   上传进度：OnProgress，   成功：afterSuccess，

beforeSubmit: beforeSubmit, uploadProgress:OnProgress, success: afterSuccess,

请注意，这个功能。成功：afterSuccess正作为控制台显示的是我的数据。

NOTE that this function 'success: afterSuccess' is working as the console is displaying my data.

推荐答案

您必须使用自定义XMLHtt prequest与AJAX和jQuery做到这一点。这里有一个例子：<一href="http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery">How我可以上传文件异步使用jQuery？

You must use a custom XMLHttpRequest to do this with AJAX and jQuery. There's an example here: How can I upload files asynchronously with jQuery?

这篇关于显示在多文件上传进度jQuery的/阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！