從文件夾JQuery中選擇隨機圖像文件

Question

我有一個文件夾，其中包含任意數量的不同圖像。我想一次選擇任何隨機圖像。

<div id="putimages"> 
<img id="my_image" src"any random images from selected folder"/> 
</div> 

我如何使用Jquery來做到這一點？

Answer 1

你的用戶需要使用瀏覽器對話框中選擇一個目錄。然後，如果目錄僅包含圖片，你可以嘗試下面的代碼片段：

$('input').on('change', function() { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $('#my_image').attr('src', e.target.result); 
    } 

    if (!this.files.length) return; 

    var randIndex = parseInt(Math.random() * this.files.length, 10); 
    reader.readAsDataURL(this.files[randIndex]); 

}); 

相關HTML：

<input type="file" multiple webkitdirectory mozdirectory msdirectory odirectory directory /> 
<div id="putimages"> 
    <img id="my_image" /> 
</div> 

見例如：http://jsfiddle.net/Dk9rc/

Answer 2

首先，如果你已經爲你的例如文件夾中100圖像並命名相似圖片images1.jpg，imgaes2.jpg，images3.jpg .....直到images100.jpg。

其次，如果你把你的圖像稱爲Images文件夾內和當前HTML是同一水平這個文件夾，那麼你可以使用：

var randomNum = Math.floor((Math.random()*100)+1); 
$('#my_image').attr('src', 'Images/images' + randomNum + '.jpg');