Question

<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>

我正在寻找一个简单的拖拽和放大器放下，不要太复杂。我不知道如何在添加后预览图像。

此外，如果您点击图片，它必须是最重要的。

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

谢谢！

P.S： 我检查了这个，但没有多个：JSFIDDLE

Answer 1

以下是您的解决方案： -

创建一个test.php文件并运行此代码。它允许您上传多个文件，您可以预览它们。

<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>

希望它会对你有所帮助:)。

拖拽在上传之前删除文件上传多个预览 - php，javascript

1 个答案: