外包直接Ajax脚本

I have a little html page where I have a field which is for file upload and a input field which is filled by javascript ajax function on same page:

<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>

I want to move the script from my index.html to my script.js file but it doesn't work. I guess it has something to do with not knowing things like $(document) and so on. I am not a javascript expert and need a little help with this.