如何使用BootBox库上传文件并使用AJAX发布到数据库

时间：2019-01-21 12:45:51

标签： jquery ajax bootstrap-modal bootbox

我要使用bootbox警报上传文件，选择文件并单击“上传”，它显示“未定义索引”

如果我只是简单地使用（form method =“ post” action =“ action.php”）运行它就没有问题，那么我也尝试使用jquery ajax也成功了。但是由于我选择使用Bootbox并从ajax调用URL，它将显示此错误（如何解决此问题？）

下面是我的代码 main.js 

$('.import_guru').click(function(e){
    e.preventDefault();
    // var uploadHtml = "<form method='post' enctype='multipart/form-data' action='upload_aksi'>" +
    var uploadHtml = "<form method='post' enctype='multipart/form-data'>" +
        "Pilih File: " + 
        "<input name='import_guru' type='file' required='required'>" + 
        // "<input name='upload' type='submit' value='Import'>" +
    "</form>";

    bootbox.dialog({
        message: uploadHtml,
        title: "File Upload",
        buttons: {
            success: {
                label: "Upload",
                className: "btn-primary",
                callback: function () {
                    $.ajax({
                            type: 'POST',
                            url: 'upload_aksi',
                            data: $("form").serialize()

                        })
                        .done(function(response){
                            bootbox.alert(response);
                        })
                        .fail(function(){
                            bootbox.alert('Error....');
                        })
                }
            }
        }
    });
});

lihat.php 

<section class="content-header">
      <h1>
        <span class="pull-left">
          Data Guru
        </span>
        <span class="pull-right"> 
          <a href="tambah" class="btn btn-primary"><i class="icon-plus"></i> Tambah</a>
          <a href="ImportGuruTemplate.xls" class="btn btn-primary" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Import Data Guru Template" download><i class="fa fa-info"></i></a>
          <a class="btn btn-primary import_guru" name="import_guru" id="import_guru" href="javascript:void(0)"><i class="fa fa-upload"></i> Import</a> <!-- this one -->
          <a href="tambah" class="btn btn-primary"><i class="fa fa-download"></i> Export</a>
        </span><br>
      </h1>
    </section>

upload_aksi.php 

<?php 
include '../connect/connection.php';
include "../plugins/excel_reader2.php";
?>

<?php
// upload file xls
$target = basename($_FILES['import_guru']['name']) ;
move_uploaded_file($_FILES['import_guru']['tmp_name'], $target);

// beri permisi agar file xls dapat di baca
chmod($_FILES['import_guru']['name'],0777);

// mengambil isi file xls
$data = new Spreadsheet_Excel_Reader($_FILES['import_guru']['name'],false);
// menghitung jumlah baris data yang ada
$jumlah_baris = $data->rowcount($sheet_index=0);

// jumlah default data yang berhasil di import
// $berhasil = 0;
for ($i=2; $i<=$jumlah_baris; $i++)
{
	// menangkap data dan memasukkan ke variabel sesuai dengan kolumnya masing-masing
	$nik = $data->val($i, 1);
	$nama = $data->val($i, 2);
	$jenis_kelamin = $data->val($i, 3);
	$tempat_lahir = $data->val($i, 4);
	$tanggal_lahir = $data->val($i, 5);
	$alamat = $data->val($i, 6);

	$query = "SELECT * FROM user WHERE nik='$nik'";
	$result = mysqli_query($con,$query);
	if (mysqli_num_rows($result) > 0 )
	{
		if ($row = mysqli_fetch_array($result))
		{
			$update_query = "UPDATE user SET nama='$nama' WHERE nik='$nik'";
			$update_run = mysqli_query($con, $update_query);

			if ($update_run){
				echo "berhasil update";
			}
			// echo "data already exist";
			// break;
		}
	}


	else 
	{
		if($nik != "" && $nama != "" && $jenis_kelamin != "" && $tempat_lahir != "")
		{
		$query= "INSERT INTO user (id, nik, nama, jenis_kelamin, tempat_lahir, tanggal_lahir, alamat) VALUES (null, '$nik', '$nama', '$jenis_kelamin', '$tempat_lahir', '$tanggal_lahir', '$alamat')";
		mysqli_query($con, $query);
		// $berhasil++;
		echo "data berhasil diimport";
		header("location:lihat");
		}
	}
}

// hapus kembali file .xls yang di upload tadi
// unlink($_FILES['import_guru']['name']);

?>

我在下面附加了屏幕截图 enter image description here enter image description here enter image description here

1 个答案:

答案 0 :(得分：0)

我用Bootstrap模式更改了Bootbox警报并解决了问题

lihat.php 

<section class="content-header">
      <h1>
        <span class="pull-left">
          Data Guru
        </span>
        <span class="pull-right"> 
          <a href="tambah" class="btn btn-primary"><i class="icon-plus"></i> Tambah</a>
          <a href="ImportGuruTemplate.xls" class="btn btn-primary" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="Import Data Guru Template" download><i class="fa fa-info"></i></a>
          <a class="btn btn-primary" id="import_guru" data-toggle="modal" data-target="#modal_import" data-backdrop="static"><i class="fa fa-upload"></i> Import</a> <!-- this one -->
          <a href="tambah" class="btn btn-primary"><i class="fa fa-download"></i> Export</a>
        </span><br>
      </h1>
    </section>

    <div id="modal_import" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times</button>
            <h4 class="modal-title">Import Data Guru</h4>
          </div>
          <form id="form" enctype="multipart/form-data">
            <div class="modal-body" id="modal-import">
              <div class="row">
                <div class="col-md-12" id="import_guru_message">
                </div>
              </div>
              <div class="form-group">
                <label class="control-label" for="upload_file">Upload File</label>
                <input type="file" name="import_guru" id="import_guru" class="form-control" required>
              </div>
            </div>
            <div class="modal-footer">
              <input type="submit" class="btn btn-success" name="import" value="Upload">
            </div>
          </form>
        </div>
      </div>
    </div>

main.js 

$(document).ready(function(e) {
		$("#form").on("submit", function(e) {
			e.preventDefault();
			$.ajax({
				url: 'upload_aksi',
				type: 'POST',
				data: new FormData(this),
				contentType: false,
				cache: false,
				processData: false,
				success : function(data){
					$("#import_guru_message").show(); //show the element back
				    $("#import_guru_message").html(''); // remove existing element
					$("#import_guru_message").html(data); // adding new element coming from server side
					
					setTimeout( function () {
				      	$("#import_guru_message").hide();
						window.location.href = "lihat";
					   }, 2000 );
				}
			});
		});
	})

upload_aksi 

<?php 
include '../connect/connection.php';
include "../plugins/excel_reader2.php";
?>

<?php
// upload file xls
$target = basename($_FILES['import_guru']['name']) ;
move_uploaded_file($_FILES['import_guru']['tmp_name'], $target);

// beri permisi agar file xls dapat di baca
chmod($_FILES['import_guru']['name'],0777);

// mengambil isi file xls
$data = new Spreadsheet_Excel_Reader($_FILES['import_guru']['name'],false);
// menghitung jumlah baris data yang ada
$jumlah_baris = $data->rowcount($sheet_index=0);

// jumlah default data yang berhasil di import
// $berhasil = 0;
$import_ok = false;
$import_update = false;

for ($i=2; $i<=$jumlah_baris; $i++)
{
	// menangkap data dan memasukkan ke variabel sesuai dengan kolumnya masing-masing
	$nik = $data->val($i, 1);
	$nama = $data->val($i, 2);
	$jenis_kelamin = $data->val($i, 3);
	$tempat_lahir = $data->val($i, 4);
	$tanggal_lahir = $data->val($i, 5);
	$alamat = $data->val($i, 6);

	$query = "SELECT * FROM user WHERE nik='$nik'";
	$result = mysqli_query($con,$query);
	if (mysqli_num_rows($result) > 0 )
	{
		if ($row = mysqli_fetch_array($result))
		{
			$update_query = "UPDATE user SET nama='$nama', jenis_kelamin='$jenis_kelamin', tempat_lahir='$tempat_lahir', tanggal_lahir='$tanggal_lahir', alamat='$alamat' WHERE nik='$nik'";
			$update_run = mysqli_query($con, $update_query);

			if ($update_run){
				$import_update = true;
			}
		}
	}


	else 
	{
		if($nik != "" && $nama != "" && $jenis_kelamin != "" && $tempat_lahir != "")
		{
		$query= "INSERT INTO user (id, nik, nama, jenis_kelamin, tempat_lahir, tanggal_lahir, alamat) VALUES (null, '$nik', '$nama', '$jenis_kelamin', '$tempat_lahir', '$tanggal_lahir', '$alamat')";
		mysqli_query($con, $query);
		// $berhasil++;
		$import_ok = true;
		}
	}
}

//to prevent alert looping, show one times only
if ($import_update == true) {
    echo "<div class='alert alert-success'>
			<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
			<b>Data berhasil diupdate</b>
		</div>
		";
	exit();
}

if ($import_ok == true) {
    echo "<div class='alert alert-success'>
			<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>
			<b>Data berhasil diimport</b>
		</div>
		";
	exit();
}

// hapus kembali file .xls yang di upload tadi
// unlink($_FILES['import_guru']['name']);

?>

相关问题
最新问题