Burada dosyayı upload etmeyi anlatmayacağım. label'i bir form içine alıp normal şekilde upload edebilirsiniz.
HTML kodu en sade şekliyle şöyle olsun:
<label class="pictureZone">
<input type="file" />
</label>
CSS kodu da şöyle oluversin:
label.pictureZone {
display:block;
width:400px;
width:400px;
height:400px;
background-color:#f2f2f2;
border:2px dashed #777;
transition:
background ease 0.5s,
border ease 0.5s,
opacity ease 0.5s;
}
label.pictureZone.dragOver {
background-color:#ffffff;
border-color:#000;
}
Burada dikkat etmeniz gereken, .dragOver class'ıyla ilgili kısım. label'imiz üzerine bir dosya sürüklediğimizde label'imize .dragOver class'ı ekleniyor ve böylece rengi değişiyor. Bu class'ın adı zorunlu. Yani label'in üzerine dosya sürüklenince nasıl bir görünüme geçeceğini CSS'te mutlaka label'e .dragOver class'ı vererek anlatmalısınız.
Aşağıda verdiğim js sayfasını DragDropPictureZone.js adıyla kaydedin.
Aşağıda verdiğim js sayfasını DragDropPictureZone.js adıyla kaydedin.
function setPictureZone(labelSelector, allowedExtentionsArray) {
var pictureZone = $(labelSelector);
pictureZone.css({
'background-size':'contain',
'background-position':'center',
'background-repeat':'no-repeat',
});
pictureZone.find('input[type=file]').css('display','none');
if (allowedExtentionsArray == null)
allowedExtentionsArray = ['gif', 'png', 'jpg', 'jpeg'];
/* Dosya sürüklenirken alanın üzerine gelirse alana dragOver class'ı eklensin */
pictureZone.on('dragenter', function (e) {
e.preventDefault();
$(this).addClass('dragOver');
});
/* Dosya alan üstünde sürüklenirken bi'şey olmasın. Bunu yazmazsak, dosyayı bırakınca açmaya çalışacaktır. */
pictureZone.on('dragover', function (e) {
e.preventDefault();
});
/* Dosya sürüklenirken alan üstünden çıktıysa ve bırakılmadıysa dragOver class'ını kaldıralım. */
pictureZone.on('dragleave', function (e) {
e.preventDefault();
if (pictureZone.find('input[type=file]').val() == '')
$(this).removeClass('dragOver');
});
/* Dosya sürüklenip alanımıza bırakıldıysa bu dosya input'umuzun değeri olsun. */
pictureZone.on('drop', function (e) {
e.preventDefault();
pictureZone.find('input[type=file]')
.prop('files', e.originalEvent.dataTransfer.files )
.trigger('change');
});
/* label içindeki input elemanımızın değeri değişince... */
pictureZone.on('change','input[type=file]', function () {
var parentLabel = $(this).parent();
/* input'umuzun değeri boşa dönmüşse ön izlemeyi kaldıralım. */
if ($(this).val() == '') {
parentLabel.css('background-image', 'none');
parentLabel.removeClass('dragOver');
return false;
}
/* Boş olmadığına göre png, jpg, jpeg veya gif'mi diye kontrol edelim. */
var ext = $(this).val().split('.').pop().toLowerCase();
if ($.inArray(ext, allowedExtentionsArray) == -1) {
parentLabel.css('background-image', 'none');
parentLabel.removeClass('dragOver');
$(this).val('');
return false;
}
/* Format da uygun olduğuna göre değeri label'e arkaplan yapalım. */
var file = $(this).prop('files')[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
parentLabel.css(
'background-image', 'url(' + e.target.result + ')'
);
};
});
}
Şimdi sayfanıza Jquery'i çağırdıktan sonra bu js dosyasını da dahil edin. Kullanımı şu şekilde:
setPictureZone('.pictureZone', ['gif','png','jpg','jpeg','bmp']);
İlk parametre sürükle bırak yapılacak ve file input'u içeren label'in seçicisi, ikinci parametre ise izin verilen dosya uzantılarını içeren bir dizi. İlk iki parametre zorunlu. Son parametreyi girmezseniz sadece gif, png, jpg ve jpeg uzantılı dosyalara izin verecektir.
Dosyayı upload etmiyor, yalnızca önizleme ile görüyoruz ve input'un değeri olarak atıyoruz. Dosya label'in üstüne sürüklenip bırakılabilir veya label'e tıklayarak direkt dosya seçilebilir. İki durumda da input bu fotoğrafı saklamış olacak. Upload etme işi, <form> ile normal bir upload işleminden farksız.
Dosyayı upload etmiyor, yalnızca önizleme ile görüyoruz ve input'un değeri olarak atıyoruz. Dosya label'in üstüne sürüklenip bırakılabilir veya label'e tıklayarak direkt dosya seçilebilir. İki durumda da input bu fotoğrafı saklamış olacak. Upload etme işi, <form> ile normal bir upload işleminden farksız.
Yorumlar
Yorum Gönder