如何使缩略图显示在“添加文件”按钮下方？

Question

我有一些代码会显示用户选择上传的文件的缩略图预览。但是，我希望它看起来更像这样：

我正在尝试使用此缩略图部分完成一些事情：

1. 要显示缩略图预览以下“添加文件”按钮
2. 将图像显示为较小的图像图像，将文件显示为文件的预设图像，将视频显示为带有播放符号的视频的缩略图（请参阅上面的链接以获取示例）

3. 最多可设置5个可上传的文件。

   <script type="text/javascript">
       $(function() {
       $("#uploadFile").on("change", function()
       {
           var files = !!this.files ? this.files : [];
           if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
   
           if (/^image/.test( files[0].type)){ // only image file
               var reader = new FileReader(); // instance of the FileReader
               reader.readAsDataURL(files[0]); // read the local file
   
               reader.onloadend = function(){ // set image data as background of div
                   $("#imagePreview").css("background-image", "url("+this.result+")");
               }
           }
       });
   });
   

Answer 1

1）在“添加文件”按钮

下方显示缩略图预览

使用id =“imagePreview”移动您的标记，然后输入文件

2）将图像显示为较小的图像图像，将文件显示为文件的预设图像，将视频显示为视频的缩略图，并在其上显示播放符号（参见上面的链接示例）

为你的#imagePreview设置css 例如：#imagePreview {width：100px;身高：100px; }

3）您没有提供上传功能，因此...代码中不超过1个字段和预览...所以我该如何帮助您？通常 - 添加一个计数器作为全局变量并检查它...当它达到5时...隐藏文件输入