如何上傳多個圖像的縮略圖，然後在上傳之前選擇其中一個

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> 

這裏是url http://jsfiddle.net/7s9krm2h/

Answer 1

如果我理解正確的話，你可以創建一個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="answer" id="answer" /> 
 
    <div id="imagePreview"></div> 
 
    <button type="submit">Fake send the form</button> 
 
</form>