Cara Membuat Beberapa Thumbnail Saat Uploading Gambar

Umumnya, thumbnail dikerjakan bagi mengurangi dimensi dan ukuran gambar. Merancang gambar mini bagi gambar yang diunggah yakni praktik yang bagus. Dengan menggunakan gambar mini dan bukan gambar asli, ini akan menolong memasukkannya ke pada tata letak program. Pun, waktu pemuatan gambar thumbnail akan lebih rendah secara optimis.

Pada artikel ini, kita akan melihat cara membangun beberapa thumbnail bagi gambar yang diunggah oleh pengguna. Upload gambar dan mengubah ukuran ke thumbnail lewat pemrograman yakni kode yang sangat dicari. Pada contoh ini, saya telah menggunakan library form jQuery bagi mengunggah biner gambar lewat AJAX. Permintaan ajax akan memanggil kode PHP bagi membangun thumbnail dengan dimensi yang ditentukan. Sebelum membangun thumbnail, file yang diunggah akan divalidasi bagi memeriksa apakah itu dengan ekstensi yang valid, ukuran yang diizinkan.

Setelah validasi yang berhasil, kode bagi membangun beberapa thumbnail akan dieksekusi. Thumbnail yang dikerjakan disimpan pada target yang dikerjakan secara dinamis. Manfaat library GD PHP digunakan bagi membangun gambar thumbnail secara terprogram.

Tampilkan Opsi Unggahan Gambar dan Beberapa Pratinjau Thumbnail

Ini yakni halaman arahan yang mempunyai opsi bagi mengunggah file gambar. Dikala memilih file gambar dengan menggunakan opsi UI ini, guna AJAX akan dipanggil. Pada guna ini, biner gambar diposkan ke file PHP dari yang ditentukan dengan parameter AJAX.

Di halaman ini, saya telah membangun penampung target bagi menampilkan gambar thumbnail beraneka dimensi. Tag input file default akan tertimpa dengan tombol pilih HTML dengan menggunakan CSS. Opsi input file berisi atribut terima bagi membatasi jenis file di tingkat browser. Pun, saya telah menangani validasi gambar di sisi server menggunakan PHP.

<div id=”form-container”><br />
	<div id=”imgContainer”><br />
		<form enctype=”multipart/form-data” action=”image_upload_submit.php”<br />
			method=”post” name=”image_upload_form” id=”image_upload_form”></p>
<p>			<div id=”selectImage”><br />
				<div id=”imgChange”><br />
					<span>Choose Image</span> <input type=”file” accept=”image/*”<br />
						name=”image_file_input” id=”image_file_input”><br />
				</div><br />
			</div></p>
<p>			<div class=”progress-bar”><br />
				<div class=”percent”>0%</div><br />
				<div class=”bar”></div><br />
			</div><br />
		</form><br />
	</div><br />
	<br><br />
	<div class=”img_preview” id=”image-holder” style=”display: none”><br />
		<img width=”150″ height=”93″ id=”small-preview” src=”#”<br />
			alt=”small image” /> <img width=”300″ height=”185″<br />
			id=”medium-preview” src=”#” alt=”medium image” /> <img width=”550″<br />
			height=”340″ id=”large-preview” src=”#” alt=”big image” /><br />
	</div><br />
</div>

<form enctype=“multipart/form-data” action=“image_upload_submit.php”

method=“post” name=“image_upload_form” id=“image_upload_form”>

<span>Choose Image</span> <input type=“file” accept=“image/*”

name=“image_file_input” id=“image_file_input”>

</div>

</div>

</form>

</div>

<br>

<img width=“150” height=“93” id=“small-preview” src=“#”

alt=“small image” /> <img width=“300” height=“185”

id=“medium-preview” src=“#” alt=“medium image” /> <img width=“550”

height=“340” id=“large-preview” src=“#” alt=“big image” />

</div>

Posting Form jQuery via AJAX bagi Merancang Beberapa Thumbnail

Skrip ini menggunakan library form jQuery bagi memposting form dengan data gambar ke titik ahir PHP. Pada skrip ini, kemajuan unggahan dilacak dan diperbarui di UI dengan menggunakan callback uploadProgress. Di respons AJAX yang berhasil, jalur thumbnail akan diuraikan dari objek respons AJAX dan disetel ke target pratinjau secara dinamis.

<script src=”vendor/jquery/jquery-3.2.1.min.js”></script><br />
<script src=”vendor/jquery/jquery.form.min.js”></script></p>
<p><script><br />
$(document).on(‘change’, ‘#image_file_input’, function () {<br />
    var progressBar = $(‘.progress-bar’);<br />
	var bar = $(‘.progress-bar .bar’);<br />
	var percent = $(‘.progress-bar .percent’);<br />
    var percentVal;<br />
    $(‘#image_upload_form’).ajaxForm({<br />
        beforeSend: function() {<br />
    			progressBar.fadeIn();<br />
            percentVal = ‘0%’;<br />
            bar.width(percentVal)<br />
            percent.html(percentVal);<br />
        },<br />
        uploadProgress: function(event, position, total, percentComplete) {<br />
            percentVal = percentComplete + ‘%’;<br />
            bar.width(percentVal)<br />
            percent.html(percentVal);<br />
        },<br />
        success: function(html, statusText, xhr, $form) {<br />
			obj = $.parseJSON(html);<br />
        		if(obj.status){<br />
        			percentVal = ‘100%’;<br />
        			bar.width(percentVal)<br />
        			percent.html(percentVal);<br />
        			$(“#small-preview”).prop(‘src’,obj.small);<br />
        			$(“#medium-preview”).prop(‘src’,obj.medium);<br />
        			$(“#large-preview”).prop(‘src’,obj.large);<br />
        			$(“.img_preview”).show();<br />
        		}<br />
        }<br />
    }).submit();		</p>
<p>});<br />
</script>

$(document).on(‘change’, ‘#image_file_input’, function () {

var progressBar = $(‘.progress-bar’);

var bar = $(‘.progress-bar .bar’);

var percent = $(‘.progress-bar .percent’);

var percentVal;

$(‘#image_upload_form’).ajaxForm({

beforeSend: function() {

progressBar.fadeIn();

percentVal = ‘0%’;

bar.width(percentVal)

percent.html(percentVal);

uploadProgress: function(event, position, total, percentComplete) {

percentVal = percentComplete + ‘%’;

bar.width(percentVal)

percent.html(percentVal);

success: function(html, statusText, xhr, $form) {

obj = $.

(Visited 6 times, 1 visits today)

Leave a Reply Cancel reply