如何上传带有缩略图的多张图片，并在上传前选择其中一张 - how to upload multiple image with thumbnail and select one of them before upload

how to upload multiple image with thumbnail and select one of them before upload

本文关键字：选择一张略图张图片 | 更新日期: 2023-09-27

我正在制作问答游戏，我需要在上传图像之前上传多张带有缩略图的图像，但同时我必须能够选择一张图像。这里的目的是我上传多个图像作为选项图像，显然其中一个图像是它们之间的答案图像.我需要将所有图像URL和答案图像URL存储在数据库的分离列中。

我尝试了使用缩略图上传多张图像，但我不知道如何从中选择一张图像。请提前提供帮助，谢谢。

我尝试了以下代码jsfiddel

var inputLocalFont = document.getElementById("file");
inputLocalFont.addEventListener("change",previewImages,false);
function previewImages(){
    var fileList = this.files;
    var anyWindow = window.URL || window.webkitURL;
    for(var i = 0; i < fileList.length; i++){
        var objectUrl = anyWindow.createObjectURL(fileList[i]);
        $('#imagePreview').append('<img src="' + objectUrl + '" width="100" height="100"/>');
        window.URL.revokeObjectURL(fileList[i]);
    }
}

而 html 是

<input id="file" type="file" name="file[]" multiple/>
<div id="imagePreview"></div>

这是网址 http://jsfiddle.net/7s9krm2h/

如果我理解正确，您可以创建一个hidden字段。当用户单击img将索引存储在hidden中时。此字段将与表单一起发送到服务器。

喜欢这个：

var inputLocalFont = document.getElementById("file");
inputLocalFont.addEventListener("change",previewImages,false);
function previewImages(){
  var fileList = this.files;
  var anyWindow = window.URL || window.webkitURL;
  for(var i = 0; i < fileList.length; i++){
    var objectUrl = anyWindow.createObjectURL(fileList[i]);
    $('#imagePreview').append('<img src="' + objectUrl + '" />');
    window.URL.revokeObjectURL(fileList[i]);
  }
}
$('#imagePreview').on('click', 'img', function() {
  var images = $('#imagePreview img').removeClass('selected'),
      img = $(this).addClass('selected');
  
  $('#answer').val(images.index(img));
});
$('form').submit(function(e) {
  e.preventDefault();
  alert($('form').serialize());
});

img {
  padding:5px;
  border:3px solid silver;
}
img:hover, img.selected {
  border:3px solid green;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="file" type="file" name="file[]" multiple/>
  <input type="hidden" name="answerswer" id="answerswer" />
  <div id="imagePreview"></div>
  <button type="submit">Fake send the form</button>
</form>