javascript - 提交表单时不使用 javascript 发送图像，不刷新页面

Question

我有一个使用发送文本和照片的 JavaScript，我的问题是照片未发送到我的目录文件夹中，并且数据库中的照片为空列。

如何解决这个问题？我很困惑:(

这是我的截图结果

index.php

<script>
      $(function () {

        $('#fr_testi').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'testi.php',
            data: $('#fr_testi').serialize(),
            success: function () {
              document.getElementById("sc_testi").innerHTML = "Succes :)";
                $('#nama_testi').val("");
                $('#status_testi').val("");
                $('#foto_testi').val("");
                $('#komentar_testi').val("");
            }
          });

        });

      });
    </script>


<form  method="POST"  id="fr_testi" enctype="multipart/form-data">
                      <div class="control-group">
                        <label class="control-label">Nama</label>
                        <div class="controls">
                          <input name="nama" id="nama_testi" maxlength="100" type="text" required>
                          <input type="hidden" value="<?php echo $sk->kode?>" name="kode">
                        </div>
                      </div> 
                      <div class="control-group">
                        <label class="control-label">Status</label>
                        <div class="controls">
                          <input id="status_testi" name="status" maxlength="100" type="text" required>
                        </div>
                      </div>
                      <div class="control-group">
                        <label class="control-label">Foto</label>
                        <div class="controls">
                          <input name="foto" id="foto_testi" type="file" required>
                        </div>
                      </div>
                      <div class="control-group type2">
                        <label class="control-label">Komentar</label>
                        <div class="controls">
                          <textarea maxlength="250"  id="komentar_testi"  name="komentar" required></textarea>
                        </div>
                      </div>
                      <center>
                      <button type="submit" class="button button_type_2 button_grey_light">Send</button><br/><br/>
                      <font color="green" id="sc_testi"></font>
                      </center>
                    </form>

testi.php

<?php 
include "element/koneksi.php";

$nama       = $_POST['nama'];
$kode       = $_POST['kode'];
if ($nama!=NULL or $kode!=NULL) {
date_default_timezone_set("Asia/Jakarta");
$tglnya = date("Y-m-d");

$status     = $_POST['status'];
$komentar   = $_POST['komentar'];
$warna      = "#52B3D9";
$kon        = "NO";

$namafile_tmp = $_FILES['foto']['tmp_name'];        
if($namafile_tmp){
$namafile = $_FILES['foto']['name'];
$file   = $kode."_".$tglnya."_".$namafile;
copy($namafile_tmp, "images/sekolah/testimoni/{$file}");            
unlink($namafile_tmp);
}

 $query= "INSERT INTO sekolah_testimoni VALUES(id_testi,'$kode','$nama','$komentar','$status','$file','$warna',now(),'$kon','$kon')";
 mysql_query($query);

 }

 else 
    {
      echo "<script language='JavaScript'>window.history.back() </script>";
    }
?>

Answer 1

jquery 方法序列化不包含输入文件类型。

如果你只想在数据库上注册文件名，你可以使用像下面这样的JS而不是序列化。

    sendData = "";
    $.each($("#formulario input, #formulario select"), function () {
        if ($(this).prop("type") == "submit") return;        
        sendData += sendData!=""?"&":"";
        sendData += $(this).prop("name") + "=" + $(this).val()
    });

但是如果你想上传文件，保存在服务器上，然后在数据库上注册位置，你应该直接从 HTML 发布或使用 FormData javascript 对象来执行此任务。

    fileInputElement = document.getElementById("yourFileInputID");    

    var formData = new FormData(); 
    formData.append("userfile", fileInputElement.files[0]); 
    // if you need to upload multiple files you should loop through the fileInputElement.files array, appending one by one

    var request = new XMLHttpRequest();
    request.open("POST", "http://yourURL/");
    request.send(formData);

不幸的是，此方法不适用于旧浏览器。要在这些上进行上传，您应该使用 iframe 解决方案(将表单发布到不可见的 iframe 而不离开页面)。