Tutorial Upload Gambar Dengan AJAX - Apabila Anda sedang mencari informasi terkait dengan Tutorial Upload Gambar Dengan AJAX, maka anda ada di website yang benar, yaitu Aneka source code aplikasi, Rekomendasi kami untuk Tutorial Upload Gambar Dengan AJAX berikut mungkin adalah cocok dengan yang anda butuhkan saat ini.

Tutorial Upload Gambar Dengan AJAX

Di tutorials Upload Gambar Dengan php sudah dijelaskan cara mengupload file dengan PHP. Tutorial Upload Gambar dengan AJAX akan menggunakan cara yang sama dengan yang digunakan di tutorial tersebut, ditambahan sedikit trik dan javascript. Untuk meng-upload gambar dengan AJAX diperlukan bantuan

[php]<iframe width="300" height="150">[/php]

. Di tutorial upload gambar dengan PHP digunakan html form seperti di bawah:

[php]
<!--form to upload file-->



<form name="formupload" method="post" enctype="multipart/form-data" action="script/to/upload/file.php">
Picture : <input name="picture" type="file" />
<input type="submit" name="upload" value="Upload" />
</form>




[/php]

Perlu sedikit perubahan di html form yang digunakan untuk mengupload file seperti berikut:

[php]
<iframe name="upload-frame" id="upload-frame" style="display:none;"></iframe>



<form name="formupload" method="post" enctype="multipart/form-data" action="upload.php" target="upload-frame" onsubmit="startUpload();">
Picture : <input name="picture" type="file" />
<input type="submit" name="upload" value="Upload" />
</form>



<div id="uploaded-picture">
<!-- div tempat photo yang telah diupload ditampilkan -->
</div>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function startUpload(){
$("#uploaded-picture").html("loading...");
}

function displayPicture(pictureUrl){
var img = new Image();
$(img).load(function(){
$(this).hide();
$("#uploaded-picture").html($(this));
$(this).fadeIn();
}).attr('src', pictureUrl)
.error(function(){
alert("gagal menampilkan gambar");
});
}
</script>
[/php]

Di baris 1 ditambahkan html tag

[php]<iframe>[/php]

dengan atribut

[php]name="upload-frame"[/php]

,

[php]id="upload-frame"[/php]

dan menggunakan atribut

[php]style="display:none;"[/php]

agar

[php]<iframe>[/php]

tersembunyi. Di bagian tag

[php]
<form>[/php]

baris 2 ditambahkan atribut [/php]target="upload-frame"[/php], atribut target ini diisi dengan hal yang sama dengan atribut

[php]name"upload-frame"[/php]

dari tag

[php]<iframe>[/php]

. Baris 6 menambahkan tag

[php]<div/>[/php]

tempat menampilkan gambar yang telah diupload. Baris 9 menambahkan javascript jquery. Baris selanjutnya membuat dua function javascript, startUpload() untuk menampilkan text loading saat gambar sedang diupload dan displayPicture(pictureUrl) untuk menampilkan gambar setelah selesai diupload.

Langkah selanjutnya yang perlu dilakukan adalah membuat script untuk mengupload file.

[php]
<?php //file upload.php $fileName = $_FILES['picture']['name']; $fileSize = $_FILES['picture']['size']; $fileError = $_FILES['picture']['error']; $success = false; if($fileSize > 0 || $fileError == 0){
$move = move_uploaded_file($_FILES['picture']['tmp_name'], 'photo/'.$fileName); //atau ke directory yang dinginkan
if($move){
$success = true;
}
}

echo '<script type="text/javascript">';
if($success){
echo "parent.displayPicture('photo/$fileName');";
}else{
echo "alert('Upload gagal $fileError');";
}
echo '</script>';
?>
[/php]

Script di atas menggunakan script yang sama dengan tutorial Upload Gambar dengan PHP hanya ditambahkan javascript dibagian bawah baris 14. Jika file gagal diupload maka akan ditampilkan alert dan jika file berhasil diupload maka akan dipanggil function displayPicture().

Selamat Mencoba

Download source code upload gambar menggunakan ajax

Terima kasih telah membaca tentang Tutorial Upload Gambar Dengan AJAX

Aneka Source Code Aplikasi - Tutorial Upload Gambar Dengan AJAX, Semoga bisa membantu anda dalam belajar pemrograman atau mungkin dapat juga menjadi ide atau inspirasi untuk membuat karya baru yang lebih baik lagi.

Anda sedang membaca Tutorial Upload Gambar Dengan AJAX artikel tentang aneka source code aplikasi https://anekasourcecode.blogspot.com/2016/07/tutorial-upload-gambar-dengan-ajax.html Semoga blog sederhana ini dapat membantu dan bermanfaat bagi anda.

Tweet