如何从Bootstrap模式中发布文件和形成数据

时间:2018-07-23 00:15:44

标签: javascript ajax forms bootstrap-modal

我无法从引导程序模式发布文件和表单数据。

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

我的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上找到它。可以请人帮忙。

1 个答案:

答案 0 :(得分:3)

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

注意:在使用属性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');
        }
      }
    });
  });
});