Comment ajouter une entrée de texte au téléchargement de dropzone
J'aimerais permettre aux utilisateurs de soumettre un titre pour chaque fichier qui est traîné dans Dropzone qui sera saisi d'un texte d'entrée. Mais je ne sais pas comment l'ajouter. Tout le monde peut-il m'aider?
C'est mon code html code
<form id="my-awesome-dropzone" class="dropzone">
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
<!-- Now setup your input fields -->
<input type="email" name="username" id="username" />
<input type="password" name="password" id="password" />
<button type="submit">Submit data and files!</button>
</form>
Et c'est mon code de script
<script>
Dropzone.options.myAwesomeDropzone = { //The camelized version of the ID of the form element
//The configuration we've talked about above
url: "upload.php",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
maxFilesize:10,//MB
//The setting up of the dropzone
init: function() {
var myDropzone = this;
//First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
//Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
//Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
//of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
//Gets triggered when the form is actually being sent.
//Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
//Gets triggered when the files have successfully been sent.
//Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
//Gets triggered when there was an error sending the files.
//Maybe show form again, and notify user of error
});
},
accept: function (file, done) {
//maybe do something here for showing a dialog or adding the fields to the preview?
},
addRemoveLinks: true
}
</script>
source d'informationauteur Duc Manh Nguyen
Vous devez vous connecter pour publier un commentaire.
Vous pouvez réellement fournir un modèle pour la Dropzone de rendre l'aperçu de l'image ainsi que tous les autres champs. Dans votre cas, je vous suggère de prendre le modèle par défaut ou de faire votre propre, et simplement en ajoutant le champ de saisie:
Le plein d'aperçu par défaut du modèle peut être trouvé dans le code source de dropzone.js.
Ensuite, vous pouvez simplement passer votre modèle personnalisé pour Dropzone comme une chaîne de caractères pour la previewTemplate clé de l'option paramètres. Par exemple:
Aussi longtemps que votre élément est une forme, Dropzone sera automatiquement toutes les entrées dans les paramètres de la requête xhr.
Je suis en train de faire quelque chose d'assez similaire. J'ai accompli seulement par l'ajout d'une boîte de dialogue modale avec jquery qui s'ouvre lorsqu'un fichier est ajouté. Espérons que cela aide.
C'est un peu caché dans les docs, mais la place pour ajouter des données supplémentaires dans l ' "envoi" de l'événement. L'envoi est appelé juste avant chaque fichier est envoyé et devient l'objet xhr et le formData objets que les deuxième et troisième paramètres, de sorte que vous pouvez les modifier.
Donc, fondamentalement, vous aurez envie d'ajouter ces deux paramètres, puis ajouter des données supplémentaires à l'intérieur de "l'envoi" de la fonction ou dans votre cas "sendingmultiple". Vous pouvez utiliser jQuery ou tout simplement js pour obtenir les valeurs. Donc, il devrait ressembler à quelque chose comme:
Dans ma réponse, remplacement de votre champ "titre" mon champ "description".
Ajouter de la saisie de texte ou textarea pour le modèle d'aperçu. Par exemple:
Puis dans l'envoi de fonction, ajouter les données associées:
Enfin, dans le script de traitement qui ne le téléchargement, de recevoir les données à partir du POSTE:
Vous pouvez désormais stocker votre description (ou d'un titre ou qu'avez-vous) dans une Base de données etc.
Espérons que cela fonctionne pour vous. Il était un fils-de-a-pistolet à comprendre.
Pour ceux qui veulent garder l'automatique et d'envoyer des données (comme un ID ou quelque chose qui ne dépend pas de l'utilisateur), vous pouvez simplement ajouter un setTimeout "addedfile":
Bien que je trouve une solution pour moi et donc je vais l'écrire dans l'espoir qu'il pourrait aider d'autres personnes aussi. L'approche de base est d'avoir une nouvelle entrée dans le conteneur d'aperçu et de réglage via la classe css si le fichier de la réception de données par réussir le processus de téléchargement ou à l'initialisation à partir de fichiers existants.
Vous devez intégrer le code suivant dans votre.. j'ai juste sauté quelques lignes qui pourraient nécessaire pour le faire fonctionner.
Et il est mon modèle pour l'aperçu:
Voici ma solution:
yourUploader.php :