文章/答案/技术大牛

发布

社区首页 >问答首页 >在上传- php，javascript之前拖放多个带有预览的文件

问在上传- php，javascript之前拖放多个带有预览的文件
EN

Stack Overflow用户

提问于 2016-02-04 10:50:26

回答 1查看 3.1K关注 0票数 0

<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

javascript

php

jquery

html

回答 1

Stack Overflow用户

发布于 2016-02-04 12:53:14

这是你的解决办法：-

创建一个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>

希望它能帮助你:)

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35199057

复制

相似问题

问在上传- php，javascript之前拖放多个带有预览的文件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在上传- php，javascript之前拖放多个带有预览的文件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在上传- php，javascript之前拖放多个带有预览的文件
EN