次のコードでは、個のファイルのうちのみが出力されます。 一つだけファイルを選択するには複数ファイルの名前をjsに表示する方法
、それはファイルの名前を示しているが、同じことが複数のファイルにを選択する上で動作しません。
$('input').on('change', function(){
if(this.files.length > 0)
{
$('div').text(this.files);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Select a file to upload:
<input type="file" multiple/>
<div></div>$('input').on('change', function(){
if(this.files.length > 0)
{
var files = [];
for(var i=0; i<this.files.length; i++) {
files.push(this.files[i].name);
}
$('div').text(files);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Select a file to upload:
<input type="file" multiple/>
<div></div>ファイルのような配列であるファイルリストです。プロパティからすべての名前を取得する方法はありません。あなたの例では、名前を名前に変更した場合、最初のファイル名が得られます。 1つの名前だけを取得
：
$('input').on('change', function(){
var out = "";
if(this.files.length > 0)
{
out = this.files[0].name;
}
$('div').text(out);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Select a file to upload:
<input type="file" multiple/>
<div></div>は、すべての名前を取得するには、コレクションをループする必要があり、文字列を構築します。
$('input').on('change', function(){
var out = "";
if(this.files.length > 0)
{
out = [].slice.call(this.files).map(function(f) { return f.name; }).join(", ");
}
$('div').text(out);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Select a file to upload:
<input type="file" multiple/>
<div></div>選択したすべてのファイルが含まれていFileListオブジェクトを反復処理する必要があります。各Fileオブジェクトには、次のプロパティがあります。あなたは、検証または何か他のもののようなものを作りたい場合は
は、これらのに役立ちます。
function handleFiles (files) {
\t const output = document.getElementById('files');
let outText = output.textContent;
if (files.length) {
\t outText = '';
}
\t [...Array(files.length)].forEach((v, i) => {
\t const file = files.item(i);
const filename = file.name;
outText += `- ${filename}\n`;
});
output.textContent = outText;
}*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input[type="file"] {
display: none;
}
input[type="file"] + label {
background-color: #ff0065;
border-radius: 3px;
color: #fff;
display: inline-block;
cursor: pointer;
font-family: 'open sans';
font-size: 15px;
margin: 20px 0 0 2rem;
padding: .5rem 1rem;
}
pre#files {
background-color: #fff;
border: 1px solid #DDD;
border-radius: 3px;
color: #444;
font-family: 'open sans';
font-size: 15px;
margin: 20px auto;
padding: 2rem 1rem;
width: 90%;
}<input type="file" id="selector" multiple onchange="handleFiles(this.files)">
<label for="selector">Select files</label>
<pre id="files">No files found</pre>
"名前" は何ですか？ – epascarello
@epascarelloはここで良い質問をしています。変数名 "names"は複数を示唆しています。もちろん、名前のスペルを間違えていないか、または配列をテキストとして設定しようとしている可能性がありますか？コンソールは何を言いますか？ – KjetilNordin
this.filesはファイル（FileList）の配列です。各ファイルにはあなたの情報があります。コンソールで印刷してみてください。 https://developer.mozilla.org/en-US/docs/Web/API/FileList –