Highlight-Bereich beim Hochladen von Datei

Question

Ich habe eine "Panel-Körper", wo ich eine CSV-Datei ablegen und einige Felder ausfüllen kann.

EJS-Datei:

<div class="panel-body"> 
    <div id="fileUpload">click to upload file</div> 
</div> 

js-Datei:

function theUploader() { 
    $('#fileUpload').fileReaderJS({ 
    dragClass: 'drag', 
    readAsDefault: 'Text', 
    on: { 
     load: theUpload 
    } 
    }); 
} 

Jetzt mag ich in der Lage sein, nicht nur eine Datei zu ziehen, sondern auf das click to upload file Feld klicken und das lokale Verzeichnis öffnen.

So habe ich versucht:

<div class="panel-body"> 
    <span class="btn btn-default btn-sm fileinput-button"> 
      <span>click to upload file</span> 
       <input id="fileUpload" type="file" name="files[]" data-url="/upload" multiple>  
      </span> 
</div> 

Nun, ich bin in der Lage das lokale Verzeichnis zu ziehen oder zu öffnen, aber:

1) Der Bereich, in dem click to upload file ist, wird nicht mehr hervorgehoben, wenn draging die Datei hinein.

2) Der obige Bereich ist in der Breite kleiner als zuvor (wahrscheinlich, weil nun mit der Taste fileinput Spannweite und erstellt einen Rahmen um die Worte click to upload file, die in der Ersteinrichtung nicht existieren, die nur die Drag Option)

Answer 1

Sie könnten einfach verstecken <input type="file"> und auf Drop-Bereich klicken Sie auf den Klick für diesen versteckten Eingang klicken.

HTML

<input type="file" /> 

<div class="panel-body"> 
    <div id="fileUpload">click to upload file</div> 
</div> 

CSS

input[type=file] { 
    display: block; 
    height: 0; 
    width: 0; 
} 

jQuery

$('#fileUpload').click(function() { 
    $('input[type=file]').trigger('click'); 
}); 

Voll Test hier https://jsfiddle.net/4n73ksxs/

bearbeiten

Hier ist voll Demo von FileReader.js mit geänderten Code wie Sie es brauchen https://jsfiddle.net/ju5h1n6t/

Sie können sehen, dass nur dieser Code am unteren Rand hinzugefügt wird:

$('input[type=file]').hide(); 
    $('#dropzone').click(function() { 
    $('input[type=file]').trigger('click'); 
    });