String URL Encode

JQUERY’de POST ve GET işlemleri ve özel karakterleri URL biçimine çevirmek için, serialize() fonksiyonunu kullanırız, tek bir string alan için ise bu fonksiyon hata verecektir çünkü obje içermemektedir(name ve value değerli).
Çözüm 1, encodeURIComponent kullanmak.

var rCRLF = /\r?\n/g;
$('#sortable li').each(function() {
	var elm = $(this);
	var name = elm.children('img').attr('title');
	var src = elm.children('.galeri_src').attr('data-v');
	//name.ht
	src.replace( rCRLF, "\r\n" );
	src = encodeURIComponent(src);
	var fd = "name="+name+"&galeri_resim="+src;
	// ajax
	$.ajax({
		url: post_url,
		type: "POST",
		data: fd,
	}).done(function( c ) {
		if(c != 0) {
			console.log( c );			
		}
	});

});

Yukarıdaki örneğimiz AJAX POST işlemi ile, Galeri alanına girilen çok sayıda Resimin kaydedilmesi işlemini yansıtan bir karedir. Bu halde resimin kaynak kodlarını okuyarak resim kutusu içerisine “img” olarak ekliyor(aşağıdaki resim), “src” kısmına alıyoruz, böylelikle seçilen resimle görüntü olarak karşımıza çıkıyor ve kaynak kodları da “src” alanında oluyor.

Resimin kaynak kodlarında ise bazı sorunlu karakterler olacaktır(=?/)… İşte bunların çevrilmesi gerekir. “encodeURIComponent” fonksiyonu ise tek satırla bu işlemi gerçekleştirir. Yani “urlencode“, olumsuz etkilere sebep olacak karakterleri çevirir.

Örneğin

? -> %3F

/ -> %2F

= -> %3D

gibi..

Ajax ile GET, POST metoduyla veri yolluyoruz

Resim kaynak kodlarını “FileReader” ile okuduk.

var kaynak = oFREvent.target.result;

komutu ile aldık. Resim kaynağımız;

“data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/…”

Şeklinde başlar ve kırmızı ile işaretlediğim gibi bazı özel karakterler barındırır. Bu kaynağı POST üzerinden bir PHP dosyasına gönderdiğimizi düşünür ve kaynağı alıp bir resim dosyası olarak kaydedersek, yükseklik ve genişlikte sorun olmadığı halde, simsiyah bir resimle karşılaşırız(kısaca resim doğru olarak kaydedilememiştir). İşte buna sebep olan işlenmemiş/filtrelenmemiş kaynaktır.

Çözüm ise bu yazının başında ve ayrıca kullandığımız yöntem (each döngüsü ile) çok sayıda ve yüksek limtilerde içerik göndermemizi de sağladı. 10 Resimi HTML form üzerinden gönderseydik ve atıyorum POST Limit 2 MB ile sınırlı olsaydı, gönderdiğimiz resimler ise 2 MB üzeri olsa idi, işlemi gerçekleştiremeyecektik. Javascript ile, resimleri döngü içerisine alarak, birer, birer yollamak ise bu konuda ayrıca çözüm sunmuş oluyor. 🙂

JQUEY ile yapmış olsaydık? O halde “.param” kullanabilirdik;

örneğimize göre değiştirirsek;

Çözüm 2

var params = { name:name, galeri_resim:src};
var fd = jQuery.param( params );
//name="img_name"&src="data"
// olurdu...

“encodeURIComponent” ve “param” ikisi de geçerli.

Bir yanıt yazın Yanıtı iptal et