2016-12-29 7 views
0

私は、ローカルディレクトリに画像の名前をall of these含むtxtファイルを使用して複数の画像を読み込む簡単なウェブサイトを作成しています。ファイル名を使用してローカルディレクトリから複数の画像をロード

ウェブサイトがイメージの名前(つまり1.jpg)のtxtファイルを読み込んで、対応する名前のイメージをウェブサイトに読み込むという流れです。

私は現在これに固執しています。任意の提案は大歓迎です:)

UPDATE 1つの

私の謝罪。私は入力ファイルを1行ずつ読み終えました。しかし、後でロードするための配列に各行を追加する方法を理解していません。 JavaScriptので

コード

document.getElementById('file').onchange = function(){ 

    var file = this.files[0]; 

    var reader = new FileReader(); 
    reader.onload = function(progressEvent){ 
    // By lines 
    var lines = this.result.split('\n'); 
    arr 
    for(var line = 0; line < lines.length; line++){ 
     console.log(lines[line]); 
    } 
    }; 
    reader.readAsText(file); 
}; 

HTML内のコード

<!DOCTYPE html> 

<html> 
<head> 

<title>Test</title> 
</head> 

<body> 

<input type="file" name="file" id="file"> 
<script type="text/javascript" src= "Functions.js"></script> 
</body> 
</html> 

UPDATE 2

私は、私は配列(ImageNameList)に名前を追加していると思いますそれでも私はすべてを表示することに問題があります 画像。ここで私はこれまで持っているものです。

JavaScriptを

document.getElementById('file').onchange = function(){ 

    var file = this.files[0]; 

    var ImageNameList = []; 
    var reader = new FileReader(); 
    reader.onload = function(progressEvent){ 
    // By lines 
    var lines = this.result.split('\n'); 

    for(var line = 0; line < lines.length; line++){ 
     console.log(lines[line]); 
     ImageNameList.push(lines[line]); 
     document.getElementById("test").innerHTML = ImageNameList; 
    } 
}; 
reader.readAsText(file); 
}; 

function displayAllImages() { 
    var i = 0, 
     len = ImageNameList.length;   
    for (; i < ImageNameList.length; i++) { 

     var img = new Image(); 
     img.url = ImageNameList[i]; 
     img.style.width = '160px'; 
     img.style.height = '120px'; 

     document.getElementById('images').appendChild(img); 
    } 
}; 

HTML

<!DOCTYPE html> 

<html> 
<head> 

<title>Test</title> 
</head> 

<body> 

<input type="file" name="file" id="file"> 
<div id="test"></div> 

<div id="container"> 

    <div class="ImageNameList"> 
     <ul id="images"></ul> 
    </div> 
</div> 

<script type="text/javascript" src= "Functions.js"></script> 
</body> 
</html> 
+0

小さなコードは決して誰も殺しませんでした。 [最小、完全、および検証可能](http://stackoverflow.com/help/how-to-ask)の例を作成する方法を見てください。 – dirtydanee

+0

'push()'を使うと、項目を配列に押し込むことができます。私はそれがあなたを助けると思うようにこれを見てください。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push – NewToJS

+0

ベン、あなたの質問を編集しないでください。これは、既存の回答が間違って見えることを意味する質問を変更しています。あなたの質問は、既存の 'for()'ループの配列にどのように結果を入れるかです。私は 'push()'を使うことができ、関連するリンクをリソースに含めることを説明しました。なぜあなたの質問ソースコードにそれを追加したのか分かりません。これらのイメージを表示するには、アレイを反復処理する必要があります。私は基本的なjavascriptと配列を調べることをお勧めします。 – NewToJS

答えて

1

私は、クライアントが解析できるように、あなたはJSONファイルにtxtファイルから変更を提案それ。

{ 
    "filenames": ["1.jpg", "2.jpg"] 
} 

次に、jsonファイルをxhrリクエストでロードし、レスポンス本文をJSON.parseで解析できます。

これが役に立ちます。私は、必要なら電話ではなく、もっと完全な例を挙げることができます。

+0

これは推奨事項であり、コメントに記載する必要があります。これは上記の質問に答えたり解決したりしません。 – NewToJS

+0

可能であれば、完全な例が良いでしょう!前もって感謝します :) – Ben27

関連する問題