php - 如何上传带有缩略图的多张图片并在上传前选择其中一张

Question

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

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

我尝试了以下来自 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/

Answer 1

如果我理解正确，您可以创建一个隐藏 字段。当用户点击 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="answer" id="answer" />
  <div id="imagePreview"></div>
  <button type="submit">Fake send the form</button>
</form>