通过ajax上传图像时未定义索引“文件”

Question

嘿，我正在尝试向 mysql 数据库提交表单。不过，该表单位于模式内部。然后，数据通过 ajax 发送到 ajax 处理程序，并运行 php 函数。每次在处理程序中写入“文件”一词时，我都会收到错误。这是我的表单、ajax 和处理程序。

表单输入：

<div class="form-group">

    <label>Image</label>

    <input type="file" class="addInput" name="image" id="newImage" placeholder="">

</div>

JavaScript/Ajax

var name = $('#newName').val();

              var description = $('#newDescription').val();

              var notes = $('#newNotes').val();

              var status = ($('#newStatus').is(":checked") ? 'active' : '');

              var slug = $('#newSlug').val();

              var start_date = $('#newStartDate').val();

              var end_date = $('#newEndDate').val();

              var image = $('#newImage').val();

              let data = {

                action: 'NewEventExhibition',

                name: name,

                description: description,

                notes: notes,

                status: status,

                slug: slug,

                start_date: start_date,

                end_date: end_date,

                image: image,

                event_code: '<?=$code?>'

              };

              console.log(data);

              $.ajax({

                url: '/modules/ajax/ajax_handler.php',

                type: 'POST',

                data: data,

                success: function(response) {

                  console.log(response);

                },

                fail: function(response) {

                  console.log(response);

                }

              })

处理程序

$added = $image = $filename = $imagefile = $imagefilesuccess1 = $imagefilewarning1 = NULL;

        if(!empty($_POST['image'])){

        $filename=($_SERVER['DOCUMENT_ROOT']."/assets/images/" . $_FILES["file"]["name"]);

        $imagefile=($_FILES["file"]["name"]);

            $path="/assets/images/".$imagefile."";

        $allowedExts = array("gif", "jpeg", "jpg", "png", "JPG", "PNG");

        $tmp = explode(".", $imagefile);

我只将图像代码包含在 ajax 处理程序中。$image底部的变量是我用来上传的变量。

Answer 1

要通过 ajax 上传文件，您可以使用FormData。但首先你需要查看你的浏览器是否支持 XHR2 ，并不是每个浏览器都支持通过 ajax 发送文件。因此，如果您想让脚本在每个浏览器中工作，最好采取解决办法，（尝试在隐藏输入中执行 Base64，或者使用 iram，以便 iram 单独刷新）支持XHR2 的浏览器因此，要添加 formData，您可以在 js 脚本中做一些更改：  var formData = new FormData($('#yourform')[0]);或者如果您不想在 yout html 中创建任何表单：var formData = new FormData();formData.append('name',$('#name').val());formData.append('image',$('#image').get(0).files[0]);。 编辑你也可以尝试这个：<input type="file" onchange="PrepareFile(this)" >并初始化一个全局formDataasync function PrepareFile(file) {             formData.append("file", file.files[0]);}.... // inside   $.ajax({    data: formData,    dataType: 'json',    mimeType: 'multipart/form-data', // this too    contentType: false,    cache: false,    processData: false,....或者您可以使用XMLHttpRequest，在这种情况下，您将放弃 ajax 仅适用于 javascript ，但不适用于 IE<10。