Comment puis-je supprimer un fichier de la liste de Fichiers

Question

Je suis en train de construire un glisser-déposer-à-téléchargement application web en utilisant HTML5, et je suis à la suppression de fichiers sur un div et bien sûr de l'extraction de l'objet dataTransfer, ce qui me donne la liste de Fichiers.

Maintenant, je veux supprimer certains fichiers, mais je ne sais pas comment, ou si c'est encore possible.

De préférence j'aimerais simplement les supprimer de la liste de Fichiers; je n'ai pas d'emploi pour eux. Mais si ce n'est pas possible, devrais-je plutôt écrire dans les contrôles dans le code qui interagit avec la liste de Fichiers? Qui semble lourd.

Answer 1

Si vous voulez seulement supprimer plusieurs fichiers sélectionnés: vous ne pouvez pas. Le Fichier API Projet de Travail lié à une note:

L' HTMLInputElementinterface [HTML5] a un readonly FileList attribut, [...]
[c'est moi qui souligne]

En lisant un peu le HTML 5, document de Travail, je suis tombé sur la Commune input élément d'Api. Il apparaît, vous pouvez supprimer l' ensemble de la liste des fichiers en paramètre l' value de la propriété de l' input objet à une chaîne vide, comme:

document.getElementById('multifile').value = "";

BTW, l'article à l'Aide de fichiers à partir d'applications web pourrait également être d'intérêt.

Answer 2

Puisque nous sommes dans le HTML5 domaine, c'est ma solution. L'essentiel est que vous poussez les fichiers d'un Tableau au lieu de les laisser dans une liste de Fichiers, puis à l'aide XHR2, vous poussez les fichiers vers un objet FormData. L'exemple ci-dessous.

Node.prototype.replaceWith = function(node)
{
    this.parentNode.replaceChild(node, this);
};
if(window.File && window.FileList)
{
    var topicForm = document.getElementById("yourForm");
    topicForm.fileZone = document.getElementById("fileDropZoneElement");
    topicForm.fileZone.files = new Array();
    topicForm.fileZone.inputWindow = document.createElement("input");
    topicForm.fileZone.inputWindow.setAttribute("type", "file");
    topicForm.fileZone.inputWindow.setAttribute("multiple", "multiple");
    topicForm.onsubmit = function(event)
    {
        var request = new XMLHttpRequest();
        if(request.upload)
        {
            event.preventDefault();
            topicForm.ajax.value = "true";
            request.upload.onprogress = function(event)
            {
                var progress = event.loaded.toString() + " bytes transfered.";
                if(event.lengthComputable)
                progress = Math.round(event.loaded / event.total * 100).toString() + "%";
                topicForm.fileZone.innerHTML = progress.toString();
            };
            request.onload = function(event)
            {
                response = JSON.parse(request.responseText);
                // Handle the response here.
            };
            request.open(topicForm.method, topicForm.getAttribute("action"), true);
            var data = new FormData(topicForm);
            for(var i = 0, file; file = topicForm.fileZone.files[i]; i++)
                data.append("file" + i.toString(), file);
            request.send(data);
        }
    };
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("Drop files or click here."));
    var handleFiles = function(files)
    {
        for(var i = 0, file; file = files[i]; i++)
            topicForm.fileZone.files.push(file);
    };
    topicForm.fileZone.ondrop = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
        handleFiles(event.dataTransfer.files);
    };
    topicForm.fileZone.inputWindow.onchange = function(event)
    {
        handleFiles(topicForm.fileZone.inputWindow.files);
    };
    topicForm.fileZone.ondragover = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
    };
    topicForm.fileZone.onclick = function()
    {
        topicForm.fileZone.inputWindow.focus();
        topicForm.fileZone.inputWindow.click();
    };
}
else
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("It's time to update your browser."));

Answer 3

Vous pouvez créer un tableau et utiliser à la place de la lecture-seule la liste des fichiers.

var myReadWriteList = new Array();
// user selects files later...
// then as soon as convenient... 
myReadWriteList = FileListReadOnly;

Après que le point de faire votre téléchargement à l'encontre de votre liste à la place de l'élément dans la liste. Je ne suis pas sûr du contexte dans lequel vous travaillez, mais je travaille avec un plugin jquery que j'ai trouvé et ce que j'avais à faire était de prendre le plugin source et de le mettre en page à l'aide d' <script> tags. Puis au-dessus de la source, j'ai ajouté mon tableau de sorte qu'il peut agir comme une variable globale et le plugin peuvent faire référence.

Ensuite, il a juste été question de remplacer les références.

Je pense que ce serait vous permettent d'ajouter aussi le drag & drop aussi, encore une fois, si le bâti de la liste est en lecture seule alors comment pourriez-vous obtenir les fichiers déposés dans la liste?

:))