AJAX:结合上传文件和文本输入代码

AJAX: combining upload file and text input code?

本文关键字：文本 输入 代码 文件 结合 AJAX      更新时间：2023-09-26

我正在使用jQuery和Ajax为我的表单提交数据和文件，但我不确定如何在一个表单中同时发送数据和文件？

我有这样的代码：

$("#save-sm").bind("click", function(event) {
  var url = "sm.input.php";
  var v_name_sm = $('input:text[name=name_sm]').val();
  // sending for process
  $.post(url, {name_sm: v_name_sm, id: id_sm} ,function() {
    // show data <div id="data-sm"></div>
    $("#data-sm").load(main);
    // hide modal dialog
    $('#dialog-sm').modal('hide');
  });
});

我想添加文件上传脚本，就像这个：

$("form#data").submit(function(){
  var formData = new FormData($(this)[0]);
  $.ajax({
    url: window.location.pathname,
    type: 'POST',
    data: formData,
    async: false,
    success: function (data) {
      alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
  });
  return false;
});

如何将所有代码组合在一起，以便我可以一次发送两个代码？

谢谢:D

好的，这是我的最终代码：

$("#save-sm").bind("click", function(event) {
  var v_name_sm = $('input:text[name=name_sm]').val();
  var id_sm = "your variable";
  var formData = new FormData(document.getElementById("form-sm"));
  formData.append("name_sn",v_name_sm);
  formData.append("id",id_sm);
  $.ajax({
    url: 'sm.input.php',
    type: 'POST',
    data: formData,
    async: false,
    enctype: 'multipart/form-data',
    success: function () {
      // show data <div id="data-sm"></div>
      $("#data-sm").load(main);
      // hide modal dialog
      $('#dialog-sm').modal('hide');
    },
    cache: false,
    contentType: false,
    processData: false
  });
  return false;
});

你可以尝试这样的事情：

$("form#data").submit(function(){
  var v_name_sm = $('input:text[name=name_sm]').val();
  var id_sm = "your variable";
  var formData = new FormData($(this)[0]);
  formData.append("name_sn",v_name_sm);
  formData.append("id",id_sm);
  $.ajax({
    url: window.location.pathname,
    type: 'POST',
    data: formData,
    async: false,
    enctype: 'multipart/form-data',
    success: function (data) {
      alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
  });
  return false;
});
相关文章：