堆栈内存溢出
  简体   繁体   English

Javascript-从文件夹获取图像

[英]Javascript - get images from a folder

 原文  2017-05-19 12:06:54  4   1    javascript/ jquery/ css

问题描述

I need to load get images and use them in the js justify plugin that I am using on my page. 我需要加载获取图像并在我在页面上使用的js证明插件中使用它们。 This is my script: 这是我的脚本： 

$(document).ready(function(){

  var folder = "img/people";

  $.ajax({
    url : folder,
    success: function (data) {
        console.log(data);
    }
  });

});
var showPhotos = function(photos){

    $('.image-container').empty().justifiedImages({
        images : photos,
        rowHeight: 500,
        maxRowHeight: $('.gallery').height(),
        thumbnailPath: function(photo, width, height){
            var purl = photo.url_s;
            if( photo.url_n && (width > photo.width_s * 1.2 || height > photo.height_s * 1.2) ) purl = photo.url_n;
            if( photo.url_m && (width > photo.width_n * 1.2 || height > photo.height_n * 1.2) ) purl = photo.url_m;
            if( photo.url_z && (width > photo.width_m * 1.2 || height > photo.height_m * 1.2) ) purl = photo.url_z;
            if( photo.url_l && (width > photo.width_z * 1.2 || height > photo.height_z * 1.2) ) purl = photo.url_l;
            return purl;
        },
        getSize: function(photo){
            return {width: photo.width_s, height: photo.height_s};
        },
        margin: 1
    });
}

But, when I do console.log(data) I get the this: 但是，当我执行console.log（data）时，我得到以下信息： 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>listing directory /img/people/</title>
    <style>* {
  margin: 0;
  padding: 0;
  outline: 0;
}

body {
  padding: 80px 100px;
  font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
  background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
  background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9);
  background-repeat: no-repeat;
  color: #555;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-size: 22px;
  color: #343434;
}
h1 em, h2 em {
  padding: 0 5px;
  font-weight: normal;
}
h1 {
  font-size: 60px;
}
h2 {
  margin-top: 10px;
}
h3 {
  margin: 5px 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
}
ul li {
  list-style: none;
}
ul li:hover {
  cursor: pointer;
  color: #2e2e2e;
}
ul li .path {
  padding-left: 5px;
  font-weight: bold;
}
ul li .line {
  padding-right: 5px;
  font-style: italic;
}
ul li:first-child .path {
  padding-left: 0;
}
p {
  line-height: 1.5;
}
a {
  color: #555;
  text-decoration: none;
}
a:hover {
  color: #303030;
}
#stacktrace {
  margin-top: 15px;
}
.directory h1 {
  margin-bottom: 15px;
  font-size: 18px;
}
ul#files {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
ul#files li {
  float: left;
  width: 30%;
  line-height: 25px;
  margin: 1px;
}
ul#files li a {
  display: block;
  height: 25px;
  border: 1px solid transparent;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
}
ul#files li a:focus,
ul#files li a:hover {
  background: rgba(255,255,255,0.65);
  border: 1px solid #ececec;
}
ul#files li a.highlight {
  -webkit-transition: background .4s ease-in-out;
  background: #ffff4f;
  border-color: #E9DC51;
}
#search {
  display: block;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 90px;
  -webkit-transition: width ease 0.2s, opacity ease 0.4s;
  -moz-transition: width ease 0.2s, opacity ease 0.4s;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  -webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
  -moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
  -webkit-font-smoothing: antialiased;
  text-align: left;
  font: 13px "Helvetica Neue", Arial, sans-serif;
  padding: 4px 10px;
  border: none;
  background: transparent;
  margin-bottom: 0;
  outline: none;
  opacity: 0.7;
  color: #888;
}
#search:focus {
  width: 120px;
  opacity: 1.0; 
}

/*views*/
#files span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 10px;
}
#files .name {
  background-repeat: no-repeat;
}
#files .icon .name {
  text-indent: 28px;
}

/*tiles*/
.view-tiles .name {
  width: 100%;
  background-position: 8px 5px;
}
.view-tiles .size,
.view-tiles .date {
  display: none;
}

/*details*/
ul#files.view-details li {
  float: none;
  display: block;
  width: 90%;
}
ul#files.view-details li.header {
  height: 25px;
  background: #000;
  color: #fff;
  font-weight: bold;
}
.view-details .header {
  border-radius: 5px;
}
.view-details .name {
  width: 60%;
  background-position: 8px 5px;
}
.view-details .size {
  width: 10%;
}
.view-details .date {
  width: 30%;
}
.view-details .size,
.view-details .date {
  text-align: right;
  direction: rtl;
}

/*mobile*/
@media (max-width: 768px) {
  body {
    font-size: 13px;
    line-height: 16px;
    padding: 0;
  }
  #search {
    position: static;
    width: 100%;
    font-size: 2em;
    line-height: 1.8em;
    text-indent: 10px;
    border: 0;
    border-radius: 0;
    padding: 10px 0;
    margin: 0;
  }
  #search:focus {
    width: 100%;
    border: 0;
    opacity: 1;
  }
  .directory h1 {
    font-size: 2em;
    line-height: 1.5em;
    color: #fff;
    background: #000;
    padding: 15px 10px;
    margin: 0;
  }
  ul#files {
    border-top: 1px solid #cacaca;
  }
  ul#files li {
    float: none;
    width: auto !important;
    display: block;
    border-bottom: 1px solid #cacaca;
    font-size: 2em;
    line-height: 1.2em;
    text-indent: 0;
    margin: 0;
  }
  ul#files li:nth-child(odd) {
    background: #e0e0e0;
  }
  ul#files li a {
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 15px 10px;
  }
  ul#files li a:focus,
  ul#files li a:hover {
    border: 0;
  }
  #files .header,
  #files .size,
  #files .date {
    display: none !important;
  }
  #files .name {
    float: none;
    display: inline-block;
    width: 100%;
    text-indent: 0;
    background-position: 0 50%;
  }
  #files .icon .name {
    text-indent: 41px;
  }
}
</style>
    <script>
      function $(id){
        var el = 'string' == typeof id
          ? document.getElementById(id)
          : id;

        el.on = function(event, fn){
          if ('content loaded' == event) {
            event = window.attachEvent ? "load" : "DOMContentLoaded";
          }
          el.addEventListener
            ? el.addEventListener(event, fn, false)
            : el.attachEvent("on" + event, fn);
        };

        el.all = function(selector){
          return $(el.querySelectorAll(selector));
        };

        el.each = function(fn){
          for (var i = 0, len = el.length; i < len; ++i) {
            fn($(el[i]), i);
          }
        };

        el.getClasses = function(){
          return this.getAttribute('class').split(/\s+/);
        };

        el.addClass = function(name){
          var classes = this.getAttribute('class');
          el.setAttribute('class', classes
            ? classes + ' ' + name
            : name);
        };

        el.removeClass = function(name){
          var classes = this.getClasses().filter(function(curr){
            return curr != name;
          });
          this.setAttribute('class', classes.join(' '));
        };

        return el;
      }

      function search() {
        var str = $('search').value
          , links = $('files').all('a');

        links.each(function(link){
          var text = link.textContent;

          if ('..' == text) return;
          if (str.length && ~text.indexOf(str)) {
            link.addClass('highlight');
          } else {
            link.removeClass('highlight');
          }
        });
      }

      $(window).on('content loaded', function(){
        $('search').on('keyup', search);
      });
    </script>
  </head>
  <body class="directory">
    <input id="search" type="text" placeholder="Search" autocomplete="off" />
    <div id="wrapper">
      <h1><a href="/">~</a> / <a href="/img">img</a> / <a href="/img/people">people</a> / </h1>
      <ul id="files" class="view-tiles"><li><a href="/img" class="" title=".."><span class="name">..</span><span class="size"></span><span class="date"></span></a></li>
<li><a href="/img/people/1.jpg" class="" title="1.jpg"><span class="name">1.jpg</span><span class="size">57195</span><span class="date">5/19/2017 2:02:18 PM</span></a></li>
<li><a href="/img/people/2.jpg" class="" title="2.jpg"><span class="name">2.jpg</span><span class="size">83345</span><span class="date">5/19/2017 2:02:18 PM</span></a></li>
<li><a href="/img/people/3.jpg" class="" title="3.jpg"><span class="name">3.jpg</span><span class="size">77362</span><span class="date">5/19/2017 2:02:18 PM</span></a></li>
<li><a href="/img/people/4.jpg" class="" title="4.jpg"><span class="name">4.jpg</span><span class="size">71906</span><span class="date">5/19/2017 2:02:18 PM</span></a></li>
<li><a href="/img/people/5.jpg" class="" title="5.jpg"><span class="name">5.jpg</span><span class="size">90691</span><span class="date">5/19/2017 2:02:18 PM</span></a></li></ul>
    </div>
  </body>
</html>

How can I get the images from the folder and then use them in this plugin? 如何从文件夹中获取图像，然后在此插件中使用它们？

1 个解决方案

解决方案1
 0  2017-05-19 13:02:33

@leff because of browser security framework we cant get location of file. @leff由于浏览器的安全框架，我们无法获取文件的位置。 You will get file path as "C:\\fakepath\\Capture.PNG". 您将获得文件路径为“ C：\\ fakepath \\ Capture.PNG”。 So to resolve that that fakepath. 因此，要解决该问题。 I found one solution, may be this one work. 我找到了一种解决方案，可能是这一项工作。

So what you can do a simple trick that take a variable and assigned it the base address of you file location. 因此，您可以做一个简单的技巧，将一个变量并为其分配文件位置的基址。 After that append the file name with the base address this will give you file location. 之后，在文件名后附加基址，这将为您提供文件位置。

Hope this one solve your problem 希望这个能解决你的问题 

    <!doctype html>
    <html>
    <head>
     <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
   </head>
   <body>
      <input type="file" id="imageFile">
      <button id="getFileNameButton">GET-FILE-NAME</button>
  </body>
  <script type="text/javascript">

  $( "#getFileNameButton" ).click(function() {
    var baseAddress = "fixed/file/location";  
    var name = document.getElementById("imageFile").files[0].name;  /* get 
          file name*/
    console.log(baseAddress+'/'+name);
  });
 </script>

</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从文件夹Javascript / Jquery将图像读取到网页 - Reading Images to a webpage from folder Javascript/Jquery 使用文件夹中的图像在Javascript中创建数组 - Make an array in Javascript with images from a folder 从javascript中的单独文件夹中拍摄图像 - take images from a seperate folder in javascript Javascript; 从阵列中的文件夹保存图像 - Javascript; Saving images from folder in array 如何使用javascript从文件夹加载图像 - How to load images from folder by using javascript 从本地文件夹获取所有图像 - Get all images from local folder javascript从列表中获取图像 - javascript get images from list 如何使用javascript获取文件夹中的图像列表？ - How can I get a list of images in a folder using javascript? 使用JavaScript将文件夹中的图库图像显示到网页中 - Show gallery images from folder into webpage using JavaScript 使用 JavaScript 动态加载文件夹/子文件夹中的所有图像 - Dynamically load all images from folder/subfolders with JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM