使用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并从那里进行处理。除非文件和数据不远。
答案 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