各ファイルのオプションを作成する

-1

<!DOCTYPE html> 
<html> 
<div class = "Top"> 
<center> 
<h1> 
Reaper MP3 
</h1> 
</center> 
</div> 

<div class = "Middle"> 
<center> 
<input type = "file" webkitdirectory id = "In" oninput = "LoadFiles()" value = ""> 

<br> 

<select id = "Sel" class = "S"> 
</select> 
</center> 
</div> 

<div class = "Bottom"> 
<center> 
<audio controls src = "" id = "Plyr"> 
</audio> 
</center> 
</div> 

<style> 
.Top { 
width: 100%; height: 50px; 
background: #FF0000; 
} 

.Middle { 
width: 100%; height: 500px; 
background: #990099; 
} 

.S { 
width: 150px; height: 25px; 
} 

.Bottom { 
width: 100%; height: 50px; 
background: #FF0000; 
} 
</style> 

<script> 
var SelectFolder = document.getElementById("In"); 

var Player = document.getElementById("Plyr"); 
var Select = document.getElementById("Sel"); 

var DefaultFolder = "/This PC/Music"; 
var NewOption = document.createElement("option"); 
var Info = document.createTextNode(""); 
NewOption.appendChild(Info); 

Select.appendChild(NewOption); 

function LoadFiles() { 

} 
</script> 
</html>

私はフォルダ内の各ファイルを選択するオプションを追加することができます。私の場合、フォルダのパスは「/ This PC/Music」であり、オーディオsrc =選択したファイル/オプションの場所に移動します。私はこれをどのようにすることができるか知っていますか？各ファイルのオプションを作成する

出典

2016-06-22 user6452086

通常、Javascriptはディスク上のフォルダから読み取れません。フォルダがサーバー上にある場合は、フォルダを調べてHTMLマークアップを作成するために、サーバー側の言語（PHP、ASP.NET/C＃など）が必要です。または（アヤックス経由）あなたのJavaScriptにリストを返し、JavaScriptを構築するWebサービスを持っている - それはADysonが実行されているJavaScriptの指摘

出典

2016-06-22 15:31:06 ADyson

として、それまで以上ありますしない限り、このような場合には不要と思われますクライアント側ではファイルにアクセスできません。しかし、PHPでこれを行うことができます（サーバー側です）。どのようにすればよいでしょうか？：

<html> 
    <head></head> 

    <body> 
    <?php 
     $dir_handle=opendir("directory_path_here"); //creates a handle of the dir 
     while (false!==($file=readdir($dir_handle))) { //loop through files/folders in the dir 
      echo("<input type='checkbox' name='items[]' value='$file' />"); //show it on page after load 
     } 

    ?> 


    </body> 


</html>

これらはチェックボックスです。あなたのコードにselectがあり、それも使うことができます。ユーザーが何かを選択すると、jQueryでajaxを使用して音楽を再生したり、選択した音楽を送信するページをリフレッシュすることができます（取得または投稿の形式）。

出典

2016-06-22 15:54:00

各ファイルのオプションを作成する

答えて

関連する問題