untuk tampilan utama dari program upload banyak file gambar menggunakan php dan jquery.
di tampilan utama atau index, anda bisa memilih file yang akan anda upload. dengan menekan tombol choose files.
dan anda di bawa ke tampilan komputer untuk memilih file, dan anda bisa memilih berapapun file gambar untuk di upload.
setelah anda memilih gambar, maka silahkan tekan upload, dan gambar pun sudah terupload. dan anda akan dibawa ke tampilan dimana anda dibolehkan untuk menambahkan judul dan deskripsi gambar yang akan disimpan ke database.
untuk semua file yang terupload semua tersimpan pada folder gambar yang sudah di buat sebelumnya.
dibawah ini gambar yang sudah diupload (didalam folder gambar).
berikut script program upload banyak file gambar menggunakan php dan jquery
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple File Upload Plus Database </title>
<link href="design.css" rel="stylesheet"/>
<script src="jquery.js"></script>
</head>
<body align='center'>
<h1>Program Upload Banyak File </h1>
<?php
if($_POST["btnupload"]){
if (!empty($_FILES["gambar"]["tmp_name"][0])) {
$jumlah=count($_FILES["gambar"]["tmp_name"]);
include_once("upload.php");
for ($i=0; $i< $jumlah ; $i++) {
$tipe=explode(".",$_FILES["gambar"]["name"][$i]);
if ($tipe[count($tipe) - 1 ]== "jpg" || $tipe[count($tipe) - 1 ]== "jpeg") {
filegb($_FILES["gambar"]["tmp_name"][$i], $_FILES["gambar"]["name"][$i]);
//echo "proeses upload .." . $_FILES["gambar"]["name"][$i] . "<br>";
}else{
echo "gagal upload file .." . $_FILES["gambar"]["name"][$i] . " File Yang Diperbolehkan Hanya jpg atau jpeg<br>";
}
}
}else{
echo "anda belum memilih gambar";
}
}else{
?>
<form action="" method="POST" enctype="multipart/form-data" id="formupload">
<input type="file" name="gambar[]" multiple/>
<input type="submit" name="btnupload" value="upload"/></form>
<?php
}
?>
</body>
</html>
upload.php
<script src="jquery.js"></script>
<div id="pesan" style="display:none; background:green; color:yellow; padding:12px;"></div>
<?php
function filegb($file,$nama){
if(move_uploaded_file($file,"gambar/". $nama)){
include_once("koneksi.php");
mysql_query("insert into file_upload (file) values('$nama')");
echo "<table id='".str_replace(".","-", $nama)."' width='50%' class='gb' style='background:green; color:yellow; padding:4px;margin:2px auto; align='center'>";
echo "<tr><td align='center' valign='middle' style='background:white; padding:12px;'>";
echo "<div style='width='140';height:120px;overflow:hidden; margin:auto auto; padding:2px;'>";
echo "<img src='gambar/$nama' width='140'/></div></td>";
echo "<td width='70%'><table width='80%' ><tr><td width:'30%' align='right'>judul gambar:";
echo "</td>";
echo "<td><input type='text' name='j'".str_replace(".","-", $nama)."' id='j".str_replace(".","-", $nama)."' style='width:100%;'/>";
echo "<input type='hidden' name='file'".str_replace(".","-", $nama)."' id='file".str_replace(".","-", $nama)."' value='$nama'/></td></tr>";
echo "<tr><td width:'30%' align='right'>Diskripsi Gambar:</td>";
echo "<td><textarea type='text' name='d".str_replace(".","-", $nama)."' id='d".str_replace(".","-", $nama)."' style='width:100%;'></textarea>";
echo "</td></tr>";
echo "<tr><td colspan='2' align='center'><input type='button' name='tb".str_replace(".","-", $nama)."' id='tb".str_replace(".","-", $nama)."' value='batal'/>";
echo " <input type='button' name='ts".str_replace(".","-", $nama)."' id='ts".str_replace(".","-", $nama)."' value='simpan'/>";
echo "</td></tr></table>";
echo "</td></tr></table>";
?>
<script>
$("#<?php echo "tb" . str_replace(".","-", $nama);?>").click(function(){
$("#<?php echo str_replace(".","-", $nama); ?>").slideUp(500);
gb();
});
$("#<?php echo "ts" . str_replace(".","-", $nama);?>").click(function(){
var namafile = $("#<?php echo "file" . str_replace(".","-", $nama);?>").val();
var judulfile = $("#<?php echo "j" . str_replace(".","-", $nama);?>").val();
var diskripsifile = $("#<?php echo "d" . str_replace(".","-", $nama);?>").val();
$.post("simpan.php",{namafile:namafile,judulfile:judulfile,diskripsifile:diskripsifile},function(data){
$("#pesan").slideDown(200).delay(2000).slideUp(200).text(data);
});
});
</script>
<?php
}
}
?>
<script>
var jml1=1;
function gb(){
jml=$(".gb").length;
jml2=jml1++;
frm= jml - jml2 ;
if(frm<1){
document.write("<link href='design.css' rel='stylesheet'/><h1 align='center'>Program Upload Banyak File </h1><form action='' method='POST' enctype='multipart/form-data' id='formupload'><input type='file' name='gambar[]' multiple/><input type='submit' name='btnupload' value='upload'/></form>");
}
}
</script>
koneksi.php
<?php
$server=mysql_connect("localhost","root","");
$db=mysql_select_db("upload_gambar")
?>
simpan.php
<?php
$namafile = $_POST["namafile"];
$judulfile = $_POST["judulfile"];
$diskripsifile = $_POST["diskripsifile"];
$tgl=time();
include_once("koneksi.php");
mysql_query("update file_upload set judul='$judulfile', diskripsi='$diskripsifile', tanggal='$tgl' where file='$namafile' ");
echo "File Dengan Nama ". $namafile ." Telah Disimpan !!";
?>
bagaimana sangat sederhana bukan, tetapi walau sederhana semoga bisa membantu dan menjadi referensi belajar untuk temen temen semua.
untuk melihat demo dari program upload banyak file gambar menggunakan php dan jquery silahkan klik link disini.
untuk mendownload program upload banyak file gambar menggunakan php dan jquery silahkan klik link disini.
sekian share projeck dari saya, semoga bermanfaat.
.jpg)
