javascript - HTML コードで JavaScript 関数を使用する

Question

HTMLコードでJavaScript関数を使用したいと思います。

私の頭に浮かんだ唯一のことは、次のことです。

<script type="text/javascript" src="file.js"></script>
<input type="file" ... onchange="fileSelected();" />

それを行う他の方法はありますか？

Answer 1

これを行う通常の方法は、<input>anidを指定し、JavaScript でクリック ハンドラーをアタッチすることです。

<input type="file" id="file_picker" />

<script type="text/javascript">
    var file_picker = document.getElementById('file_picker');
    var file_picker_change = function() {
        // do some things
    }
    if (file_picker.addEventListener) {
        file_picker.addEventListener("change", file_picker_change, false);
    } else {
        file_picker.attachEvent('onchange', file_picker_change);
    }  
</script>

Answer 2

  <script src="code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="file.js"></script>
    <input type="file" id="myfile" />

        $('#myfile').change(function(){ 
    fileSelected(); 
    });

Answer 3

あなたはできる

1) ここに投稿した外部 JavaScript ファイルを追加します。

<script type="text/javascript" src="file.js"></script>

2）次を使用して、ドキュメント内にスクリプトパーツを追加できます。

<script language="javascript"> your script here </script>

3）2番目の例のようにスクリプトコードをインラインで追加できます

<input type="file" ... onchange="fileSelected();" />

Answer 4

これを行う別の方法があります。この JavaScript が、DOM がロードされて解析された後であることを確認してください。

HTML

<input type="file" id="fileinput" />

JavaScript

var objInput = document.getElementById("fileinput");

objInput.setAttribute("onchange", fileSelected);