Question

我正在开展测验游戏，我需要在上传图像之前上传多个带缩略图的图像，但同时我必须能够选择一个图像。这里的目的是我上传多个图像作为选项图像，显然是其中一个图像是它们之间的答案图像。我需要在数据库的sepraet列中存储所有图像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/

Answer 1

如果我理解正确，您可以创建hidden字段。当用户点击img存储hidden中的索引时。该字段将以表格形式发送到服务器。

喜欢这样：

＆＃13;

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());
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用缩略图上传多个图像，并在上传前选择其中一个

1 个答案: