Transférer le nom de fichier du téléchargement de fichier vers le champ de texte

J'ai une partie d'un formulaire où l'utilisateur peut télécharger un fichier. Je ne veux que le nom du fichier à envoyer à un champ de texte dans la même forme. Donc, si l'utilisateur a téléchargé "C:/Folder/image.jpg" le champ de texte doit afficher "image.jpg". J'ai essayé un peu de code moi-même, mais je sais que c'est faux:

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 est le champ d'upload de fichier, et le nom de fichier est le champ où le nom doit apparaître. Toute aide est très appréciée! Merci.

source d'informationauteur Fusionice

  1. 29

    Voici une façon de le faire

    HTML:

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

    javascript:

    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;
}

    vous ne mentionnez pas jQuery mais compte tenu de sa popularité, voici la même solution à l'aide de jQuery

    jQuery:

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

    Démo:

    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

    Une façon plus simple en jQuery serait le suivant:

    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);
});

    Dans cet exemple, la valeur par défaut de téléchargement de fichier est caché, de sorte que vous pouvez le style de l 'télécharger le fichier d'entrée" comme souhaité. En cliquant sur le bouton déclencheur de l'original (caché) de téléchargement de fichiers. Après avoir choisi le fichier de la .onchange() fera le reste du travail, de la copie du fichier "lecture seule saisie de texte".