Javascript 获取包含文件输入的表单的数据_Javascript_Jquery_Html_Forms

Javascript 获取包含文件输入的表单的数据

javascript jquery html forms

Javascript 获取包含文件输入的表单的数据,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有以下html表单： <form method="post" class="treeWidgetForm" enctype="multipart/form-data"> <div class="row"> <label>Photo :</label> <br/>

我有以下html表单：

<form method="post" class="treeWidgetForm" enctype="multipart/form-data">
                                <div class="row">
                                    <label>Photo :</label> <br/>
                                    <input type="file" name="imgFile">
                                </div>
                                <div class="row">
                                    <label>Firstname :</label> <br/>
                                    <input type="text" name="firstname" class="treeWidgetInput"/>
                                </div>

                                <div class="row">
                                    <label>Lastname :</label> <br/>
                                    <input type="text" name="lastname" class="treeWidgetInput"/>
                                </div>

                                <div class="row">
                                    <label>Gender :</label> <br/>
                                    <label class="treeWidgetRadio"><input type="radio" name="gender" value="male">Male
                                    </label>
                                    <label class="treeWidgetRadio"><input type="radio" name="gender"
                                                                          value="female">Female
                                    </label>
                                </div>

                                <div class="row">
                                    <label>Birth date :</label> <br/>
                                    <input id="birthdate" type="text" name="birthdate" class="treeWidgetInput"/>
                                </div>

                                <div class="row">
                                    <label>Death date :</label> <br/>
                                    <input id="deathdate" type="text" name="deathdate" class="treeWidgetInput"/>
                                </div>

                                <div class="row">
                                    <label>Nationality :</label> <br/>
                                    <select name="nationality" class="treeWidgetInput"></select>
                                </div>

                                <div class="row">
                                    <label>Country :</label> <br/>
                                    <select name="country" class="treeWidgetInput"></select>
                                </div>

                                <div class="row spaced">
                                    <div class="col-lg-12">
                                        <button type="reset" class="btn btn-default treeWidgetFormBtn"
                                                data-operation="cancelPerson">Cancel</button>
                                        <button type="submit" class="btn btn-primary treeWidgetFormBtn"
                                                data-operation="savePerson">Save</button>
                                    </div>
                                </div>
                            </form>

它适用于除“file”输入之外的所有表单字段。它无法获取我尝试在“file”类型的名为“imgFile”的输入中传递的文件对象。我做了一些搜索，偶然发现了FormData函数。我重写了如下函数：

FormUtils.getFormData = function(form) {
    var data = new FormData($(form)[0]);
    return data;
};

$.ajax({
        url: url,
        data: dataObj,
        type: "PUT",
        processData: false,
        contentType: false
});

FormData函数返回一个空对象。以下是一些Chrome调试屏幕截图：

我不明白为什么FormData会创建一个空对象。我可以从调试器中看到，传递给函数的“form”对象是一个form元素。我应该如何创建数据对象，以便按如下方式发送：

FormUtils.getFormData = function(form) {
    var data = new FormData($(form)[0]);
    return data;
};

$.ajax({
        url: url,
        data: dataObj,
        type: "PUT",
        processData: false,
        contentType: false
});

您可以尝试类似这样的FileReaderAPI

<!DOCTYPE html>
<html>
<head>
<script>        
  function handleFileSelect()
  {               
    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
      alert('The File APIs are not fully supported in this browser.');
      return;
    }   

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");               
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      //fr.readAsText(file);
      fr.readAsDataURL(file);
    }
  }

  function receivedText() {           
    //result = fr.result;
               document.getElementById('editor').appendChild(document.createTextNode(fr.result))
  }           

</script>
</head>
<body>
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'>
<div id="editor"></div>
</body>
</html>


函数handleFileSelect（）
{               
如果（！window.File | | |！window.FileReader | |！window.FileList | |！window.Blob）{
警报（'此浏览器不完全支持文件API'）；
返回；
}   
输入=document.getElementById（'fileinput'）；
如果（！输入）{
警报（“嗯，找不到fileinput元素。”）；
}
如果（！input.files）{
警报（“此浏览器似乎不支持文件输入的`files`属性。”）；
}
如果（！input.files[0]），则为else{
警报（“请在单击“加载”之前选择一个文件”）；
}
否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=接收到的文本；
//fr.readAsText（文件）；
fr.readAsDataURL（文件）；
}
}
函数receivedText（）{
//结果=fr.result；
document.getElementById（'editor'）.appendChild（document.createTextNode（fr.result））
}

您可以在这里找到一些知识：

这确实有效。但是，它类似于异步调用。我正试图找出FormData函数的错误所在。从我看到的例子来看，FormData似乎是最简单的一个。