无法读取文件上传的未定义属性“ 0”

时间:2019-09-13 23:58:43

标签: javascript jquery ajax

使用Jquery 3.1.1和AJAX将表单提交到PHP> SQL时遇到问题。它一直给我错误“无法读取属性“ 0”未定义”。我在这里和网络上搜索了解决方案,并尝试了它们,但错误仍然存​​在。

感谢您的帮助。

$(document).ready(function (e) {
                $('.aulform').submit(function(e) {
              e.preventDefault();
              var form = new FormData();
              var title = $('.lesson-title');
              var description = $('.lesson-description');
              var category = $('.lesson-category');
              var tags = $('.lesson-tags');
              var post_files = this.files[0];

              console.log(post_files);

              var name = post_files.name;
              var type = post_files.type;
              var size = post_files.size;

                    form.append("audio_lesson", file);    
                    form.append("title", title.val());
                    form.append("description", description.val());
                    form.append("category", category.val());
                    form.append("tags", tags.val());
                    form.append("post_files", post_files);
                    $.ajax({
                        url: DIR+"/upload.php",
                        dataType: "text", 
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: form,
                        type: "POST",

                        });
                        }
                    });
                });

}(jQuery));

我的HTML看起来像这样:

<form class="aulform"  action="" method="post" enctype="multipart/form-data" onsubmit="return false">
            <input class="create_post lesson-title" name="lesson-title" type="text" /><br/>
                <input type="file" class="custom-file-input audio-file" name="file[]" id="audioUploadInput" onChange="uploadOnChange(this)" accept="mp3">
            <div>
                <span class="fname_left">File Selected:</span>
                <input type="text" name="" class="fname_right" id="upload-filename" readonly>
            </div>

            <script type="text/javascript">
                function uploadOnChange(e) {
                  var filename = e.value;
                  var lastIndex = filename.lastIndexOf("\\");
                  if (lastIndex >= 0 ) {
                      filename = filename.substring(lastIndex + 1);
                  }
                  document.getElementById("upload-filename").value = filename;
                }
            </script>
            <textarea class="create_post lesson-description" name="lesson-description" type="text" ></textarea><br/>
            <input class="create_post lesson-category" name="lesson-category" type="text"/><br/>
            <input class="create_post lesson-tags" name="lesson-tags" type="text"/><br/>
<input  class="pri_btn aud_submit" type="submit" name="submit" value="Upload">
</form>

我需要文件和数据提交到PHP并从那里进行处理。除非文件和数据不远。

1 个答案:

答案 0 :(得分:1)

出错的行是this.files[0],这是因为this.files为空。

您很可能希望引用文件输入而不是表单本身:

$('.custom-file-input').get(0).files而非this.files.submit()事件中的引用是表单)

您应该阅读如何使用new FormData正确提取文件。

更多信息在这里:https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects