| aslan2030 |
28.02.2017 18:19 |
JQuery / как загрузить картинку "drag'n drop"-ом
Собственно как загрузить картинку "drag'n drop"-ом на специальное поле на сайте, без использовании сервера, и выводить его на другом поле?
(задание такое что надо загрузить фотку человека и придавать ему "смешное лицо", Например: надеть шляпу, очки, бороду и т.д. , НО надо php использовать нельзя)
html:
<div class="picture"></div>
css:
.picture{
background: url("Ссылка");
}
делаю так:
jquery:
drop[0].ondrop = function(event) {
event.preventDefault();
drop.removeClass('hover');
drop.addClass('ondrop');
var file = event.dataTransfer.files[0];
if (file.size > maxSize) {
drop.text('Файл слишком большой!');
drop.addClass('error');
return false;
}else if(file.type != "image/jpeg"){
alert("only jpeg or jpg !!!");
drop.removeClass("ondrop");
}else{
drop.text("Файл добавлен!").removeClass("ondrop").addClass("dropped").delay(700).queue(function(){
drop.removeClass("dropped").html("Drop your face file here <br/><span style='color:red;'>Only JPG file. Maximum 300 Kb.</span>");
});
$("#imageFace").css({
"background":"НЕМОГУ ВЗЯТЬ АБСОЛЮТНЫЙ ПУТЬ",
});
}
};
|