J'essaie de créer un bouton personnalisé pour un système, mais le navigateur me donne toujours des erreurs et quand ce n'est pas le cas, le bouton ne le fait pas fonctionner comme prévu. Je soupçonne que je n'utilise pas correctement les opérateurs d'échappement. Soit cela, soit mon environnement UNIX interfère avec le bon fonctionnement.
J'ai essayé cela de plusieurs manières et je garde à l'esprit que l'erreur est toujours la même: "Uncaught SyntaxError: Token non valide ou inattendu". P >
fileName = e.target.value.split ("\\"). pop (); Renvoie l'erreur. Cela devrait être le bon code car c'est ce que j'essaie de faire;
fileName = e.target.value.split ("\\\\"). Pop (); code> Ne lance pas d'erreur, mais donne au code source l'aspect fileName = e.target.value.split ("\\"). pop (); . Cela ne fonctionne pas comme prévu, car ce que je veux n'est qu'une barre oblique inverse "\".
Le code est le suivant:
var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function(input) {
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener('change', function(e) {
var fileName = '';
if (this.files && this.files.length > 1)
fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
else
fileName = e.target.value.split("\\").pop();
if (fileName)
label.querySelector('span').innerHTML = fileName;
else
label.innerHTML = fileName ? fileName : labelVal;
});
});
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
cursor: pointer;
}
.inputfile:focus + label,
.inputfile + label:hover {
background-color: red;
}
.inputfile:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
4 Réponses :
Essayez de changer en '\\\' sur certains systèmes, cela fonctionne.
fileName = e.target.value.split ("\\\"). pop (); fait ressembler le code source à fileName = e.target.value.split ("\") .pop (); mais renvoie toujours l'erreur. J'espérais vraiment que cela fonctionnerait.
Avez-vous regardé stackoverflow.com/questions/8618374/…
Je l'ai fait, mais aucune des réponses ou des commentaires ne m'a aidé. Mon JSFiddle fonctionne comme prévu, mais pas dans le code de production.
Ouais, je cherche ça aussi. Étrange bogue. Quatre des barres obliques devraient fonctionner.
Oui je suis d'accord. Mais d'une manière ou d'une autre, ce n'est pas le cas, et ça me rend fou.
Utilisez / au lieu de \ , car \ est généralement utilisé pour les caractères d'échappement ...
ou essayez d'utiliser \\\ c'est UNC (chemin d'accès réseau / nom de fichier)
remplacez \ par /
J'ai pu résoudre ce problème en déplaçant javascript hors de la portée de l'environnement unix et en réécrivant complètement la fonction, cette fois en utilisant des expressions régulières pour remplacer la chaîne du chemin du fichier:
function troca(){
var file = document.getElementById("file");
var nomeArq;
var fullPath = file.value;
if (fullPath) {
var startIndex = fullPath.indexOf('\\\\') >= 0 ? fullPath.lastIndexOf('\\\\') : fullPath.lastIndexOf('/');
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
nomeArq = filename;
} else {
nomeArq = 'image.jpg';
}
nomeArq = nomeArq.replace(/.*[\/\\]/, '');
var label = document.getElementById('label');
label.innerHTML = nomeArq;
}
<input type="file" name="file" id="file" class="inputfile" onchange='troca()' /> <label for="file" id='label'><span>Choose a file</span></label>
Ironiquement, JSFiddling cela ne fonctionne pas - cela jette "Uncaught ReferenceError: troca n'est pas défini dans HTMLInputElement.onchange". Mais bon, tant que cela fonctionne sur du code de production, non?
Merci pour l'aide de tous.
Vous devez utiliser "\ /" avec le système de fichiers UNIX.