Suppression de fichiers à partir de plusieurs fichiers à uploader sur le bouton cliquez sur lors de l'utilisation de HTML5 fichier d'entrée
Comment ajouter supprimer bouton ici comme simple supprimer un par un dans les fichiers de la file d'attente comme ce
La raison pour laquelle je ne suis pas à l'aide de fichiers gratuit télécharger des plugins avec OOB bouchons parce que mes besoins du client est pour des raisons de sécurité et qu'ils ont besoin d'un simple upload de l'interface utilisateur sans aucun complexe plugins.
JS:
$(function() {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function(e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
inputFile.on('change', function(e) {
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0;
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
$('#filename').append('<span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + ' <span class="fa fa-times-circle fa-lg closeBtn" title="remove"></span><br>');
}
});
})
CSS:
#drop-zone {
width: 100%;
min-height: 150px;
border: 3px dashed rgba(0, 0, 0, .3);
border-radius: 5px;
font-family: Arial;
text-align: center;
position: relative;
font-size: 20px;
color: #7E7E7E;
}
#drop-zone input {
position: absolute;
cursor: pointer;
left: 0px;
top: 0px;
opacity: 0;
}
/*Important*/
#drop-zone.mouse-over {
border: 3px dashed rgba(0, 0, 0, .3);
color: #7E7E7E;
}
/*If you dont want the button*/
#clickHere {
display: inline-block;
cursor: pointer;
color: white;
font-size: 17px;
width: 150px;
border-radius: 4px;
background-color: #4679BD;
padding: 10px;
}
#clickHere:hover {
background-color: #376199;
}
#filename {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.5em;
}
.file-preview {
background: #ccc;
border: 5px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.closeBtn:hover {
color: red;
}
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
<p>Drop files here...</p>
<div id="clickHere">or click here.. <i class="fa fa-upload"></i>
<input type="file" name="file" id="file" multiple />
</div>
<div id='filename'></div>
</div>
Note: je n'ai pas propre le code que j'ai été réutilisés comme mes ressources d'autres personnes et l'a modifié pour mon client
**Mise à JOUR
Voici mon violon lien
- Voir stackoverflow.com/q/29841147 , stackoverflow.com/q/32002431
- La Duplication de stackoverflow.com/questions/3144419/...
- oh désolé, my bad, je n'avais pas remarqué avant que je le demande, je recherche d'abord, mais, encore une fois merci les gars pour le mentionner.
Vous devez vous connecter pour publier un commentaire.
La liste des fichiers du HTML5 entrée de fichier est en lecture seule, de sorte que lorsque vous essayez de supprimer un fichier à partir d'elle, vous ne serez pas autorisé.
Ce que vous devez faire est de maintenir un tableau séparé de la liste (tableau JSON comme pour l'exemple).
J'ai enveloppé votre bouton X avec un div qui détiennent le fichier index concaténé à un "file_" chaîne, et a ajouté une
onclick
fonctionremoveLine(obj)
qui accepte de l'élément comme un objet.J'ai également ajouté un tableau JSON
finalFiles
dans la portée globale ainsi que déplacé leinputFile
à la portée globale.Lorsque le fichier d'entrée change, je suis en train de le tableau JSON avec les fichiers sélectionnés à travers :
La fonction
removeLine
vider le fichier d'entrée de la liste pour permettre le même fichier sélection de nouveau si l'utilisateur a supprimé le fichier par erreur, la fonction obtient l'index des fichiers à partir de l'enveloppe de la division id, supprime le wrapper div puis supprime le fichier à partir du tableau JSON.Vous pouvez le conserver vos fichiers lorsque le formulaire de demande et les envoyer via AJAX post à l'aide de FormData une manière similaire à Cet Article.
JS:
CSS:
HTML:
#drop-zone input
par la grâce de nouveau.Ce que j'ai fait avant pour mon Dropzone. N'hésitez pas à ajuster. C'est à partir de mon application Laravel. Vous devriez vous concentrer sur
avatar_refresh_upload
. Couper inutile et vous avez terminé.Faire une longue histoire courte si vous souhaitez réinitialiser le fichier d'entrée après avoir sélectionné un fichier à télécharger, mais avant de le soumettre, vous devez exécuter:
Puisque nous ne pouvons pas modifier les fichiers sélectionnés de la matrice de dans la
<input type'file' multiple>
balise puis j'ai mis à jour, vous le code pour afficher le nombre de fichier et de supprimer tous les fichiers si plusieurs fichiers sont sélectionnés.Il y a un violon de la mise à jour du code.