Passare il file da caricare file di testo campo

Ho un form in cui un utente può caricare un file. Voglio solo il nome del file deve essere inviato a un campo di testo nel modulo stesso. Quindi, se l’utente ha caricato “C:/Folder/image.jpg” il campo di testo deve mostrare “image.jpg”. Ho provato un po ‘ di codice di me stesso, ma so che è sbagliato:

function ff_uploadimages_action(element, action)
{var m = data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/);
switch (action) {
case 'change':
if (data.match(/((*):\/)/(.*)[\/\\]([^\/\\]+\.\w+)$/).value)
ff_getElementByName('filename').value = m[2].text;
        default:;
    } //switch
} //ff_uploadimages_action

ff_uploadimages è il campo per caricare il file e il nome del file è il textfield cui nome dovrebbe apparire. Qualsiasi aiuto è gradito! Grazie.

  • risultati contrastanti con il file di input è value come il nome del file, IE 8 e Chrome dare “C:\fakepath\” + nome del file in cui come FF dà solo nome di file
InformationsquelleAutor Fusionice | 2011-03-30



3 Replies
  1. 30

    Ecco un modo per farlo

    JS:

    document.getElementById('upload').onchange = uploadOnChange;
    
    function uploadOnChange() {
      var filename = this.value;
      var lastIndex = filename.lastIndexOf("\\");
      if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
      }
      document.getElementById('filename').value = filename;
    }

    HTML:

    <input id="upload" type="file" />
    <input id="filename" type="text" />


    non parlare di jQuery, ma dato che è la popolarità ecco la stessa soluzione che utilizza jQuery

    jQuery:

    $('#upload').change(function() {
        var filename = $(this).val();
        var lastIndex = filename.lastIndexOf("\\");
        if (lastIndex >= 0) {
            filename = filename.substring(lastIndex + 1);
        }
        $('#filename').val(filename);
    });

    Demo:

    http://jsfiddle.net/pxfunc/WWNnV/4/

  2. 0

    HTML:

    <input id="upload" type="file" onChange="uploadOnChange(this)" />
    <input id="filename" type="text" />

    JS:

    function uploadOnChange(e) {
        var filename = e.value;var lastIndex = filename.lastIndexOf("\\");
        if (lastIndex >= 0) {
            filename = filename.substring(lastIndex +1);
        }
        document.getElementById('filename').value = filename;
    }
  3. 0

    Una strada più breve in jQuery sarebbe il seguente:

    HTML

    <input type="file" id="inputFile" class="hidden"/>
    <input type="text" id="inputDisplayFileName" readonly/>
    <button id="buttonChooseFile">Choose file</button>

    jQuery

    $("#buttonChooseFile").click(funtion()({
        $("#inputFile").click();        
    });
    
    $("#inputFile").change(function(){
        var fileName = $("#inputFile").prop('files')[0]["name"];
    
        $("inputDisplayFileName").val(fileName);
    });

    In questo esempio il valore predefinito di caricamento del file è nascosto, in modo che è possibile lo stile l’upload di file di input’ come desiderato. Cliccando sul pulsante si attiverà l’originale (nascosto) caricamento di un file. Dopo aver scelto il file, il .onchange() farà il resto del lavoro, copia il file di “sola lettura di testo di input’.

Lascia un commento