Question

在此代码中，我在ajax请求上发送formdata，但目标文件上的$_POST数组为空

('#uploadImgForm').submit(function(e){
        e.preventDefault();
        var files = $('#selectedFiles')[0].files;
        var correct = true;
        var form = $(this);
        var data = new FormData();

        //si contiene ficheros
        if(files.length > 0){
            Array.from(files).forEach(file => {
            var filename = file.name.toLowerCase();


            //recorrer los ficheros para comprobar que son imagenes
            if(!(/^.+\.(gif|jpg|jpeg|png)$/i).test(filename))
                correct = false;
            else{
                data.append(filename, file);

            }
        });

            console.log(data);
            //si todos son imagenes se envia el formulario
            if(correct){
                $.ajax({
                    url: 'imageUpload.php',
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    method: 'POST',
                    success: function(response){
                        console.log(response);
                    }
                });

            }else{//si hay algun fichero que no sea una iamgen ,avisar
                alert("Los ficheros seleccionados deben ser imágenes");
            }
        }else{//si no contiene ficheros,avisar
            alert("Debes seleccionar almenos una imagen");
        }


    });

我认为一切正确，如果我将另一个值附加到formdata（不是文件），则会在目标文件中收到

Answer 1

首先需要添加

的multipart / form-data的

在您的请求标头中，您在使用文件类型数据发出请求时总是这样做。

如果您在FormData实例中附加文件数据（在您的情况下是数据）。您使用append方法在FormData中追加数据并使用方法get（key）来获取与FormData中的键相关联的值。

所以你的console.log（数据）不会打印任何文件对象，但是

的console.log（data.get（＆＃34;文件＆＃34））

将会执行，其中file是您用来追加文件的密钥。

读到这个： https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 2

不确定为什么会这样。尝试发布html位。

另一个解决方案是输入接受属性。这样它只允许在accept属性中指定的文件。

<form id='uploadImgForm'>
  <!-- If uploading multiple files, the name should have an '[]' at the end, implying its an array of files -->
  <input type='file' multiple name='uploaded_files[]' accept="image/*" />

  <!-- If uploading single file use like this -->
  <input type='file' name='uploaded_files' accept="image/*" />

  <button type='submit'>Upload Files</button>
</form>

使用Javascript：

('#uploadImgForm').submit(function(e){
    e.preventDefault();
    var data = new FormData(this);
    $.ajax({
      url: 'imageUpload.php',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      method: 'POST',
      success: function(response){
        console.log(response);
      }
    });
});

文件应出现在uploaded_files键下的$ _POST中。注意如果上传了多个文件，uploaded_files将是一个数组。

appendin data fto formData，该对象为空

2 个答案: