JavaScript supprimer le fichier de la liste des fichiers à télécharger
il y a le code https://jsfiddle.net/bfzmm1hc/1 tout a l'air bien mais je veux supprimer certains des fichiers de l'ensemble.
j'ai déjà trouvé ceci:
- Comment supprimer un fichier sélectionné spécifique du contrôle des fichiers d'entrée
- type d'entrée = multiple de fichier, supprimer les éléments
je sais cet objet FileList
est en lecture seule, donc je peux simplement copier les fichiers dans un nouveau tableau. Mais que dois-je faire avec ce nouveau tableau d'objets File
? Je ne peux pas l'affecter à la propriété files
...
2 réponses
comme vous ne pouvez pas éditer L'attribut Read Only input.files
, vous devez télécharger un formulaire en utilisant XMLHttpRequest
et envoyer un FormData
objet . Je vais aussi vous montrer comment utiliser URL.createObjectURL
pour obtenir plus facilement un URI de l'objet File
:
var SomeCl = {
count: 0,
init: function() {
$('#images').change(this.onInputChange);
},
onInputChange: function() {
// reset preview
$('.container').empty();
// reset count
SomeCl.count = 0;
// process files
SomeCl.processFiles(this.files, function(files) {
// filtered files
console.log(files);
// uncomment this line to upload the filtered files
SomeCl.upload('url', 'POST', $('#upload').get(0), files, 'images[]');
});
},
processFiles: function(files, callback) {
// your filter logic goes here, this is just example
// filtered files
var upload = [];
// limit to first 4 image files
Array.prototype.forEach.call(files, function(file) {
if (file.type.slice(0, 5) === 'image' && upload.length < 4) {
// add file to filter
upload.push(file);
// increment count
SomeCl.count++;
// show preview
SomeCl.preview(file);
}
});
callback(upload);
},
upload: function(method, url, form, files, filename) {
// create a FormData object from the form
var fd = new FormData(form);
// delete the files in the <form> from the FormData
fd.delete(filename);
// add the filtered files instead
fd.append(filename, files);
// demonstrate that the entire form has been attached
for (var key of fd.keys()) {
console.log(key, fd.getAll(key));
}
// use xhr request
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.addEventListener('progress', function(e) {
console.log('lengthComputable', e.lengthComputable);
console.log(e.loaded + '/' + e.total);
});
xhr.addEventListener('load', function(e) {
console.log('uploaded');
});
xhr.addEventListener('error', function(e) {
console.log('this is just a demo');
});
xhr.send(fd);
},
preview: function(file) {
// create a temporary URI from the File
var url = URL.createObjectURL(file);
// append a preview
$('.container').append($('<img/>').attr('src', url));
}
};
SomeCl.init();
.container img {
max-width: 250px;
max-height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="upload">
<input name="other" type="hidden" value="something else">
<input name="images[]" id="images" multiple="multiple" type="file">
<div class="container"></div>
</form>
j'ai trouvé une solution. Cela ne nécessitera pas D'AJAX pour la requête et le formulaire peut être envoyé au serveur. En gros, vous pouvez créer une entrée hidden
ou text
et définir l'attribut value
à la chaîne de caractères base64 créée après le traitement du fichier sélectionné.
<input type=hidden value=${base64string} />
vous envisagerez probablement l'idée de créer un fichier d'entrée multiple au lieu de text
ou hidden
. Cela ne fonctionnera pas car nous ne pouvons pas attribuer une valeur .
Cette méthode va inclure le fichier d'entrée dans les données envoyées à la base de données et d'ignorer le fichier d'entrée, vous pouvez:
- dans la partie arrière, ne tenez pas compte du champ;
- vous pouvez définir l'attribut
disabled
au fichier d'entrée avant de sérialiser le formulaire; - supprimer L'élément DOM avant d'envoyer des données.
quand vous voulez supprimer un fichier juste obtenir l'indice de l'élément et de supprimer l'élément d'entrée (texte ou cachés) du DOM.
exigences:
- vous devez écrire la logique pour convertir les fichiers dans base64 et stocker tous les fichiers à l'intérieur d'un tableau chaque fois que le fichier d'entrée déclenche l'événement
change
.
Pour:
- beaucoup de contrôle et vous pouvez filtrer, comparer des fichiers, vérifier la taille des fichiers, type MIME, et ainsi de suite..