CARA MENAMPILKAN FOTO SETELAH UPLOAD FOTO DENGAN JQUERY

source logo : www.freebiesupply.com

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

pada postingan kali ini mengenaicara menampilkan foto setelah memilih foto dengan menggunakan ajax Jquery, disaat user menekan tombol choose, maka user akan memilih foto user lalu menampilkan foto yang dipilih oleh user tersebut, fungsi nya adalah untuk mengethaui apakah sudah benar foto yang di upload user tersebut jika salah maka user bisa melakukan pemilihan foto lagi, Langsung saja :  

0 - download dulu plugin jquery di sini scroll hingga kebawah lalu tekan tombol download.
1 - letakkan jquery yg telah didownload folder dalam satu folder.
2 - buatlah file index.php
3 - copy script dibawah ini sesuaikan dengan file index.php

Dibawah ini adalah kodenya :

<script type="text/javascript" src="jquery.js"></script>
 
<input type="file" onchange="pilih_foto(this);">
 
<img src="#" id="tampilkan_foto"/>
 
<script type="text/javascript">
 
     function pilih_foto(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
 
                reader.onload = function (e) {
                    $('#tampilkan_foto')
                        .attr('src', e.target.result)
                        .width(150)
                        .height(auto);
                };
 
                reader.readAsDataURL(input.files[0]);
            }
        }
 
</script>

Hasilnya akan seperti gambar di bawah ini :

Terima Kasih
Thank's

TAG TAGS :

upload and display pic | how to display after upload foto | preview image before upload using Jquery | how to select pic and preview in ajax jquery | how to upload and preview in ajax jquery | ow to upload and preview in ajax jquery | cara upload foto | cara menampilkan foto sebelum di upload | cara menampilkan foto setelah memilih foto

BACA JUGA :

• C.R.U.D AJAX dengan php

SOURCE :

- https://stackoverflow.com/questions/12368910/html-display-image-after-selecting-filename
- http://jsbin.com/uboqu3/1/edit?html,js,output