Geek asks and answers

Drag and Drop HTML5 and Upload Multiple Files

I have an HTML form containing a file input box with multiple file selections, and I also have a drag and drop function I'm working on. My question is, how easy is it to integrate both of these functions, even if it is possible?

Ideally, I would like the user to select their files either through drag'n'drop or through the file dialog box. After the user selects his files, click the submit button to download the form.

I assume that the main uncertainty I have is how to link files that were dragged and dropped into the file input field to submit the form.

+4
source share
4 answers

jQuery, , , .

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple DnD Uploader</title>
    <link rel="stylesheet" href="style.css" />
    <script type = "text/javascript" src = "../music/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#drop').change(function(event){
          files = event.target.files;
          $('#drop').css('display', 'none');
          for(var i = 0, len = files.length; i < len; i++) {
            if((files[i].fileName+"").substring((files[i].fileName+"").length-4,(files[i].fileName+"").length)=='.mp3'){
            $.ajax({
              type: "POST",
              url: "uploader.php?id="+i,
              contentType: "multipart/form-data",
              headers: {
                "X-File-Name" : files[i].fileName,
                "X-File-Size" : files[i].fileSize,
                "X-File-Type" : files[i].type
              },
              beforeSend:  function() {
                $('#info').append('<li class="indicator"><span class="label">File Name :</span> '+files[i].fileName+' | <span class="label">Size :</span> ' + files[i].fileSize + ' | <img id="'+i+'" src="loading.gif" /></li>');
              },
              processData: false,
              data: files[i],
              success: function(data){
                $('#'+data).attr('src', 'check.png');
              },error: function(data){
                $('#info').append('Error: ' + data + '<br />');
              }
            });
            }else{
              $('#info').append('Error: Incorrect file type. Looking for .mp3');
            }
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="drop">
      <h1>Drop files here</h1>
      <p>To add them as attachments</p>
      <input type="file" multiple="true" id="filesUpload" />
    </div>
    <div id="info">
    </div>
  </body>
</html>

PHP :

<?php
  $headers = array();
  foreach ($_SERVER as $k => $v){   
    if(substr($k, 0, 5) == "HTTP_"){
      $k = str_replace('_', ' ', substr($k, 5));
      $k = str_replace(' ', '-', ucwords(strtolower($k)));
      $headers[$k] = $v;
    }
  } 
  $file = new stdClass;
  $file->name = basename($headers['X-File-Name']);
  $file->size = $headers['X-File-Size'];
  $file->content = file_get_contents("php://input");
  if(file_put_contents('files/'.$file->name, $file->content))
    echo $_GET['id'];
?>
0

, , , , .

  • <input> .
    • : filesUpload.addEventListener("change", function () {traverseFiles(this.files);}, false);
    • <input> : dropArea.addEventListener("drop", function (evt) {traverseFiles(evt.dataTransfer.files);}, false);
  • traverseFiles, , , FileList ( File s), API. uploadFile File.
  • uploadFile File ajax (XMLHttpRequest.send(file)).

, , : , -. API , , , -. <input> , ( traverseFiles).

? , , , / .

0
<input type=file multiple>
<div id='dropzone'>Drop Files Here</div>

onchange and ondrop shuld events bind the function to a variable to get a list of files.

var files=e.target.files||e.dataTransfer.files

Read it

0
source

More articles:


All Articles