自动拖放文件上传

Question

Here is my code:

  // first case $('.drop-files-container').on('drop dragdrop',function(e) { var files = e.originalEvent.dataTransfer.files; processFileUpload(files); return false; }); // second case $('#files').on('change',function(e) { var files = e.originalEvent.dataTransfer.files; processFileUpload(files); return false; }); function processFileUpload(droppedFiles) { alert('send ajax call'); } $('.drop-files-container').on('dragenter',function(event){ event.preventDefault(); $(this).css('background','#f1f1f1'); }) $('.drop-files-container').on('dragover',function(event){ event.preventDefault(); }) 

  html, body{ height: 100%; } .drop-files-container{ display: block; border: 2px dashed #aaa; width: 550px; padding: 60px 0px; margin: 0 auto; margin-top: 20px; font-size: 60px; line-height: 2; color: #999; text-align: center; cursor: pointer; } .drop-files-container:hover{ background-color: #f1f1f1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form enctype="multipart/form-data" id="yourregularuploadformId" action="#"> <div> <label for="files" class="drop-files-container">Drag .txt File Here</label> <input id="files" type="file" name="files[]" style="visibility:hidden;" multiple="multiple"> </div> </form> 

I need to execute processFileUpload(droppedFiles) function in two cases. Either when a file is dragged in .drop-files-container area or when a file is selected by "choose a file window" (when you click on that area, mentioned window will be open).

As you see, my code works for first case (drag and drop) as well, but it doesn't work for second one (choose a file window). It throws this error:

"Uncaught TypeError: Cannot read property 'files' of undefined"

How can I fix it?

Answer 1

You can try this,

var files = $(this)[0].files;

for your second block.

You can also use

var files = evt.target.files;

or

var files = document.getElementById('files').files;

Refer these links,

• https://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files
• https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

  // first case $('.drop-files-container').on('drop dragdrop',function(e) { var files = e.originalEvent.dataTransfer.files; processFileUpload(files); return false; }); // second case $('#files').on('change',function(e) { var files = $(this)[0].files; processFileUpload(files); return false; }); function processFileUpload(droppedFiles) { alert('send ajax call'); } $('.drop-files-container').on('dragenter',function(event){ event.preventDefault(); $(this).css('background','#f1f1f1'); }) $('.drop-files-container').on('dragover',function(event){ event.preventDefault(); }) 

  html, body{ height: 100%; } .drop-files-container{ display: block; border: 2px dashed #aaa; width: 550px; padding: 60px 0px; margin: 0 auto; margin-top: 20px; font-size: 60px; line-height: 2; color: #999; text-align: center; cursor: pointer; } .drop-files-container:hover{ background-color: #f1f1f1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form enctype="multipart/form-data" id="yourregularuploadformId" action="#"> <div> <label for="files" class="drop-files-container">Drag .txt File Here</label> <input id="files" type="file" name="files[]" style="visibility:hidden;" multiple="multiple"> </div> </form>