Question

我正在尝试ajax文件上传。我在另一个节目中尝试了相同的脚本。它运作正常。但现在它不起作用。在服务器端，我使用var_dump($_FILES["uploadFiles"]);得到'Null' var_dump($_POST["uploadFiles"]);返回一个空数组：array（1）{[0] =＆gt; string（0）“”}

所以我怀疑apache / php配置存在一些问题。

给出here的解决方案之一讨论了htaccess重定向规则。这是我的htaccess内容：

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress</code>

我的htaccess内容有什么问题吗？

如果没有其他可能是$ _FILES为空的原因？

我的php.ini变量：

post_max_size = 160M
upload_max_filesize = 100M
upload_tmp_dir = "/tmp/"
file_uploads = On 
max_file_uploads = 20

先谢谢你的帮助。

更新

浏览器中的响应标头： enter image description here

这是我的代码：

  <form class="inputF" id="entry_upload_form" action="" method="post" enctype="multipart/form-data">

        <div class="field_text">
         Attach file:  
        </div>
        <input type="file" name="file1[]" id="file1"> <br>

        <div class="field_text">
         Attach file:  
        </div>
        <input type="file" name="file2[]" id="file2"> <br>

        <div class="field_text">
         Attach file:  
        </div>
        <input type="file" name="file3[]" id="file3"> <br>

        <div class="buttonRow">
          <button class="submit buttons greenButton">Post</button> 
          <button class="reset buttons blueButton">Reset</button>
        </div>
  </form>

我的jQuery的一部分：

var fileSelect = document.getElementById('file1');
    files1 = fileSelect.files;

    if(files1.length != 0) {
        files[i] = fileSelect.files;
        i++;
    }

    fileSelect = document.getElementById('file2');
    files1 = fileSelect.files;

    if(files1.length != 0) {
        files[i] = fileSelect.files;
        i++;
    }

    fileSelect = document.getElementById('file3');
    files1 = fileSelect.files;

    if(files1.length != 0) {
        files[i] = fileSelect.files;
        i++;
    }

    // Create a new FormData object.
    var formData = new FormData();

    // Loop through each of the selected files.
    for (var i = 0; i < files.length; i++) {
      var file = files[i];

      // Add the file to the request.
      formData.append('uploadFiles[]', file, file.name);
    }

    jQuery.ajax({
        url: content_url + '/themes/Karma/entry-portal/ajax_upload.php',  //Server script to process data
        type: 'POST',
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = jQuery.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: function () {
                //jQuery("#wpboulevard_progressBar").show();
            },
        success: function (response) {
                //jQuery('#wpboulevard_upload_status').html(response);
            },
                //error: errorHandler,
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
//On success
    function completeHandler(){
        jQuery().html('Files uploaded successfully');
    }

    //Progress handling function
    function progressHandlingFunction(e){
        if(e.lengthComputable){
            jQuery('progress').attr({value:e.loaded,max:e.total});
        }
    }
});

Answer 1

将您的HTML更改为：

<form class="inputF" id="entry_upload_form" enctype="multipart/form-data">
        <div class="field_text">Attach file:</div>
        <input type="file" name="files[]" id="myFiles" multiple> <br>

        <div class="buttonRow">
          <button class="submit buttons greenButton">Post</button> 
          <button class="reset buttons blueButton">Reset</button>
        </div>
  </form>

HTML更改将允许用户仅使用一个文件输入上载多个文件。如果您只想将用户限制为3个文件，可以在客户端使用一些javascript执行此操作，或者您可以在服务器端使用PHP执行此操作。用户可以按住CTRL或Shift键，一次选择要上传的多个文件。

现在改变这部分javascript / jQuery：

    var fileSelect = document.getElementById('file1');
    files1 = fileSelect.files;

    if(files1.length != 0) {
        files[i] = fileSelect.files;
        i++;
    }

    fileSelect = document.getElementById('file2');
    files1 = fileSelect.files;

    if(files1.length != 0) {
        files[i] = fileSelect.files;
        i++;
    }

    fileSelect = document.getElementById('file3');
    files1 = fileSelect.files;

    if(files1.length != 0) {
        files[i] = fileSelect.files;
        i++;
    }

    // Create a new FormData object.
    var formData = new FormData();

    // Loop through each of the selected files.
    for (var i = 0; i < files.length; i++) {
      var file = files[i];

      // Add the file to the request.
      formData.append('uploadFiles[]', file, file.name);
    }

至此：

var formData = new FormData();
// Loop through each file attached for upload and append it to formData
$.each($('#myFiles')[0].files, function(i, file) {
    formData.append('uploadFiles['+i+']', file);
});

$ _FILES为null，$ _POST为空数组

1 个答案: