Boîte de dialogue Ouvrir un fichier en JavaScript
J'ai besoin d'une solution pour afficher le dialogue de fichier ouvert en HTML tout en cliquant sur une variable div. La boîte de dialogue d'ouverture de fichier doit s'ouvrir lorsque l'utilisateur clique sur div.
Je ne veux pas afficher la boîte de fichier d'entrée dans la page HTML. Il doit être affiché dans une boîte de dialogue séparée, qui ne fait pas partie de la page Web.
En voici une belle
C'est un contrôle <input type='file' /> lui-même. Mais un div est placé dessus et les styles css sont appliqués pour obtenir cette sensation. L'opacité du contrôle de fichier est définie sur 0; il apparaît donc que la fenêtre de dialogue s'ouvre lorsque vous cliquez sur le div.
$("#logo").css('opacity','0');
$("#select_logo").click(function(e){
e.preventDefault();
$("#logo").trigger('click');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">pour IE ajoutez ceci:
$("#logo").css('filter','alpha(opacity = 0');
Je ne sais pas pourquoi personne ne l'a signalé, mais voici une façon de le faire sans Javascript et compatible avec tous les navigateurs.
EDIT: Dans Safari, la input est désactivée lorsqu'elle est masquée avec display: none. Une meilleure approche consisterait à utiliser position: fixed; top: -100em.
<label>
Open file dialog
<input type="file" style="position: fixed; top: -100em">
</label>
Si vous préférez, vous pouvez utiliser le " voie correcte" en utilisant for dans la label en pointant sur la id de l'entrée comme ceci:
<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">
En fait, vous n'avez pas besoin de tout cela avec opacité, visibilité, style <input>, etc. Jetez un coup d'œil:
<a href="#">Just click me.</a>
<script type="text/javascript">
$("a").click(function() {
// creating input on-the-fly
var input = $(document.createElement("input"));
input.attr("type", "file");
// add onchange handler if you wish to get the file :)
input.trigger("click"); // opening dialog
return false; // avoiding navigation
});
</script>
Démo sur jsFiddle . Testé dans Chrome 30.0 et Firefox 24.0. Cela n'a pas fonctionné dans Opera 12.16, cependant.
C'est ce qui a fonctionné le mieux pour moi (testé sur IE8, FF, Chrome, Safari).
#file-input {
cursor: pointer;
outline: none;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
filter: alpha(opacity=0); /* IE < 9 */
opacity: 0;
}
.input-label {
cursor: pointer;
position: relative;
display: inline-block;
}<label for="file-input" class="input-label">
Click Me <!-- Replace with whatever text or icon you wish to use -->
<input type="file" id="file-input">
</label> Explication: J'ai placé l'entrée de fichier directement au-dessus de l'élément à cliquer, de sorte que tout clic clique sur celui-ci ou sur son étiquette (qui ouvre la boîte de dialogue de téléchargement comme si vous aviez cliqué sur l'étiquette elle-même). J'ai eu quelques problèmes avec la partie du bouton de l'entrée par défaut collant sur le côté de l'étiquette, donc overflow: hidden sur l'entrée et display: inline-block sur l'étiquette étaient nécessaires.
Que se passe-t-il si javascript est désactivé sur la machine des clients? Utilisez la solution suivante pour tous les scénarios. Vous n'avez même pas besoin de javascript/jQuery. :
HTML
<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>
CSS
#fileInput{opacity:0}
body{
background:cadetblue;
}
Explication: for="Your input Id". Les déclencheurs cliquent événement par défaut en HTML. Donc, par défaut, il déclenche un événement clic, pas besoin de jQuery/javascript. Si c'est simplement fait en HTML, pourquoi utiliser jQuery/jScript? Et vous ne pouvez pas savoir si le client est désactivé JS. Votre fonctionnalité devrait fonctionner même si JS est désactivé.
Travailler jsFiddle (Vous n'avez pas besoin de JS, jquery)
Commencez par ajouter les balises head:
<script>
function showDialog(openFileDialog) {
document.getElementById(openFileDialog).click();
}
function fileName(openFileDialog) {
return document.getElementById(openFileDialog).value;
}
function hasFile(openFileDialog) {
return document.getElementById(openFileDialog).value != "";
}
function fileNameWithoutFakePath(openFileDialog) {
var fileName = document.getElementById(openFileDialog).value;
return fileName.substr(fileName.lastIndexOf('\\') + 1);
}
function fakePathWithoutFileName(openFileDialog) {
var fileName = document.getElementById(openFileDialog).value;
return fileName.substr(0, fileName.lastIndexOf('\\'));
}
</script>
si vous avez déjà des balises script, ajoutez simplement ces fonctions ci-dessus.
Dans vos balises body ou form, ajoutez:
<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>
N'importe où dans votre HTML, est juste comme cela vous avez créé une nouvelle instance de type classe OpenFileDialog en tant que variable global, dont le nom est le id de l'élément, peu importe où dans votre code ou xaml, mais dans votre script ou votre code, vous ne pouvez pas taper son nom, puis lire une propriété ou appeler une fonction, car certaines fonctions globales font celles qui ne le sont pas défini dans l'élément input type = "file". Vous devez simplement donner à ces fonctions l'identifiant de l'entrée masquée type = "fichier", qui correspond au nom de l'instance OpenFileDialog sous forme de chaîne.
Pour faciliter votre vie en créant des instances de dialogues de fichiers ouverts dans votre code HTML, vous pouvez créer une fonction qui le fait:
function createAndAddNewOpenFileDialog(name) {
document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}
et si vous souhaitez supprimer le dialogue de fichier ouvert, vous pouvez créer et utiliser la fonction suivante:
function removeOpenFileDialog(name) {
var html = document.getElementById("yourBodyOrFormId").innerHtml;
html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
document.getElementById("yourBodyOrFormId").innerHtml = html;
}
mais avant de supprimer le dialogue de fichier ouvert, assurez-vous qu'il existe en créant et en utilisant la fonction suivante:
function doesOpenFileDialogExist(name) {
return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}
et si vous ne voulez pas créer et ajouter les boîtes de dialogue de fichier ouvertes dans les balises body ou form du code HTML, car cela ajoute un type d'entrée masqué = "fichier", vous pouvez le faire. en script en utilisant la fonction de création ci-dessus:
function yourBodyOrFormId_onload() {
createAndAddNewOpenFileDialog("openFileDialog1");
createAndAddNewOpenFileDialog("openFileDialog2");
createAndAddNewOpenFileDialog("openFileDialog3");
createAndAddNewOpenFileDialog("File Upload");
createAndAddNewOpenFileDialog("Image Upload");
createAndAddNewOpenFileDialog("bla");
//etc and rest of your code
}
Assurez-vous que près de votre corps ou de vos balises de formulaire, vous avez ajouté:
onload="yourBodyOrFormId_onload()"
Vous n'êtes pas obligé de faire cette ligne ci-dessus, si vous l'avez déjà fait.
CONSEIL: Vous pouvez ajouter à votre projet ou site Web un nouveau fichier JScript, si vous n'en avez pas encore, et dans ce fichier, vous pouvez placer toutes les fonctions de dialogue de fichier ouvert à l'écart des balises script et HTML ou une page de formulaire Web, et utilisez-les dans votre page HTML ou de formulaire Web à partir de ce fichier JScript, mais n'oubliez pas avant de lier la page HTML ou de formulaire Web au fichier JScript, bien sûr. Vous pouvez le faire simplement en faisant glisser le fichier JScript vers votre page html dans les balises head. Si votre page est un formulaire Web et pas un simple fichier html et que vous n'avez pas de balises head, placez-la n'importe où pour qu'elle puisse fonctionner . N'oubliez pas de définir une variable globale dans ce fichier JScript, dont la valeur sera votre identifiant de corps ou de formulaire sous forme de chaîne. Une fois que vous avez lié le fichier JScript à votre page HTML ou à un formulaire Web, vous pouvez charger l’événement de votre corps de formulaire, définissez la valeur de cette variable sur votre corps ou votre identificateur de formulaire. Ensuite, dans le fichier JScript, vous n'avez plus besoin de donner au document l'id du corps ou du formulaire d'une page, mais simplement la valeur de cette variable. Vous pouvez appeler cette variable bodyId ou formId ou bodyOrFormId ou tout autre nom de votre choix.
Bonne chance, mec!
Peut-être que cela pourrait vous intéresser: http://code.google.com/p/upload-at-click/
Cliquez sur l'élément pour ouvrir la boîte de dialogue 'Ouvrir le fichier' et
exécuter une fonction personnalisée.
Autant que je sache, vous avez toujours besoin d'un élément <input type="file">, vous pouvez alors utiliser certains éléments de quirksmode pour les styliser
Le seul sans <input type="file"> consiste à incorporer une animation flash transparente sur la div. Vous pouvez ensuite utiliser un événement de clic généré par l'utilisateur (conforme aux nouvelles règles de sécurité de Flash 10) pour déclencher un appel à Flash FileReference.browse .
Il offre une dépendance supplémentaire par rapport à la méthode quirksmode mais en retour, vous obtenez beaucoup plus d'événements (tels que des événements de progression intégrés).
Le moyen le plus simple:
#fileInput {
display: none;
}<label for="fileInput">
<div>Click this div and select a file</div>
</label>
<input type="file" id="fileInput"/>Ce qui est important, l’utilisation de display: none permet d’assurer qu’aucune place ne sera occupée par une entrée de fichier cachée (que se passe-t-il avec opacity: 0).
Peut utiliser
$('<input type="file" />').click()