2015-06-18 2 views
-2

Если возможно, может кто-то мне помочь в этом. Например, я сделал YouTube. Как вы видите в этом PLNKR LINK: http://plnkr.co/edit/44EQKSjP3Gl566wczKL6?p=previewАвтоматическое добавление ссылок на файлы в папке в JavaScript

Например embed это моя папка и в этой папке у меня есть файлы с именем p9zdCra9gCE и QrMOu4GU3uU, как вы видите их здесь:

<div class="ytid" data-str="p9zdCra9gCE">video 1</div> 
<div class="ytid" data-str="QrMOu4GU3uU">video 2</div> 

Если это возможно, я хочу так что всякий раз, когда я добавить файл как, p9zdCra9gCE.html или QrMOu4GU3uU.html в папке embed будет автоматически добавляться на индексной странице рядом с другими кнопками видео, чтобы стать, как это:

<div class="ytid" data-str="p9zdCra9gCE">video 1</div> 
<div class="ytid" data-str="QrMOu4GU3uU">video 2</div> 
<div class="ytid" data-str="AnotherFile">video 3</div> 
<div class="ytid" data-str="AnotherFile">video 4</div> 
<div class="ytid" data-str="AnotherFile">video 5</div> 

Как я могу это сделать?

+0

Что вы пробовали? Пожалуйста, разместите свой код в вопросе, а не как ссылку. – APH

+0

Я еще ничего не пробовал, мне было интересно, возможно ли это , и я отправил свой код по этой ссылке, что облегчает для кого-то, что может помочь. – student440988

+0

Рассмотрите возможность добавления тега на стороне сервера, такого как nodejs или php. Все теги в этом вопросе относятся к технологиям на стороне клиента, которые не могут получить доступ к файловой системе – HelloWorld

ответ

0
<html> 
<head> 
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/myjs.js"></script> 
<style> 
.ytid{float:left;margin-right:5px;border:1px solid black} 
.clear{clear:both;} 
</style> 
</head> 

<body> 

<div class="listids"> 
    <div class="ytid" data-str="p9zdCra9gCE">video 1</div> 
    <div class="ytid" data-str="QrMOu4GU3uU">video 2</div> 
</div> 


<div class="clear"></div> 
<br> 

<div class="vidarea"> 
      <div class="load_vid"></div> 
     <iframe class="vid_src" data-src="" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="width:640px; height:460px;display:none;" allowfullscreen=""></iframe> 
      </div> 

<br><br><br><br><br><br><br><br><br><br> 

<textarea class="embed" data-content="&lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt;" onfocus="this.select();" onclick="this.select()"> 
    &lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt; 

</textarea> 

<script> 
    $(document).ready(function(e) { 
     $(".vid_src").attr("data-src", "https://www.youtube.com/embed/p9zdCra9gCE"); 
     var t = "1"; 
     var n = $(".embed").attr("data-content"); 
     n = n.replace("[ytvidID]", t); 
     $(".embed").html(n); 
     $(".listids").slideDown(); 

     bindEventHandlers(); 


     $(".embed").keyup(function() 
     { 
      var valuetoinspect = $(this).val(); 
      if(valuetoinspect.indexOf(".html") != -1) 
      { 
       var vidvalue = valuetoinspect.split(".html"); 
       checkAndMergeVideoListing(vidvalue[0]); 
      } 
     }) 
    }) 

    function checkAndMergeVideoListing(video) 
    { 
     var count = $(".ytid").length; 

     if($(".ytid[data-str=\""+video+"\"]").attr("data-str") == null) 
     { 
      var $div = $("<div></div>"); 
      $div.addClass("ytid"); 
      $div.attr("data-str",video); 
      $div.html("video " + (count+1)); 

      $(".listids").append($div); 

      bindEventHandlers(); 

      $(".ytid[data-str=\""+video+"\"]").click(); 
     } 
    } 

    function bindEventHandlers() 
    { 
     $(".ytid").unbind("click").click(function(e) { 
      var t = $(this).attr("data-str"); 
      var n = "https://www.youtube.com/embed/" + t + ""; 
      var r = $(".embed").attr("data-content"); 
      r = r.replace("[ytvidID]", t); 
      $(".embed").html(r); 
      $(".vid_src").attr("src", n); 
      clearInterval(interval); 
      document.querySelector(".load_vid").style.display = "none"; 
      $(".vid_src").show(); 
      return 
     }) 
    } 
</script> 

</body> 
</html> 

Пожалуйста, проверьте here для демо, предполагая, что в вставлять текстовое поле вы вводите что-то вроде p9zdCra9gCE.html. Он добавляется на вкладку видео [то же самое начинается воспроизведение]. Пожалуйста, дайте мне знать, если я не смог понять ваше требование. Надеюсь, поможет!

0

Чтобы помочь вам на вашем пути «немного», я бы предложил следующее:
1. Используйте php или другой язык SERVER SIDE. Как уже упоминалось в комментариях, вы не сможете получить доступ к файловой системе на сервере с помощью javascript или jquery.
2. Используйте, например, метод scandir() (thats php), чтобы получить содержимое вашей папки. См. http://php.net/manual/en/function.scandir.php
3. Это вернет массив файлов и папок в отсканированном каталоге. Используйте цикл foreach для генерации div-ytid.

Если вы понятия не имеете, что это означает, я предлагаю следовать учебнику по php на codecademy или другом онлайн-ресурсе. Удачи!

+0

Я не ожидал такого ответа. Мне нужен кто-то, кто может мне помочь, например, некоторые коды «как» «пример» и т. д., но спасибо за ваше время, отвечая на мой вопрос – student440988

+0

. Я буду держать этот вопрос открытым, я все еще ожидаю человека, который очень помог мне в прошлом , я жду его ... – student440988

+1

Я получаю, откуда вы, но ваш вопрос не показывает никаких исследований. Что вы пробовали? Что вы узнали? Почему ваше решение не работает? Лучше научиться ловить рыбу, чем пытаться получить ее бесплатно :) –

Смежные вопросы