"入力ファイル"ボタンにアップロードされたファイルを表示できません

YouTube上のチュートリアルを正確にコピーしてもアップロードされたファイルの名前を表示することができない理由はありますか？？チュートリアルeで"入力ファイル"ボタンにアップロードされたファイルを表示できません

はJSでeventListener機能のために使用されますが、アドビのDreamweaverは、それのどれも持っていないので、私は、任意の洞察力を事前にaddEventListener

感謝を使用しました。あなただけの代わりに、あなたのfiles変数を使用することができます:)

https://www.youtube.com/watch?v=JML3BZo_ToA&list=PLQ0Y5YcHFmjVCFO7t1_72VU2FiXo5XaEI&index=1

$(document).ready(function(){ 
 
\t "use strict"; 
 

 
\t $("#uploadBtn").on("change", function(){ 
 
\t \t 
 
\t \t var files = $(this)[0].files; 
 
\t \t 
 
\t \t if(files.length >= 2){ 
 
\t \t \t 
 
\t \t \t $("#label_span").text(files.length + " files ready to upload"); 
 
\t \t \t 
 
\t \t } else { 
 
\t \t \t 
 
\t \t \t var filename = addEventListener.target.value.split('\\').pop(); 
 
\t \t \t $("#label_span").text(filename); 
 
\t \t } 
 
\t \t 
 
\t }); 
 
\t 
 
});

.uploadFile{ 
 
\t height: auto; 
 
\t padding: 30px; 
 
\t background-color: #E0DDDD; 
 
\t color: #797979; 
 
} 
 
#uploadBtn{ 
 
\t display: none; 
 
\t width: auto; 
 
} 
 
.uploadButtonLabel{ 
 
\t font-size:18px; 
 
\t padding: 10px 40px; 
 
\t border-style: none; 
 
\t margin-top: 10px; 
 
\t text-align: center; 
 
} 
 
.uploadButtonLabel:before{ 
 
\t font-family: fontAwesome; 
 
\t content: "\f093"; 
 
\t margin-right: 10px; 
 
} 
 
.uploadButtonLabel:hover{ 
 
\t cursor: pointer; 
 
}

<head> 
 
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script> 
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
</head> 
 

 
<div class="uploadFile"> 
 
\t <h2>Upload your documents...</h2> 
 
\t <p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p> 
 
\t <label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label> 
 
\t <input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple = "true" /> 
 
</div> 
 
<script src="bookCastingJS.js"></script>

出典

2017-08-30 Anonymous

？あなたがファイルの名前だけを望むなら、あなたはそれらを 'files'オブジェクトから引き出すことができます。 – axlj

私はチュートリアルに従っています。あなたの提案に対するコードの変更は何ですか？ありがとう。 –

。なぜあなたはにaddEventListenerを使用している

$(document).ready(function() { 
 
    "use strict"; 
 

 
    $("#uploadBtn").on("change", function() { 
 

 
    var files = $(this)[0].files; 
 
    if (!files) return; 
 

 
    if (files.length > 1) { 
 

 
     $("#label_span").text(files.length + " files ready to upload"); 
 

 
    } else { 
 

 
     var filename = files[0].name; 
 
     $("#label_span").text(filename); 
 
    } 
 

 
    }); 
 

 
});

.uploadFile { 
 
    height: auto; 
 
    padding: 30px; 
 
    background-color: #E0DDDD; 
 
    color: #797979; 
 
} 
 

 
#uploadBtn { 
 
    display: none; 
 
    width: auto; 
 
} 
 

 
.uploadButtonLabel { 
 
    font-size: 18px; 
 
    padding: 10px 40px; 
 
    border-style: none; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 

 
.uploadButtonLabel:before { 
 
    font-family: fontAwesome; 
 
    content: "\f093"; 
 
    margin-right: 10px; 
 
} 
 

 
.uploadButtonLabel:hover { 
 
    cursor: pointer; 
 
}

<head> 
 
    <script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script> 
 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
</head> 
 

 
<div class="uploadFile"> 
 
    <h2>Upload your documents...</h2> 
 
    <p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p> 
 
    <label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label> 
 
    <input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple="true" /> 
 
</div> 
 
<script src="bookCastingJS.js"></script>

出典

2017-08-30 20:31:53 axlj

パーフェクト、よろしく。 –

FFS、今はDWで動作しません。ここでは完璧に動作しますが、外部のJSシートには反応しません。私は一生のうちにそのような遅れたプログラムで働いたことはありません。 –

"入力ファイル"ボタンにアップロードされたファイルを表示できません

答えて

関連する問題