私は、ローカルディレクトリに画像の名前を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>
小さなコードは決して誰も殺しませんでした。 [最小、完全、および検証可能](http://stackoverflow.com/help/how-to-ask)の例を作成する方法を見てください。 – dirtydanee
'push()'を使うと、項目を配列に押し込むことができます。私はそれがあなたを助けると思うようにこれを見てください。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push – NewToJS
ベン、あなたの質問を編集しないでください。これは、既存の回答が間違って見えることを意味する質問を変更しています。あなたの質問は、既存の 'for()'ループの配列にどのように結果を入れるかです。私は 'push()'を使うことができ、関連するリンクをリソースに含めることを説明しました。なぜあなたの質問ソースコードにそれを追加したのか分かりません。これらのイメージを表示するには、アレイを反復処理する必要があります。私は基本的なjavascriptと配列を調べることをお勧めします。 – NewToJS