当前位置: 首页 > 面试题库 >

显示多个文件上传Jquery / Ajax的进度

司寇昱
2023-03-14
问题内容

我有上传表格,允许用户上传多个文件。我决定,如果文件很大,则进度条会很好。下面是我的源代码。我是jQuery的新手,通常我只会使用php,但是我发现ajax更加用户友好。

<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请求中的函数,以使此进度条正常工作。

beforeSubmit:beforeSubmit,uploadProgress:OnProgress,成功:afterSuccess,

请注意,此功能“成功:afterSuccess”在控制台显示我的数据时起作用。


问题答案:

这是您的HTML表单

<form method="post" action="uploadImages.php" name ='photo' id='imageuploadform' enctype="multipart/form-data">
        <input hidden="true" id="fileupload" type="file" name="image[]" multiple >

        <div id ="divleft">
            <button id="btnupload"></button>

        </div>

    </form>

这是您的JQuery和Ajax。默认情况下,fileInput是隐藏的。

点击了上传按钮

$("#btnupload").click(function(e) {

    $("#fileupload").click();
    e.preventDefault();

});


$('#fileupload').change(function (e) {

    $("#imageuploadform").submit();
    e.preventDefault();

});

$('#imageuploadform').submit(function(e) {

    var formData = new FormData(this);

    $.ajax({
        type:'POST',
        url: 'ajax/uploadImages',
        data:formData,
        xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',progress, false);
                }
                return myXhr;
        },
        cache:false,
        contentType: false,
        processData: false,

        success:function(data){
            console.log(data);

          alert('data returned successfully');

        },

        error: function(data){
            console.log(data);
        }
    });

    e.preventDefault();

});


function progress(e){

    if(e.lengthComputable){
        var max = e.total;
        var current = e.loaded;

        var Percentage = (current * 100)/max;
        console.log(Percentage);


        if(Percentage >= 100)
        {
           // process completed  
        }
    }  
 }

您的php代码如下所示

<?php

header('Content-Type: application/json');

       $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
        $max_size = 30000 * 1024; // max file size in bytes

        $json = array();

            if ( $_SERVER['REQUEST_METHOD'] === 'POST' )
            {
                for($i=0;$i<count($_FILES['image']['tmp_name']);$i++)
                {
                    $path="image/uploads/photos/";

                    if(is_uploaded_file($_FILES['image']['tmp_name'][$i]) )
                    {
                      // get uploaded file extension
                      $ext = strtolower(pathinfo($_FILES['image']['name'][$i], PATHINFO_EXTENSION));
                      // looking for format and size validity
                          if (in_array($ext, $valid_exts) AND $_FILES['image']['size'][$i] < $max_size)
                          {
                                  // unique file path
                                  $uid = uniqid();
                                  $date = date('Y-m-d-H-i-s');
                                  $path = $path ."image_" .$date. '_' . $uid . "." .$ext;

                                  $returnJson[]= array("filepath"=>$path);

                                  $filename = "image_" . $date . "_" .$uid . "." . $ext;
                                  $this->createthumb($i,$filename);

                                    // move uploaded file from temp to uploads directory
                                  if (move_uploaded_file($_FILES['image']['tmp_name'][$i], $path))
                                  {
                                    //$status = 'Image successfully uploaded!';
                                      //perform sql updates here

                                  }
                                  else {
                                    $status = 'Upload Fail: Unknown error occurred!';
                                  }


                          }
                          else {
                            $status = 'Upload Fail: Unsupported file format or It is too large to upload!';
                          }
                    }
                    else {
                      $status = 'Upload Fail: File not uploaded!';
                    }
                }
              }
            else {
              $status = 'Bad request!';
            }


            echo json_encode($json);

?>


 类似资料:
  • 问题内容: 看来我还没有清楚地传达出我的问题。我需要发送一个文件(使用AJAX),并且需要使用Nginx HttpUploadProgressModule 获取文件的上传进度。我需要一个很好的解决方案。我已经尝试过使用jquery.uploadprogress插件,但是我发现自己不得不重写其中的大部分内容,以使其在所有浏览器中都能正常工作并使用AJAX发送文件。 我所需要的只是执行此操作的代码,它

  • 问题内容: 我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上传吗? 如果可能,我是否需要填写部分?这是正确的方法吗?我只将文件发布到服务器端。 我一直在搜索,但是我发现是一个插件,而在我的计划中我不想使用它。至少目前是这样。 问题答案: 上传文件是 不是 有可能通过AJAX。 您可以使用来上传文件,而无需刷新页面。 更新 使用XHR2,支持通过AJAX上传文件。例如通过对象,

  • 问题内容: 我遇到了这个简单的js ajax上传代码(由于某种原因,jquery 似乎不适用于HTML5), 但是我这里有两个问题, 这条线在物体之后是什么意思? 为什么在那里需要ID?我能做些什么使用jQuery 用? 此ajax仅用于单个文件上传,如何更改多个文件上传? 问题答案: 这行在对象FormData之后是什么意思? 在得到由它的ID元件。该抓住从元件中的第一选择的文件。将其追加到与字

  • 本文向大家介绍jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码,包括了jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码的使用技巧和注意事项,需要的朋友参考一下 本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 完整实例代码点击此处本站下载。 效果图如下: 实现代码如下: JavaScri

  • 问题内容: 我已经尝试上传一个简单的文本文件了几个小时,但似乎仍然无法正常工作。 我不断收到无效的表格,说我缺少“ file_source”。 为什么“ file_source”没有发布? 我还可以发送“ file_source”,但是它仍然说它丢失了。应该为Django FileFiled提供哪种类型的元素? Django表格: Django模板(呈报形式): jQuery / Ajax上传:

  • 问题内容: 我想在我的Intranet页面上实现一个简单的文件上传,并使用最小的设置。 这是我的HTML部分: 这是我的JS jQuery脚本: 网站的根目录中有一个名为“ uploads”的文件夹,具有“用户”和“ IIS_users”的更改权限。 当我选择具有文件格式的文件并按下上载按钮时,第一个警报将返回“ [object FormData]”。第二个警报不会被调用,“上传”文件夹也为空!