触发掉落事件

Question

I have a form with an input type="file" . I have a div surrounding the input . I then set the input to display:none . In JavaScript, I set that when you select the div , the input gets selected.

That all works nice and dandy, but how can I make it that when you drag a file onto the div , the input should trigger a drop event?

So here's how I would do the click event:

$('#target').click();

I'm looking for something like this:

$('#target').drop();

JSFiddle

 $(document).ready(function() { $('#browseFileDiv').click(function(e) { $(this).find('input[type="file"]').click(); }); $('#browseFileDiv input').click(function(e) { e.stopPropagation(); }); }); 

 #browseFileDiv { height: 200px; width: 200px; background-color: orange; border-radius: 50%; } #browseFileDiv > input { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform"> <div id="browseFileDiv"> <input id="openFile" name="img" type="file" /> </div> </form> 

Answer 1

$('#browseFileDiv').on('drop', function(){/* code here */}) is probably what you're looking for.

You probably really want to use jQuery UI . Click the view source button.

Answer 2

First, you don't need to wrap the <input type="file"> with a div around it and then with javscript trigger the .click() event for that input file if you click the div, make a <label> for this input file and style it, thus you can trigger the click event with HTML only without the need for javascript:

<label for="openFile" id="browseFile"></label>
<input id="openFile" name="img" type="file">

Updated: Then, as in this JS Fiddle the problem is that you need to return false; for the ondragover and ondrop events

var browseFile = document.getElementById('browseFile');
browseFile.ondragover = function () {
    return false;
};
browseFile.ondrop = function (event) {
    event.preventDefault && event.preventDefault();
    var files = event.dataTransfer.files;
    console.log(files);
    return false;
};

** Note that the above works for multiple files as well.

Resource: http://html5doctor.com/drag-and-drop-to-server/