从文件夹JQuery中选择随机图像文件 [英] Select random image files from folder JQuery

问题描述

我有一个文件夹，其中包含任意数量的不同图像。我想一次选择任意图片。

 < div id =putimages> 
 < / div> 
  

如何使用 Jquery 执行此操作？

解决方案

您的用户需要使用浏览器对话框选择一个目录。然后，如果目录仅包含图片，您可以尝试下面的代码片段：

$（$'$'$ $ $ $ $ $ $'$'$'$'函数（）{
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 =filemultiple webkitdirectory mozdirectory msdirectory odirectory directory /> 
< div id =putimages> 
< img id =my_image/> 
< / div> 
  

请参阅： http://jsfiddle.net/Dk9rc/

I have a folder which contains any number of different images in it. I want to select any random image at a time.

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

How can i do this using Jquery?

解决方案

Your user need to select a directory using browser dialog. Then if directory contains only images, you could try following snippet:

$('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]);

});

Relevant HTML:

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

See for example: http://jsfiddle.net/Dk9rc/

这篇关于从文件夹JQuery中选择随机图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！