使用 javascript 和 jquery 以表单形式从类型文件的输入上传文件数据

Question

我有一个文件类型的输入，我需要从这个表单中获取文件数据而不刷新页面我正在尝试使用此功能

function submitForm(form){
  var url = $(form).attr("action");
  var formData = {};
  $(form).find("input[name]").each(function (index, node) {
     formData[node.name] = node.value;
  });
  $.post(url, formData).done(function (data) {
     alert(data);
  }); 
}

但是这个函数获取表单输入的值，但我需要获取所有文件数据（tmp_name、file_name、file_type ...）
所以有人可以帮助我吗
提前致谢

Answer 1

也许您可以通过id 引用您输入的类型文件，然后获取files 属性以获取有关文件的信息。然后您可以遍历文件，例如读取文件对象的 name、size 和 type 属性。

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications https://developer.mozilla.org/en-US/docs/Web/API/File

例如

$("#theForm").submit(function(e) {
  submitForm(this);
  e.preventDefault();
});

function submitForm(form) {
  var url = $(form).attr("action");
  var formData = {};
  formData.filesInfo = [];
  var files = $('#inputFile').prop("files");

  $(files).each(function() {
    var fileInfo = {};
    fileInfo.name = this.name;
    fileInfo.size = this.size;
    fileInfo.type = this.type;
    formData.filesInfo.push(fileInfo);
  });

  $.post(url, formData).done(function (data) {
    alert(data);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="theForm">
    <input type="file" id="inputFile">
    <input type="submit" name="submit" id="submit">
</form>

使用 javascript 和 jquery 以表单形式从类型文件的输入上传文件数据

Upload file data from input of type file in a form using javascript and jquery

javascript

forms

upload