从文件夹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');