Le Drag & Drop de Téléchargement de Fichier
Donc je suis un peu en difficulté pour trouver ce que je cherche et comment la mettre en œuvre.
J'ai une base de PHP fichier uploader de travail, dans le sens que l'utilisateur appuie sur une coutume télécharger bouton, sélectionner un fichier, puis en utilisant JS, il vérifie un changement (Ie. l'utilisateur de sélectionner un fichier), puis soumet le formulaire d'upload de l'image fine.
Ce que je veux maintenant, c'est un drag & drop pour télécharger de la zone. De sorte que l'utilisateur peut faire glisser une image à partir de leur explorateur de fichiers et les déposer dans un lieu désigné (pas la page entière) et puis une fois que l'image a été abandonnée pour le formulaire pour soumettre automatiquement avec leur image et utiliser la même PHP de traitement.
Est-ce possible et est-il réaliste?
OriginalL'auteur Tenatious | 2013-02-12
Vous devez vous connecter pour publier un commentaire.
C'est tout à fait réaliste et possible sans l'aide de tout tiers plugin.
Les extraits suivants devraient vous donner une idée de comment cela pourrait fonctionner:
Zone de dépôt de
la processFileUpload()-Méthode:
exemple de formulaire
N'hésitez pas à utiliser quelque chose comme ceci comme un point de départ. La prise en charge du navigateur de ce que vous pouvez trouver ici http://caniuse.com/#feat=xhr2
Bien sûr, vous pouvez ajouter tous les extras que vous voulez, comme la barre de progression, aperçu, de l'animation...
if(droppedFiles.length > 0) { for(f = 0; f < fileCount; f++) { uploadFormData.append("files[]",droppedFiles[f]); } }
que je suis assez nouveau dans tout cela!J'ai ajouté quelques commentaires. Mais c'est normal pour une boucle qui ajoute les fichiers déposés à la forme.
Vous êtes les bienvenus. Lorsque la base est prête, vous pouvez commencer à faire des choses de fantaisie avec cela 😉
Gardez à l'esprit depuis le code ci-dessus .bind (), vous devrez appeler le javascript après que l'élément a été créé (comme dans votre pied de page). Voir jQuery .bind() pour plus d'informations. Une autre option serait d'ajouter un
$(document).ready( function(){ // code });
gestionnaire. En évitant le script à charger après que l'élément a été créé.Une remarque plus. Vous aurez besoin de
preventDefault()
etstopPropogation()
la dragover, dragleave et lapreventDefault()
sur la baisse de l'événement. Cela permet de garder le navigateur de charger les fichiers en local dans le navigateur de windows.OriginalL'auteur wildhaber
S'il vous plaît vérifier ce plugin jQuery! Avec Ajax upload de fichier et plus: http://blueimp.github.com/jQuery-File-Upload/
vous aurez certainement besoin de quelque chose comme cela, comme un transfert de fichiers via ajax n'est pas possible sans aide.par exemple jqueryform.js malsup.com/jquery/form a également un ajaxForm pour le téléchargement sur le vol, très facile à utiliser malsup.com/jquery/form/#ajaxForm
Tellement confus quant à où commencer xD
Copie plugin > Coller plugin > Modifier index.html
OriginalL'auteur Niels