Question

我的网站上有一个HTML表单，可以接受application/pdf file type

<input id="userfile" name="userfile" type="file" accept="application/pdf" style="display:none"/>

还有一个js函数来处理文件并发出ajax请求：

$('#userfile').on('input', function() {
    var test_test = $('#userfile')[0].files[0];
    var test_form = new FormData();
    test_form.append('file', test_test);
    console.log($('#userfile')[0].files[0]);
    $.ajax({
        url: 'dinkle_berry_test.php',
        method: 'POST',
        processData: false,
        contentType: false,
        cache: false,
        data: {test_form},
        success: function(data){
            console.log(data);
                }
        });
    })

这是我可以在控制台中确认的内容：

但是，提交后，php回显：

<br />
<b>Notice</b>:  Undefined index: file in <b>C:\xampp\htdocs\dinkle_berry_test.php</b> on line <b>10</b><br />

我的dinkle_berry_test.php的PHP代码：

move_uploaded_file($_FILES['file']['tmp_name'], 'C:/xampp/htdocs/tmp_upload/' . $_FILES['file']['name']);

我似乎无法将文件上传到此文件夹。不知道发生了什么。我已经准备好多种表格，但似乎找不到有效的答案。

Answer 1

我认为您的问题是这样的：

data: {test_form},

要测试是否在服务器端获取任何文件，请打印文件变量的输出：

echo var_dump($_FILES);

并记下您的结果。

但是：

我有一个处理所有表单元素的脚本：

function ToAjax(form) { //target form
    var jsonObj = [];
    var formData = new FormData();
    //Form element
    $('[name="' + form + '"] *').not(':input[type=file], :input[type=button], :input[type=submit], :input[type=reset], :input[type=checkbox]:not(:checked)').filter(':input').each(function(obj, v) {
        var iObj = {};
        var input = $(this);
        var inputname = input.attr("name");
        if (typeof inputname !== typeof undefined && inputname !== false) { //handle attribute names
            inputname = inputname.replace(/-/g, '_'); //handle underscore
            var val = input.val();
            var inputval = val;
            iObj[inputname] = inputval;
            jsonObj.push(iObj);
        }
    });
    //Summernote textarea editor
    $('[name="' + form + '"] *').filter('div.sumertextarea').each(function(obj, v) {
        var iObj = {};
        var input = $(this);
        var inputname = input.attr("data-name");
        inputname = inputname.replace(/-/g, '_');
        var val = input.summernote('code');
        var inputval = val;
        iObj[inputname] = inputval;
        jsonObj.push(iObj);
    });
    //compres in json data
    jsonData = JSON.stringify(jsonObj);
    //parse json to formdata
    formData.append('jsonData', jsonData);
    //handle all file types input
    $('[name="' + form + '"] *').filter(':input[type=file]').each(function(obj, v) {
        if (typeof v.files[0] != 'undefined') {
            var file = v.files[0];
            var name = $(v).attr("name");
            name = name.replace(/-/g, '_');
            formData.append(name, file);
        }
    });
    //handle all File type from dropzone plugin
    $('[name="' + form + '"] *').filter('div.dropzone').each(function() {
        var DropFile = $(this)[0].dropzone.getAcceptedFiles();
        for (Nof in DropFile) {
            var file = DropFile[Nof];
            var name = DropFile[Nof].name;
            name = name.replace(/-/g, '_');
            formData.append(name, file);
        }
    });
    //send all data packet to send ajax function.
    window.SendAjax(formData);
}

使用以下命令发送到服务器端：

function SendAjax(formdata) {
    var url = 'index.php';
    $.ajax({
        url: url,
        data: formdata,
        contentType: false,
        processData: false,
        type: 'POST',
        cache: false,
        error: function(xhr, status, error) {
            console.log(error);
            alert(error);
        },
        success: function(resp) {
            console.log(resp);
            alert(resp);
        }
    });
}

是的，我使用的是contenType: false而不是contentType: 'multipart/form-data',

因为我可以在服务器端更轻松地处理数据，所以要访问具有2个seccion文件系统或dropzone插件的文件，请检查结果数组的差异，以适应或在项目中使用它：

2个文件示例同时发送，PDF和JPG这个$ _FILES通用格式和dropzone插件的输出测试：

["i_file"]=>
  array(5) {
    ["name"]=>
    array(2) {
      [0]=>
      string(10) "test.pdf"
      [1]=>
      string(10) "test.jpg"
    }
    ["type"]=>
    array(2) {
      [0]=>
      string(15) "application/pdf"
      [1]=>
      string(10) "image/jpeg"
    }
    ["tmp_name"]=>
    array(2) {
      [0]=>
      string(24) "C  :\ xampp\tmp\phpDDC5.tmp"
      [1]=>
      string(24) "C  :\ xampp\tmp\phpDDC6.tmp"
    }
    ["error"]=>
    array(2) {
      [0]=>
      int(0)
      [1]=>
      int(0)
    }
    ["size"]=>
    array(2) {
      [0]=>
      int(180572)
      [1]=>
      int(8984)
    }
  }

使用dropzone插件：

["test_jpg"]=>
  array(5) {
    ["name"]=>
    string(10) "prueba.jpg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(24) "C  :\ xampp\tmp\phpDDC7.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(8984)
  }
  ["test_pdf"]=>
  array(5) {
    ["name"]=>
    string(10) "prueba.pdf"
    ["type"]=>
    string(15) "application/pdf"
    ["tmp_name"]=>
    string(24) "C  :\ xampp\tmp\phpDDC8.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(180572)
  }

Answer 2

问题是将formData()括在花括号{}中。

因为formData已经是一个对象，所以我将对象的对象发送到php文件。我只是从ajax调用的data参数中删除了{}，一切都按预期运行。

这是在php中有效的方法：

move_uploaded_file($_FILES['file']['tmp_name'], 'C:/xampp/htdoc/tmp/' . $_FILES['file']['name']);

希望这对某人有帮助。在处理任何项目中的数据类型时要小心。

Answer 3

您的文件字段名称为userfile，在php后端中，您正在调用文件字段，因此出现错误。将您的后端更改为

move_uploaded_file($_FILES['userfile']['tmp_name']

它将运行您的ajax，并且一切正常。

Answer 4

在ajax请求中使用数据之前，为什么不使用FormData处理数据？这是链接：LINK

希望这会有所帮助

使用ajax处理文件上传

4 个答案: