Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ opload to div help

Posted by: snookie Mar 30 2019, 11:46 AM

I have now this code there i can drag image back and forth between two div elements

But i want to click on the div elements and i get file dialog window to choose a file
and it will be show on the div elements...

Here its my code

#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
function allowDrop(ev) {

function drag(ev) {

function drop(ev) {
var data = ev.dataTransfer.getData("text");;

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="2hånd.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


Posted by: snookie Mar 30 2019, 12:00 PM

and i have this code to...
But its work then i drop image into the red box but everytime i drop image in to it, then i make image after image i want to only drop one images into the box and other box the same

so its not make a list of image

se the code here

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
var dropZone = document.getElementById('dropZone');

// Optional. Show the copy icon when dragging over. Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
e.dataTransfer.dropEffect = 'copy';

// Get file data on drop
dropZone.addEventListener('drop', function(e) {
var files = e.dataTransfer.files; // Array of all files
for (var i=0, file; file=files[i]; i++) {
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function(e2) {
var img = document.createElement('img');
} } });

Powered by Invision Power Board (
© Invision Power Services (