javascript - type - js get file from input file




input type=file mostra solo il pulsante (20)

È possibile etichettare un'immagine in modo che quando si fa clic su di esso verrà attivato l'evento click del pulsante. Puoi semplicemente rendere invisibile il normale pulsante:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

Ha funzionato per me su tutti i browser ed è molto facile da usare.

C'è un modo di stile (o script) <input type=file /> elemento per avere solo il pulsante "Sfoglia" visibile senza campo di testo?

Grazie

Modifica : solo per chiarire perché ho bisogno di questo. Sto usando il codice di caricamento di file multipli da http://www.morningz.com/?p=5 e non ha bisogno del campo di testo di input perché non ha mai valore. Lo script aggiunge solo il file appena selezionato alla raccolta sulla pagina. Sembrerebbe molto meglio senza campo di testo, se è possibile.


È possibile inviare l'evento click su un input di file nascosto come questo:

<form action="#type your action here" method="POST" enctype="multipart/form-data">
   		<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
    	<!-- hide input[type=file]!-->
    	<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    	<input type="submit" value='submit' >
    </form>

    <script type="text/javascript">
    	var btn = document.getElementById("yourBtn");
    	var upfile = document.getElementById("upfile"); 
    	btn.addEventListener('click',function(){
    		if(document.createEvent){
    			var ev = document.createEvent('MouseEvents');
    			ev.initEvent('click',true,false);
    			upfile.dispatchEvent(ev);
    		}else{
        		upfile.click();
    		}
    	});
    
    </script>


Ecco il mio buon vecchio rimedio:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

Almeno ha funzionato in Safari.

Chiaro e semplice.


Ecco una versione semplificata della famosa soluzione di @ampersandre che funziona in tutti i principali browser. Marcatura Asp.NET

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

Codice JQuery

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

codice css

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Utilizza un trigger di clic nascosto "UploadButton" per il postback del server con standard. Il testo "Upload File" spinge il controllo di input fuori dalla vista nel wrapper div quando si trabocca, quindi non è necessario applicare alcuno stile per il div di controllo "file input". Il selettore $ ([id $ = "FileInput"]) consente la sezione di ID con prefissi ASP.NET standard applicati. Il valore della casella di testo FilePath nel set dal codice del server dietro a hdnFileName.Value una volta che il file è stato caricato.


Ho scritto questo:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>

    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
    </div>
    
</form>

<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

Funziona bene con tutti i browser, senza jQuery, senza CSS.


Ho semplicemente disegnato un file di input con larghezza: 85 px e il campo di testo è scomparso del tutto


Ho una soluzione davvero hacky con questo ...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

<input id="File1" type="file" />

Il problema è che l'attributo width che nasconde il campo di testo varierà ovvie tra i browser, varierà tra i temi di Windows XP e così via. Forse è qualcosa su cui puoi lavorare? ...


Ho usato un po 'del codice consigliato sopra e dopo molte ore di attesa del mio tempo, alla fine sono arrivato a una soluzione gratuita di css bag.

Puoi eseguirlo qui - http://jsfiddle.net/WqGph/

ma poi ha trovato una soluzione migliore - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

Nascondere il tag del file di input con css, aggiungere un'etichetta e assegnarlo al pulsante di input. l'etichetta sarà cliccabile e, quando viene cliccato, aprirà la finestra di dialogo del file.

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Aggiungi lo stile all'etichetta come un pulsante.
Dimostrazione dal vivo


Nascondi l'elemento del file di input e crea un pulsante visibile che attiverà l'evento click di quel file di input.

Prova questo:

CSS

#file { width:0; height:0; } 

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

Javascript (jQuery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

Questo codice HTML mostra solo il pulsante Carica file

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>

Questo funziona per me:

input[type="file"]  {
    color: white!important;
}

Risolto con il seguente codice:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>


Risolto il problema di funzionare in tutti i browser RISOLTO:

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

Ho testato su FF, Chrome e IE - lavorando bene, anche con stili applicati: D


So che questo è un vecchio post, ma un modo semplice per far scomparire il testo è solo per impostare il colore del testo su quello del tuo background.

ad esempio se lo sfondo del testo inserito è bianco, allora:

input[type="file"]{
color:#fff;
}

Ciò non influirà sul testo Scegli file che sarà ancora nero a causa del browser.


Stavo passando un pò di tempo cercando di realizzare questo. Non volevo utilizzare una soluzione Flash e nessuna delle librerie jQuery che ho guardato era affidabile su tutti i browser.

Ho trovato la mia soluzione, che è implementata completamente in CSS (ad eccezione della modifica dello stile onclick per far apparire il pulsante "cliccato").

Puoi provare un esempio di lavoro qui: http://jsfiddle.net/VQJ9V/307/ (Testato in FF 7, IE 9, Safari 5, Opera 11 e Chrome 14)

Funziona creando un grande file input (con font-size: 50px), quindi avvolgendolo in un div che ha una dimensione fissa e un overflow: nascosto. L'input è quindi visibile solo attraverso questo div "window". Il div può avere un'immagine o un colore di sfondo, il testo può essere aggiunto e l'input può essere reso trasparente per rivelare lo sfondo div:

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Fammi sapere se ci sono problemi con esso e proverò a risolverli.


Un altro modo semplice per farlo. Crea un tag "input type file" in html e nascondilo. Quindi fare clic su un pulsante e formattarlo in base alle necessità. Dopo questo uso javascript / jquery per fare clic programmaticamente sul tag di input quando si fa clic sul pulsante.

HTML: -

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Ecco un violino JS funzionante per lo stesso: - http://jsfiddle.net/32na3/


la mia soluzione è solo quella di impostarlo all'interno di un div come "druveen" ha detto, tuttavia aggiungo il mio stile di tasto al div (rendilo simile a un pulsante con un: hover) e ho appena impostato lo stile "opacity: 0;" all'input. Funziona per me un fascino, spero che faccia lo stesso per te.


<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0');

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Questo funzionerà sicuramente l'ho usato nei miei progetti. Spero che questo aiuti :)





css