javascript - 使用 jQuery AJAX 和 PHP 创建文件上传进度条

Question

首先，我希望每个人都明白，我确实查看了 stackoverflow 上的所有其他示例，但没有一个对我有用。我想要做的是创建一个进度条，显示文件的上传量(100%)。我有 3 个脚本:upload.php(包含表单)、fileUpload.php(用于上传文件的脚本)和 script.js(包含 jQuery AJAX 代码)。

似乎没有什么效果。使用下面的代码，Ajax 返回一条成功消息，但是进度条没有改变，没有任何内容上传到文件夹，并且文件本身保留在文件输入中。问题出在 script.js 内的 ajax 代码中，因为我可以在没有 ajax 代码的情况下上传文件。

/* upload.php
--------------------------------------------------------*/
<div class="form-wrapper">
    <form method="post" id="uploadForm" action="fileUpload.php" role="form" enctype="multipart/form-data">
        <legend>Upload</legend>
        <div class="form-group">
            <label for="fileUpload">File</label>
            <input type="file" id="fileUpload" name="fileUpload"/>
        </div>
        <button type="submit" id="uploadBtn" class="btn btn-success">Submit</button>
    </form>
    <br>
    <div id="progress" class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
        </div>
    </div>
    <span id="sr-only"></span>
</div>


/* fileUpload.php
--------------------------------------------------------*/
<?php

if ($_FILES['fileUpload']['size'] != 0) {

    $name = $_FILES['fileUpload']['name'];
    $data = $_FILES['fileUpload']['tmp_name'];

    $fileDir = "C:\\wamp\\www\\Business\\Images\\$name";
    move_uploaded_file($data, $fileDir);
} 
?>


/* script.js
--------------------------------------------------------*/
$(document).ready(function() {

    $("#progress").hide();
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();

        var $form = $(this);
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            beforeSend:function() {
                $("#progress").show();
            },
            uploadProgress:function(event, position, total, percentageComplete) {
                $("#progress-bar").attr("value", percentageComplete);
                $("#progress-bar").width(percentageComplete + "%");
            },
            success:function() {
                $("#sr-only").html("Success");
            }
        });
    });
});

Answer 1

请参阅 PHP AJAX 文件上传的 jQuery 进度栏，这将完成这项工作。

显示进度条的文件上传表单

<form id="uploadForm" action="upload.php" method="post">
    <div>
        <label>Upload Image File:</label>
        <input name="userImage" id="userImage" type="file" class="demoInputBox" />
    </div>
    <div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
    <div id="progress-div"><div id="progress-bar"></div></div>
    <div id="targetLayer"></div>
</form>
<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div>

jQuery 表单提交

$(document).ready(function() { 
    $('#uploadForm').submit(function(e) {   
        if($('#userImage').val()) {
            e.preventDefault();
            $('#loader-icon').show();
            $(this).ajaxSubmit({ 
                target:   '#targetLayer', 
                beforeSubmit: function() {
                    $("#progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){ 
                    $("#progress-bar").width(percentComplete + '%');
                    $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
                },
                success:function (){
                    $('#loader-icon').hide();
                },
                resetForm: true 
            }); 
            return false; 
        }
    });
});

http://phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload/