javascript - 如何从 Bootstrap Modal 发布文件和表单数据

Question

我在从引导模式发布文件和表单数据时遇到问题。

我有代码可以从中发布文件附件，但我无法通过其他字段

我的 Javascript 在下面

$(document).ready(function(){
  $('#upload').click(function(){

    var fd = new FormData();
    var files = $('#file')[0].files[0];
    fd.append('file',files);

    // AJAX request
    $.ajax({
      url: 'clienttest.php',
      type: 'post',
      data: fd,
      contentType: false,
      processData: false,
      success: function(response){
        if(response != 0){
          // Show image preview
          $('#preview').html(" Process Started");
        }else{
          alert('file not uploaded');
        }
      }
    });
  });
});

我的表单数据如下

                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">Load Secure Document</h4>
                            </div>
                            <div class="modal-body">
                            <form method='post' action='' enctype="multipart/form-data">
                            <label for="nametag">Name</label>
                            <input type="text" name="nametag" size="20" />

                            Select file : <input type='file' name='file' id='file' class='form-control' ><br>
                            <input type='button' class='btn btn-info' value='Upload' id='upload'>
                            </form>

                            <!-- Preview-->
                            <div id='preview'></div>
                            </div>
                            <div class="modal-body3">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

最后我有了接收数据的文件，保存文件并将人员姓名通过电子邮件发送给我检查

// file name
$filename = $_FILES['file']['name'];

// Location
$location = $filename;

// file extension
$file_extension = pathinfo($location, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);

// Valid image extensions
$image_ext = array("jpg","png","jpeg","gif","pdf");

$response = 0;
if(in_array($file_extension,$image_ext)){
  // Upload file
  if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
    $response = $location;
  }
}

mail ('email@email.com','email of name',"name is ".$_POST['nametag']);

echo $response;

我确信 Javascript 函数中有一些东西需要添加，很可能是在标记为数据的行上，但我无法在 Internet 上找到它是什么。有人可以帮忙吗。

Answer 1

其他字段未被传递，因为您没有将它们附加到 FormData，更好的方法是在初始化 FormData() 时使用表单对象，而不是附加所有手动输入的表单，见下文，

注意:使用前在表单中添加属性id="my-form"

$(document).ready(function(){
  $('#upload').click(function(){

    event.preventDefault();
     var form = $("#my-form")[0];
     var data = new FormData(form);
    // AJAX request
    $.ajax({
      url: 'clienttest.php',
      type: 'post',
      data: data,
      contentType: false,
      processData: false,
      success: function(response){
        if(response != 0){
          // Show image preview
          $('#preview').html(" Process Started");
        }else{
          alert('file not uploaded');
        }
      }
    });
  });
});