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 ......直到{{ 1}}。

其次，如果您将图像放在名为images100.jpg的文件夹中，并且您当前的HTML与此文件夹的级别相同，那么您可以使用：

Images

从文件夹JQuery中选择随机图像文件

2 个答案: