Question

我厌倦了解决这个问题。我的表格无法使用ajax上传文件，但它的工作没有ajax。这是我的代码

insertpage.php

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<script type="text/javascript">

    $('document').ready(function(){

        $('#btn').click(function(event){
            event.preventDefault();
            var x=$('#form1').serializeArray();
            $.post(
                $('#form1').attr('action'),
                x,
                function(){
                    $('.hasil').html('Berhasil Insert');
                    $('.hasil').fadeOut(5000);
                    $('input').val("");
                    $('textarea').val("");
                })
        })

    })

</script>

</head>
<?php 

$tanggal    = date("Y-m-d");


echo"

<body>
<form id='form1' enctype='multipart/form-data' action='simpanpage.php' method='post'>

<table>
        <tr>
            <td> Foto </td> <td> : </td> <td> <input type=file name=fotoh id=fotoh> </td>
        </tr>
        <tr>
            <td> Judul </td> <td> : </td> <td> <input type=text name=judul id=judul maxlength='50' size='50' required placeholder='Masukan Judul'> </td>
        </tr>
        <tr>
            <td> Deskripsi </td> <td> : </td> <td> <textarea required id=deskripsi  name='deskripsi' > </textarea> </td>
        </tr>
        <tr>
            <td> Isi </td> <td> : </td> <td> <textarea required id=isi name='isi'> </textarea> </td>
        </tr>
        <tr>
            <td> Label </td> <td> : </td> <td> <input type=text id=label name=label  placeholder='Masukan Label'><input type=hidden name=tgl_dibuat id=tgl_dibuat value=".$tanggal."> </td>
        </tr>

    </table>

    <br>
    <button id='btn'>Save</button>
<br> <div class='hasil'> </div>
</form> 

</body>
";

?>

koneks.php

<?php

class database{

private $dbHost = "localhost";
private $dbUser = "root";
private $dbPass = "";
private $dbName = "oop_blog";

    function connectMySQL(){
    mysql_connect($this->dbHost, $this->dbUser, $this->dbPass);
    mysql_select_db($this->dbName) or die("Database tidak ada!");  
    }

    function manageinsertPage($judul, $isi, $tgl_dibuat, $deskripsi, $label){
        $lokasi     = $_FILES["fotoh"]["tmp_name"];
        $namafoto   = $_FILES["fotoh"]["name"];
        $direktori  = "gambar/$namafoto";

        if (move_uploaded_file($lokasi, $direktori))
        {
            $qry    = mysql_query("INSERT INTO pages(judul,isi,foto,tgl_dibuat,deskripsi,label) VALUES('$judul','$isi','$namafoto','$tgl_dibuat','$deskripsi','$label')");

            echo"berhasil Insert Bersama Foto";
        }

        else{
            $qry1    = mysql_query("INSERT INTO pages(judul,isi,tgl_dibuat,deskripsi,label) VALUES('$judul','$isi','$tgl_dibuat','$deskripsi','$label')");
            echo"Berhasil";
        }
    }

?>

simpanpage.php

<?php 

include "koneks.php";

$dbi = new database;

$dbi->connectMYSQL();

$dbi->manageinsertPage($_POST["judul"],$_POST["isi"],$_POST["tgl_dibuat"],$_POST["deskripsi"],$_POST["label"]);

?>

我只是感到困惑，因为我的表格无法用ajax读取$_FILES['fotoh']['name'];，这导致我在上传时失败了.. 答案总是在数据库中为null。我在这里需要帮助，非常感谢你

Answer 1

点击这里，测试

$('document').ready(function(){

    $('#btn').click(function(event){
        event.preventDefault();
        $.ajax({
            url : $('#form1').attr('action'),
            type: "POST",
            data : new FormData($('#form1')[0]),
            processData: false,
            contentType: false,
            success:function(data){

            }
        });
    })

})

Answer 2

如果您使用的是compatible browser，则可以使用$.ajax功能和FormData进行文件上传，如下所示：

$('document').ready(function(){
  $('#btn').click(function(event){
    event.preventDefault();
    $.ajax({
      url: $('#form1').attr('action'), // simpanpage.php
      type: 'POST',
      contentType: 'multipart/form-data', // Same as your form enctype.
      data: new FormData($('#form1')), // Your form with the file inputs.
      processData: false               // No need to process data.
    }).done(function(){
      console.log("Success: File uploaded!");
    }).fail(function(){
      console.log("Error: Failed to upload file!");
    });
  });
});

有关更多示例，请参阅doc。

上传文件不适用于ajax

2 个答案: