1

我正在写一个 WordPress 画廊插件，我想在文件上传时显示一个进度条。我当前的代码可以正常工作并且文件已正确上传，但上传完成后，上传页面看起来像是加载了两次。有谁知道可能导致这种行为的原因是什么？我已经设法将问题缩小到 jQuery，而没有正确重新加载 jQuery 代码页。视频：https ://youtu.be/QDmk6xI1nK8

html:

<form id="image_upload" method="post" enctype="multipart/form-data">
    Prześlij obrazek/obrazki: <br>
    <input type="file" id="upload_file" name="file_to_upload[]" multiple="multiple"><br>
    <input class="button button-primary button-large" type="submit" name="save" value="Prześlij">
    <div id="progress-div"><div id="progress-bar"></div></div>
    <div id="targetLayer"></div>
</form>

php:

if (isset ( $_FILES["file_to_upload"] ) ){

    print_r( $_FILES );


    // Count total files
    $countfiles = count($_FILES['file_to_upload']['name']);

    // Looping all files
    for($i=0;$i<$countfiles;$i++){
        if ( $_FILES['file_to_upload']['error'][$i] == 0 && $_FILES['file_to_upload']['type'][$i] == 'image/jpeg' || $_FILES['file_to_upload']['type'][$i] == 'image/png' || $_FILES['file_to_upload']['type'][$i] == 'image/gif' && $_FILES['file_to_upload']['size'][$i] <= 10485760 ){
            $filename = $_FILES['file_to_upload']['name'][$i];
            // Upload file
            move_uploaded_file($_FILES['file_to_upload']['tmp_name'][$i], ABSPATH . '/wp-content/uploads/protex_gallery_images/'.$filename);
        }
        if ( $_FILES['file_to_upload']['error'][$i] == 1 ){
            echo "There was an error uploading image: " . print_r( $_FILES['file_to_upload']['error'][$i] );
        }
        if ( $_FILES['file_to_upload']['size'][$i] > 10485760 ){
            echo "File " . $_FILES['file_to_upload']['name'][$i] . " is too big to upload it.";
        }
        if ( $_FILES['file_to_upload']['type'][$i] != 'image/jpeg' && $_FILES['file_to_upload']['type'][$i] != 'image/png' && $_FILES['file_to_upload']['type'][$i] != 'image/gif' ){
            echo "File " . $_FILES['file_to_upload']['name'][$i] . " is not an image.";
        }
    }

}

jQuery：

jQuery(document).ready(function() { 

    jQuery('#image_upload').submit(function(e) {
    //alert('alert working!');  
        if(jQuery('#upload_file').val()) {
            e.preventDefault();
            jQuery(this).ajaxSubmit({ 
                target:   '#targetLayer', 
                beforeSubmit: function() {
                    jQuery("#progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){ 
                    jQuery("#progress-bar").width(percentComplete + '%');
                    jQuery("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>');
                },
                success: function(){

                },

        complete: function(){

        },

                resetForm: true 
            }); 
            return false;


        }
    });


});
4

0 回答 0