javascript 自定义上传文件按钮和输入

Posted 2021-05-04

<form>  

  <!-- Some form inputs... -->
  
  <!-- Upload file -->
  <label for="resume" class="btn btn-light-green upload-button">
      Upload Resume <input type="file" id="resume" name="resume">
  </label>
  <div id="filename">
      <span>Filename</span>
  </div>
  
</form>

$(function() {
     
    // We can attach the `fileselect` event to all file inputs on the page
    $(document).on('change', ':file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
    });

    // We can watch for our custom `fileselect` event like this
    $(document).ready( function() {
        $(':file').on('fileselect', function(event, numFiles, label) {

            var input = $(this).parents('.input-group').find(':text'),
                log = numFiles > 1 ? numFiles + ' files selected' : label;

            if( input.length ) {
                input.val(log);
            } else {
                if(log){
                    // alert(log);
                    $('#filename span').text(log);
                } 
            }

        });
    });
    
});