Comment obtenir FileType d'un DOM avec JavaScript?

Question

Voici un DOM comme celui-ci.

<img id="this-is-the-image" src="http://192.168.1.100/Image_tmp/2016-06/d4eb8d">

J'ai besoin de cliquer sur un bouton, lancer un JS, et télécharger ce fichier image.

J'ai terminé le bouton et le script de téléchargement.

Certains code:

`` `

function downloadFile(fileName, url) { 
     var aLink = document.createElement('a'); 
     var blob = new Blob([url]); 
     var evt = document.createEvent("HTMLEvents"); 
     getImageType(blob); 
     evt.initEvent("click", false, false); 
     aLink.download = fileName; 
     aLink.href = URL.createObjectURL(blob); 
     aLink.dispatchEvent(evt); 
    } 

` ``

J'ai un problème. Je peux seulement obtenir le src "http://192.168.1.100/Image_tmp/2016-06/d4eb8d" ou le nom d4eb8d, mais en réalité l'image est .png ou .jpg. Le navigateur peut le voir, mais après que je save à mon ordinateur, le nom de fichier soit d4eb8d, pas d4eb8d.png ou d4eb8d.jgp. Comment puis-je obtenir le type réel de l'image afin que je puisse spécifier le nom de téléchargement?

Answer 1

Vous pouvez utiliser XMLHttpRequest() avec .responseType défini sur "blob" pour demander le fichier image; blob.type.split("/")[1] où type est MIME type de Blob, [1] après .split() serait jpg, jpeg, png ou tout autre type d'image

window.onload = function() { 
    var aLink = document.querySelector("a"); 
    var fileName = "image"; 
    var request = new XMLHttpRequest(); 
    request.responseType = "blob"; 
    request.open("GET", "http://example.com/d4eb8d"); 
    request.onload = function() { 
    var blob = this.response; 
     var type = blob.type.split("/")[1]; 
     console.log(type); 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("click", false, false); 
     aLink.download = fileName + "." + type; 
     aLink.href = URL.createObjectURL(blob); 
     aLink.dispatchEvent(evt); 
    } 
    request.send() 
    } 

plnkr http://plnkr.co/edit/To4uZXL8PUph9qG3azvZ?p=preview

Answer 2

Êtes-vous sûr que new Blob([url]) retournera blob avec un contenu d'image? pas un fichier texte avec ce contenu http://192.168.1.100/Image_tmp/2016-06/d4eb8d?

Comme je sais que vous pouvez activer le lien d'image blob que par lire ce avec XHR =>How to get a file or blob from an object URL?

puis quand vous aurez blob, obtenir le type de fichier à partir blob.type. Et attacher l'extension

var ext =""; 
switch(blob.type){ 
    case "image/jpeg": 
     ext=".jpg"; 
     break; 
    case "image/png": 
     ext=".png"; 
     break; 
    case "image/gif": 
     ext=".gif"; 
     break; 
} 
aLink.download = fileName + ext; 

Answer 3

Vous avez une instance de HTMLImageElement et, pour autant que je peux dire de la documentation, il ne possède pas de propriété avec le type d'image.

Vous pouvez saisir l'URL, lancer un appel AJAX et obtenir l'en-tête Content-Type, à partir de laquelle il devrait être facile de trouver une extension de fichier ... en supposant que le serveur distant fournisse les informations (si ce n'est pas le cas avoir un problème différent). L'objet XMLHttpRequest a une méthode .getResponseHeader().

Vous avez toujours la solution du pauvre-homme de changer window.location à l'URL d'image mais bien sûr il n'y a aucun moyen de forcer un téléchargement. Enfin, vous pouvez créer un petit script côté serveur qui télécharge le fichier sur le serveur et prépare tous les détails.