简体   繁体   中英

Drag & drop files upload multiple with preview before upload - php, javascript

<div class="dragdrop">
    <input type="file" name="files[]" multiple="multiple" />
</div>

<div class="preview">
   <src class="image-1" href="" alt="" />
   <src class="image-2" href="" alt="" />
   <src class="image-3" href="" alt="" />
    ???
</div>

I'm looking for a simple drag & drop, not to be too complicated.I do not know how you can preview images, after the addition.

Also, if you click on an image, it must be the top priority.

$priority = $_POST['image-2'];

Thanks!

PS: I check this, but no multiple: JSFIDDLE

Here is your solution:-

Make a test.php file and run this code. It will allow you to upload multiple files and you can preview them.

<html>
<head>
  <title></title>
   <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

  <input multiple="1" onchange="readURL(this);" id="uploadedImages" name="pictures[]" type="file">
  <div id ="up_images"></div>

<script type="text/javascript">

  var readURL = function(input) {
      $('#up_images').empty();   
      var number = 0;
      $.each(input.files, function(value) {
          var reader = new FileReader();
          reader.onload = function (e) {
              var id = (new Date).getTime();
              number++;
              $('#up_images').prepend('<img id='+id+' src='+e.target.result+' width="100px" height="100px" data-index='+number+' onclick="removePreviewImage('+id+')"/>')
          };
          reader.readAsDataURL(input.files[value]);
          }); 
    }

</script>
</body>
</html>

Hope it will help you :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM