Аутсорсинг прямой Ajax Script

Question

У меня есть небольшая html-страница, где у меня есть поле для загрузки файла и поле ввода, которое заполняется функцией javascript ajax на той же странице:

<div class="input-group>
 <label>
  <span>Select 
   <input type="file" name="file" style="display: none;">
  </span>
 </label>
 <input type="text" readonly>
</div>                  

<script>
    $(function() {

        $(document).on('change', ':file', function() 
        {
            var input = $(this),           
            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });

        $(document).ready( function() 
        {
            $(':file').on('fileselect', function(event, label) 
            {

                var input = $(this).parents('.input-group').find(':text'),
                log = label;

                if( input.length ) {
                    input.val(log);
                } else {
                    if( log ) alert(log);
                }

            });
        });

    });
</script>

Я хочу переместитьскрипт из моего index.html в мой файл script.js, но он не работает.Я предполагаю, что это как-то связано с незнанием таких вещей, как $ (документ) и так далее.Я не эксперт по javascript и мне нужна небольшая помощь в этом.