SIMPLE UPLOAD WITH AJAX JQUERY

Teknik Upload Foto/Gambar + Save Data dengan Ajax Jquery

Assalamualaikum Wr.Wb

Oke pada kali ini saya akan sedikit membagikan teknik bagaimana cara Upload data / file atau gambar dengan menggunakan Ajax Jquery.

Mungkin salah satu dari anda bertanya, mengapa harus menggunakan ini Om? make PHP juga bisa. Memang bisa, saya juga dulu berpikir seperti anda. Namun nanti pada suatu saat ada Plugin atau sesuatu yang membuat Inputan tersebut tidak jalan dengan PHP atau butuh untuk akses data secara cepat, maka Jquery Ajax lah jawabannya. tanpa Banayk CIncong, langsung saja anda buat sebuah file dan beri nama form.php dan isi dengan code berikut


<script src="jquery-2.2.1.js"></script>
<html>
<head>
<!--script src="https://code.jquery.com/jquery-1.10.2.js"></script-->
<script>
$(document).ready(function(){

$("div").css("border", "3px solid red");
$('.weleh').click(function(){

var test  = $('.test').val();
var test2 = $('.test2').val();

//alert(test);
//alert(test2);

var file_data = $('#sortpicture').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
//alert(form_data);

/*untuk ajax upload*/
$.ajax({
url: 'upload.php', // point to server-side PHP script
dataType: 'html',  // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
alert(php_script_response); // display response from the PHP script, if any
}

});

/*untuk data biasa*/
$.ajax({

url: 'upload.php', // point to server-side PHP script
dataType: 'html',  // what to expect back from the PHP script, if anything
data: {"test":test,"test2":test2},
type: 'post',
success: function(php_script_response){
alert(php_script_response); // display response from the PHP script, if any
}

});

});

});
</script>
</head>

<body>

<input class='test' type="text" name="text"/><br>
<input class='test2' type="text" name="text2"/><br>
<input id="sortpicture" type="file" name="sortpic" /><br>
<input type='button' class="weleh" value='upload' name='upload'>
<div id='wah'></div>
</body>
</html>

lalu anda buat satu file lagi untuk proses uploadnya beri nama upload.php


<?php

$test = $_POST['test'];
$test2 = $_POST['test2'];

/*echo $test."<br>";
echo $test2;*/

//print_r($_POST);

$sql = "insert into bla where bla = '".$test."' and bla = '".$test2."'";

echo $sql;
if( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'img/' . $_FILES['file']['name']);
}

?>

langsung saja deh anda jalankan, eh tambah 1 lagi, anda buat 1 Folder dan beri nama img ini digunakan untuk menyimpan Gambar atau hasil uploadtan anda.