Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
const $zone = $("#drop-zone"); $zone.on("dragover dragenter", e => { e.preventDefault(); $zone.addClass("dragging"); }) .on("dragleave drop", e => { e.preventDefault(); $zone.removeClass("dragging"); }); $zone.on("drop", function(e) { const files = e.originalEvent.dataTransfer.files; [...files].forEach(file => { if (!file.type.startsWith("image/")) { alert("Images only"); return; } const reader = new FileReader(); reader.onload = ev => $("<img>").attr("src", ev.target.result).appendTo("#preview"); reader.readAsDataURL(file); const fd = new FormData(); fd.append("file", file); $.ajax({ url: "/api/upload", method: "POST", data: fd, processData: false, contentType: false }); }); });
Result
Open