使用显示错误的表单数据上载文件:未捕获的引用错误:未定义文件输入元素

Question

我正在尝试使用FormData创建文件上传脚本，但出现错误：

Uncaught ReferenceError: fileInputElement is not defined

这是我目前的代码：

$("body").on("click","#addemployeebtn",function(){
event.preventDefault();
var formdata = new FormData();
var file1 = formdata.append("copy_driverslicense", fileInputElement.files[0]);
var $form = $("#employeeformadd");
var $serialized = $form.serialize();
var url = 'includes/addemployee.php';
var posting = $.post(url, {
serialized: $serialized,
file1: $file
});
// Post to addemployee.php and get result message in .addemployee
posting.done(function( data ) {
$( ".addedemployee" ).empty().slideDown('fast').append( data );
});
});

相关网页：

<form id="employeeformadd" method="post" enctype="multipart/form-data">
<input id="copy_driverslicense" type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</form>

我做错了什么？

我正在使用这个网站来尝试学习如何做到这一点：https：//developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Answer 1

我不会考虑代码中的任何其他错误。正是导致错误"未捕获引用"的原因。参考上面给出的代码片段，变量"fileInputElement"没有定义任何导致错误的地方，因为它是空的。而且没有例外。

您应该考虑使用 ID "copy_driverslicence" 访问输入元素，如下所示：

$("body").on("click","#addemployeebtn",function(){
event.preventDefault();
var formdata = new FormData();
//declare first the element;

var fileInputElement=document.getElementById("copy_driverslicence");
var file1 = formdata.append("copy_driverslicense",fileInputElement.files[0]);
var $form = $("#employeeformadd");
var $serialized = $form.serialize();
var url = 'includes/addemployee.php';
var posting = $.post(url, {
serialized: $serialized,
file1: $file
});
// Post to addemployee.php and get result message in .addemployee
posting.done(function( data ) {
$( ".addedemployee" ).empty().slideDown('fast').append( data );
});
});

Answer 2

HTML

<input id="uploadImage" type="file" accept="" class="form-control" name="images" />

JavaScript

var formData = new FormData();
formData.append('file', $('#uploadImage')[0].files[0]);
//formData.append('category_name', category_name);
//formData.append('Language_ID', Language_ID);
$.ajax({
url:$('body').attr('url') + 'admin/media/add_image_category_data',
type:"post",
data: formData, //this is formData
processData:false,
contentType:false,
cache:false,
async:false,
success: function(data){