이 파일 업로드 버튼을 어떻게 편집합니까?

Question

Wordpress 테마를 사용하고 있습니다. 실제로 Wordpress의 WooCommerce 테마입니다 ... 어쨌든, 파일 업로드 버튼 옆에 "No file selected"텍스트를 숨기고 싶습니다. 나는 일반적으로이 다음 코드와 함께 할 수 있다는 것을 알고 :

input[type=file].hidden { 
    color: transparent; 
} 

하지만, 난 내 같은 이름의 입력을 본 적이 없어, 그래서 내가 할 위의 코드를 수정해야하는지 확실하지 않다 일. 이 파일 업로드 입력에 대한 코드입니다

<input type='hidden' name='MAX_FILE_SIZE' value='8388608' /> 
<input name='input_14' id='input_2_14' type='file' class='medium' tabindex='4' /> 

Answer 1

예 당신은 CSS & jQuery를 사용하여 파일 업로드의 UI를 사용자 정의 할 수 있습니다,이 :::

HTML처럼

<h1>Custom File Upload <span>With jQuery and CSS</span></h1> 

<div class="custom-file-upload"> 
    <!--<label for="file">File: </label>--> 
    <input type="file" id="file" name="myfiles[]" multiple /> 
</div> 

CSS @import url ("http://fonts.googleapis.com/css?family=Lato");

$background: #e74c3c; 
$file-upload-color: #c0392b; 
$file-upload-size: 300px; 

* { 
    margin: 0; 
    padding: 0; 
    @include box-sizing(border-box); 
} 
body { 
    font-family: Lato, Arial; 
    color: #fff; 
    padding: 55px 25px; 
    background-color: $background; 
} 
h1 { 
    font-weight: normal; 
    font-size: 40px; 
    font-weight: normal; 
    text-transform: uppercase; 
    span { 
     font-size: 13px; 
     display: block; 
     padding-left: 4px; 
    } 
} 
p { 
    margin-top: 200px; 
    a { 
    text-transform: uppercase; 
    text-decoration: none; 
    display: inline-block; 
    color: #fff; 
    padding: 5px 10px; 
    margin: 0 5px; 
    background-color: darken($file-upload-color, 2); 
    @include transition(all 0.2s ease-in); 
    &:hover { 
     background-color: darken($file-upload-color, 5); 
    } 
    } 
} 
.custom-file-upload-hidden { 
    display: none; 
    visibility: hidden; 
    position: absolute; 
    left: -9999px; 
} 
.custom-file-upload { 
    display: block; 
    width: auto; 
    font-size: 16px; 
    margin-top: 30px; 
    //border: 1px solid #ccc; 
    label { 
     display: block; 
     margin-bottom: 5px; 
    } 
} 

.file-upload-wrapper { 
    position: relative; 
    margin-bottom: 5px; 
    //border: 1px solid #ccc; 
} 
.file-upload-input { 
    width: $file-upload-size; 
    color: #fff; 
    font-size: 16px; 
    padding: 11px 17px; 
    border: none; 
    background-color: $file-upload-color; 
    @include transition(all 0.2s ease-in); 
    float: left; /* IE 9 Fix */ 
    &:hover, &:focus { 
     background-color: darken($file-upload-color, 5); 
     outline: none; 
    } 
} 
.file-upload-button { 
    cursor: pointer; 
    display: inline-block; 
    color: #fff; 
    font-size: 16px; 
    text-transform: uppercase; 
    padding: 11px 20px; 
    border: none; 
    margin-left: -1px; 
    background-color: darken($file-upload-color, 10); 
    float: left; /* IE 9 Fix */ 
    @include transition(all 0.2s ease-in); 
    &:hover { 
     background-color: darken($file-upload-color, 20); 
    } 
} 

JS

//Reference: 
    //http://www.creativesinfotech.com/ 
    ;(function($) { 

      // Browser supports HTML5 multiple file? 
      var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined', 
       isIE = /msie/i.test(navigator.userAgent); 

      $.fn.customFile = function() { 

      return this.each(function() { 

       var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input 
        $wrap = $('<div class="file-upload-wrapper">'), 
        $input = $('<input type="text" class="file-upload-input" />'), 
        // Button that will be used in non-IE browsers 
        $button = $('<button type="button" class="file-upload-button">Select a File</button>'), 
        // Hack for IE 
        $label = $('<label class="file-upload-button" for="'+ $file[0].id +'">Select a File</label>'); 

       // Hide by shifting to the left so we 
       // can still trigger events 
       $file.css({ 
       position: 'absolute', 
       left: '-9999px' 
       }); 

       $wrap.insertAfter($file) 
       .append($file, $input, (isIE ? $label : $button)); 

       // Prevent focus 
       $file.attr('tabIndex', -1); 
       $button.attr('tabIndex', -1); 

       $button.click(function() { 
       $file.focus().click(); // Open dialog 
       }); 

       $file.change(function() { 

       var files = [], fileArr, filename; 

       // If multiple is supported then extract 
       // all filenames from the file array 
       if (multipleSupport) { 
        fileArr = $file[0].files; 
        for (var i = 0, len = fileArr.length; i < len; i++) { 
        files.push(fileArr[i].name); 
        } 
        filename = files.join(', '); 

       // If not supported then just take the value 
       // and remove the path to just show the filename 
       } else { 
        filename = $file.val().split('\\').pop(); 
       } 

       $input.val(filename) // Set the value 
        .attr('title', filename) // Show filename in title tootlip 
        .focus(); // Regain focus 

       }); 

       $input.on({ 
       blur: function() { $file.trigger('blur'); }, 
       keydown: function(e) { 
        if (e.which === 13) { // Enter 
        if (!isIE) { $file.trigger('click'); } 
        } else if (e.which === 8 || e.which === 46) { // Backspace & Del 
        // On some browsers the value is read-only 
        // with this trick we remove the old input and add 
        // a clean clone with all the original events attached 
        $file.replaceWith($file = $file.clone(true)); 
        $file.trigger('change'); 
        $input.val(''); 
        } else if (e.which === 9){ // TAB 
        return; 
        } else { // All other keys 
        return false; 
        } 
       } 
       }); 

      }); 

      }; 

      // Old browser fallback 
      if (!multipleSupport) { 
      $(document).on('change', 'input.customfile', function() { 

       var $this = $(this), 
        // Create a unique ID so we 
        // can attach the label to the input 
        uniqId = 'customfile_'+ (new Date()).getTime(), 
        $wrap = $this.parent(), 

        // Filter empty input 
        $inputs = $wrap.siblings().find('.file-upload-input') 
        .filter(function(){ return !this.value }), 

        $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>'); 

       // 1ms timeout so it runs after all other events 
       // that modify the value have triggered 
       setTimeout(function() { 
       // Add a new input 
       if ($this.val()) { 
        // Check for empty fields to prevent 
        // creating new inputs when changing files 
        if (!$inputs.length) { 
        $wrap.after($file); 
        $file.customFile(); 
        } 
       // Remove and reorganize inputs 
       } else { 
        $inputs.parent().remove(); 
        // Move the input so it's always last on the list 
        $wrap.appendTo($wrap.parent()); 
        $wrap.find('input').focus(); 
       } 
       }, 1); 

      }); 
      } 

}(jQuery)); 

$('input[type=file]').customFile(); 

Answer 2

신경 끄시 고, 내가 그것을 얻었다. 수업을 숨김에서 중간으로 변경해야했습니다.

input[type=file].medium { 
    color: transparent; 
}