Définition d'une valeur de téléchargement de fichier - Javascript/jQuery
J'ai une page de formulaire qui a un champ de téléchargement de fichier et j'essaie de définir la valeur de ce champ par programmation et bien que je sache que ce n'est pas possible pour des raisons de sécurité, j'aimerais savoir si nous le pouvons toujours? S'il y a un plugin ou quelque chose que je pourrais utiliser pour effectuer le téléchargement. J'ai la valeur Base64 du champ de fichier qui est requise pour définir ce champ. Tout ce que j'ai besoin de savoir, c'est s'il existe un moyen de le définir.
Toute suggestion ou aide serait formidable à cet égard.
Merci.
Update: Ajout d'un JsFiddle pour montrer ce que je teste.
Veuillez visiter ce site Web pour créer un fichier texte à l'aide de l'exemple du violon Js et le convertir à l'aide de ce lien.
var str = `text`;
http://www.motobit.com/util/base64-decoder-encoder.asp
Note:
La ou les réponses ci-dessous reflètent l'état des anciens navigateurs en 2009. Vous pouvez désormais définir la valeur de l'élément d'entrée de fichier de manière dynamique/par programme à l'aide de JavaScript en 2017.
Voir la réponse dans cette question pour plus de détails ainsi qu'une démo:
Comment définir la valeur d'entrée de fichier par programme (c'est-à-dire lors d'un glisser-déposer de fichiers)?
Vous pouvez convertir la chaîne base64 en blob, puis l'ajouter à formData avant de l'envoyer avec une demande ajax:
$("#form").submit(function(e) {
e.preventDefault();
formData = new FormData($(this)[0]);
var blob = dataURLtoBlob("base64 string");
formData.append("yourfile", blob);
$.ajax({
url: "whatever.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
alert("Form has been submitted with file");
}
});
dataURLtoBlob est une fonction qui convertit la chaîne base64 en source de fichier binaire (blob): Blob de DataURL?
Mise à jour: ajout d'un JsFiddle pour démontrer ce que je suis en train d'essayer.
@seahorsepip Answer , ajusté au minimum pour remplacer success par done qui n'est pas un paramètre défini $.ajax(), et supprimer le ; suivant done:function(){}, qui enregistre une erreur de syntaxe, devrait renvoyer le résultat attendu. Où convertedvalue au lien jsfiddle à la question mise à jour est également ajusté à un data URI valide. C'est-à-dire qu'après la conversion de la chaîne en base64, utilisez le schéma d'URL "data" pour convertir la chaîne base64 en chaîne valide data URI; par exemple.,
"data:text/plain;base64," + convertedvalue
Remarque: Un objet File créé à FormData est demandé avec GET et renvoyé à success dans stacksnippets et jsfiddle pour montrer un fichier dans FormDataPOSTed par $.ajax()
var convertedvalue = btoa(str); // where `str` is string
$("#form").submit(function(e) {
e.preventDefault();
formData = new FormData($(this)[0]);
// pass valid `data URI` to `dataURItoBlob`
// note `base64` extension
var blob = dataURItoBlob("data:text/plain;base64," + convertedvalue);
formData.append("yourfile", blob);
$.ajax({
url: "/path/to/server",
type: "POST",
data: formData,
contentType: false,
cache: true,
processData: false,
// substitute `success` for `done`
success: function(data) {
//alert("Form has been submitted with file");
} // remove trailing `;`
});
})
var str = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit pharetra ante, quis tristique elit tempor at. Mauris nec nisi porttitor, sodales nunc facilisis, tempor ligula. Aenean luctus purus id orci commodo, eu ornare erat molestie. Proin viverra semper est, sit amet hendrerit mi. Phasellus sodales auctor ipsum eu fermentum. Quisque ut convallis turpis. Suspendisse et varius lorem. Quisque ipsum metus, venenatis quis aliquam et, lobortis nec purus. Aenean consectetur, tellus in gravida tempor, dui lacus placerat dui, quis dictum libero sapien at diam. Donec eleifend, turpis ac vulputate vulputate, nulla enim vestibulum magna, nec finibus ex urna sed quam. Curabitur vitae felis mi. Suspendisse potenti.
Quisque scelerisque mattis venenatis. Phasellus in varius lectus. Ut ut lorem eu augue convallis vulputate. Ut at tortor leo. Etiam tristique, quam et ultrices commodo, risus mauris mollis nisi, quis condimentum sapien tortor et dolor. Pellentesque sollicitudin velit ut sapien tristique, in mattis est facilisis. Pellentesque et leo massa. Sed pretium faucibus purus ac sodales. Sed varius eros felis, vel posuere metus lobortis id. Maecenas eget cursus ligula. In nec luctus orci. Nunc sed massa elit. Pellentesque iaculis tortor sit amet tellus ultrices, nec tristique lorem semper.
Donec aliquet ipsum ipsum, in consequat nisl euismod nec. Aenean aliquam nisl nec elit convallis pulvinar. Suspendisse ac malesuada ex. Fusce laoreet metus at nulla suscipit, non facilisis dui scelerisque. Maecenas blandit augue et lorem venenatis consequat. In porttitor eros ac elit placerat sodales. Suspendisse facilisis lorem vestibulum ante commodo dignissim. Mauris dignissim egestas massa, sit amet hendrerit orci molestie id. Suspendisse vel enim sit amet massa eleifend accumsan. Curabitur eleifend velit non nisi egestas ornare. Ut congue, eros a condimentum faucibus, risus sapien cursus elit, tempor condimentum nisi nisi vitae leo. Sed quis blandit tellus, in aliquet purus. Pellentesque eget leo lobortis, consectetur nisi non, facilisis lectus. Morbi tortor augue, posuere vel ultrices in, vestibulum vel nibh. Morbi accumsan tellus congue commodo tincidunt.
Curabitur vitae fermentum eros. Sed ex dolor, suscipit in ornare in, sollicitudin ac mi. Phasellus ornare ipsum vel elit mollis convallis. Nunc nec porttitor tellus. Nullam volutpat leo sed dapibus vestibulum. Ut aliquet accumsan nulla, commodo pharetra urna auctor in. In ligula lectus, molestie a libero a, sollicitudin rutrum tellus.
Integer vitae turpis id ligula eleifend laoreet. Morbi molestie libero non interdum pulvinar. Nulla facilisi. Nulla a facilisis velit. Etiam metus felis, fermentum eget massa eu, posuere vestibulum mauris. Donec placerat faucibus sapien, vitae dapibus est dapibus ac. Nam quis elementum eros, a eleifend erat. Sed interdum nisi at rhoncus rutrum. Phasellus vitae arcu a tellus tincidunt mattis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit pharetra ante, quis tristique elit tempor at. Mauris nec nisi porttitor, sodales nunc facilisis, tempor ligula. Aenean luctus purus id orci commodo, eu ornare erat molestie. Proin viverra semper est, sit amet hendrerit mi. Phasellus sodales auctor ipsum eu fermentum. Quisque ut convallis turpis. Suspendisse et varius lorem. Quisque ipsum metus, venenatis quis aliquam et, lobortis nec purus. Aenean consectetur, tellus in gravida tempor, dui lacus placerat dui, quis dictum libero sapien at diam. Donec eleifend, turpis ac vulputate vulputate, nulla enim vestibulum magna, nec finibus ex urna sed quam. Curabitur vitae felis mi. Suspendisse potenti.
Quisque scelerisque mattis venenatis. Phasellus in varius lectus. Ut ut lorem eu augue convallis vulputate. Ut at tortor leo. Etiam tristique, quam et ultrices commodo, risus mauris mollis nisi, quis condimentum sapien tortor et dolor. Pellentesque sollicitudin velit ut sapien tristique, in mattis est facilisis. Pellentesque et leo massa. Sed pretium faucibus purus ac sodales. Sed varius eros felis, vel posuere metus lobortis id. Maecenas eget cursus ligula. In nec luctus orci. Nunc sed massa elit. Pellentesque iaculis tortor sit amet tellus ultrices, nec tristique lorem semper.
Donec aliquet ipsum ipsum, in consequat nisl euismod nec. Aenean aliquam nisl nec elit convallis pulvinar. Suspendisse ac malesuada ex. Fusce laoreet metus at nulla suscipit, non facilisis dui scelerisque. Maecenas blandit augue et lorem venenatis consequat. In porttitor eros ac elit placerat sodales. Suspendisse facilisis lorem vestibulum ante commodo dignissim. Mauris dignissim egestas massa, sit amet hendrerit orci molestie id. Suspendisse vel enim sit amet massa eleifend accumsan. Curabitur eleifend velit non nisi egestas ornare. Ut congue, eros a condimentum faucibus, risus sapien cursus elit, tempor condimentum nisi nisi vitae leo. Sed quis blandit tellus, in aliquet purus. Pellentesque eget leo lobortis, consectetur nisi non, facilisis lectus. Morbi tortor augue, posuere vel ultrices in, vestibulum vel nibh. Morbi accumsan tellus congue commodo tincidunt.
Curabitur vitae fermentum eros. Sed ex dolor, suscipit in ornare in, sollicitudin ac mi. Phasellus ornare ipsum vel elit mollis convallis. Nunc nec porttitor tellus. Nullam volutpat leo sed dapibus vestibulum. Ut aliquet accumsan nulla, commodo pharetra urna auctor in. In ligula lectus, molestie a libero a, sollicitudin rutrum tellus.
Integer vitae turpis id ligula eleifend laoreet. Morbi molestie libero non interdum pulvinar. Nulla facilisi. Nulla a facilisis velit. Etiam metus felis, fermentum eget massa eu, posuere vestibulum mauris. Donec placerat faucibus sapien, vitae dapibus est dapibus ac. Nam quis elementum eros, a eleifend erat. Sed interdum nisi at rhoncus rutrum. Phasellus vitae arcu a tellus tincidunt mattis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit pharetra ante, quis tristique elit tempor at. Mauris nec nisi porttitor, sodales nunc facilisis, tempor ligula. Aenean luctus purus id orci commodo, eu ornare erat molestie. Proin viverra semper est, sit amet hendrerit mi. Phasellus sodales auctor ipsum eu fermentum. Quisque ut convallis turpis. Suspendisse et varius lorem. Quisque ipsum metus, venenatis quis aliquam et, lobortis nec purus. Aenean consectetur, tellus in gravida tempor, dui lacus placerat dui, quis dictum libero sapien at diam. Donec eleifend, turpis ac vulputate vulputate, nulla enim vestibulum magna, nec finibus ex urna sed quam. Curabitur vitae felis mi. Suspendisse potenti.
Quisque scelerisque mattis venenatis. Phasellus in varius lectus. Ut ut lorem eu augue convallis vulputate. Ut at tortor leo. Etiam tristique, quam et ultrices commodo, risus mauris mollis nisi, quis condimentum sapien tortor et dolor. Pellentesque sollicitudin velit ut sapien tristique, in mattis est facilisis. Pellentesque et leo massa. Sed pretium faucibus purus ac sodales. Sed varius eros felis, vel posuere metus lobortis id. Maecenas eget cursus ligula. In nec luctus orci. Nunc sed massa elit. Pellentesque iaculis tortor sit amet tellus ultrices, nec tristique lorem semper.
Donec aliquet ipsum ipsum, in consequat nisl euismod nec. Aenean aliquam nisl nec elit convallis pulvinar. Suspendisse ac malesuada ex. Fusce laoreet metus at nulla suscipit, non facilisis dui scelerisque. Maecenas blandit augue et lorem venenatis consequat. In porttitor eros ac elit placerat sodales. Suspendisse facilisis lorem vestibulum ante commodo dignissim. Mauris dignissim egestas massa, sit amet hendrerit orci molestie id. Suspendisse vel enim sit amet massa eleifend accumsan. Curabitur eleifend velit non nisi egestas ornare. Ut congue, eros a condimentum faucibus, risus sapien cursus elit, tempor condimentum nisi nisi vitae leo. Sed quis blandit tellus, in aliquet purus. Pellentesque eget leo lobortis, consectetur nisi non, facilisis lectus. Morbi tortor augue, posuere vel ultrices in, vestibulum vel nibh. Morbi accumsan tellus congue commodo tincidunt.
Curabitur vitae fermentum eros. Sed ex dolor, suscipit in ornare in, sollicitudin ac mi. Phasellus ornare ipsum vel elit mollis convallis. Nunc nec porttitor tellus. Nullam volutpat leo sed dapibus vestibulum. Ut aliquet accumsan nulla, commodo pharetra urna auctor in. In ligula lectus, molestie a libero a, sollicitudin rutrum tellus.
Integer vitae turpis id ligula eleifend laoreet. Morbi molestie libero non interdum pulvinar. Nulla facilisi. Nulla a facilisis velit. Etiam metus felis, fermentum eget massa eu, posuere vestibulum mauris. Donec placerat faucibus sapien, vitae dapibus est dapibus ac. Nam quis elementum eros, a eleifend erat. Sed interdum nisi at rhoncus rutrum. Phasellus vitae arcu a tellus tincidunt mattis.
Images:
1) Copy and replace the following files in the /images folder
i. 1icon.png
ii. 2icon.png
iii. 3icon.png
iv. mobil-app.png
v. mobil-app-this.png
vi. properties-icon.svgz
vii. setupLogo.svgz
viii. web-app.png
ix. web-app-this.png`;
var convertedvalue = btoa(str);
console.log(convertedvalue);
$("#b64text").html(convertedvalue);
$("input[type=submit]").prop("disabled", false);
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], {
type: mimeString
});
return blob;
// Old code
// var bb = new BlobBuilder();
// bb.append(ab);
// return bb.getBlob(mimeString);
}
$("#form").submit(function(e) {
e.preventDefault();
formData = new FormData($(this)[0]);
// pass valid `data URI` to `dataURItoBlob`
var blob = dataURItoBlob("data:text/plain;base64," + convertedvalue);
formData.append("yourfile", blob);
$.ajax({
url: URL.createObjectURL(formData.get("yourfile")),
type: "GET",
// data: formData,
contentType: false,
cache: true,
processData: false,
success: function(data) {
console.log(data);
$("#b64text").html(data);
//alert("Form has been submitted with file");
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="form">
<input type="submit" disabled/>
</form>
<div id="b64text" style=" Word-wrap: break-Word;">
</div>jsfiddle https://jsfiddle.net/rccfymrz/17/
Le moyen le plus simple consiste à effectuer une demande AJAX POST dans le champ action du formulaire sur la balise <form>. C’est ce que le HTML normal fait tout seul, mais dans notre cas, vous pouvez spécifier les données par programme, dans ce cas un fichier multipart.
Pour un exemple, voir this question.
Téléchargement de fichier simple sans formulaire de soumission.
HTML
<input id="inputfileUpload" onchange="fileChanged(this);" type="file" accept="*/*" />
JAVASCRIPT
function fileChanged(element) {
if (element.files[0]) {
var file = element.files[0];
var reader = new FileReader();
reader.onload = function (e) {
//file.name
//file.size
//Filedata: e.target.result
//You can convert to base64
//Angular sample:
//$base64.encode(e.target.result);
};
reader.readAsBinaryString(file);
}
}
J'ai la valeur Base64 du champ de fichier [...] qu'il me faut savoir s'il existe un moyen de le définir.
Ne serait pas possible d'avoir une entrée cachée? Vous définissez la base64 sur ce champ, car taille maximale d'une entrée type="hidden" est identique à type="file"
Ainsi, vous évitez les raisons de sécurité qui vous empêchent de charger le fichier local et vous laissez tout de même envoyer la représentation en base 64. Le seul problème est que nous ne savons pas comment vous avez cette chaîne en base64. Est-il chargé à partir d'une demande? Déjà peuplé à partir de php? ...
C’est aussi simple que cela: file type input accepte le chemin du fichier, qui serait envoyé le formsubmit, pas le fichier lui-même.
UPD: Eh bien, actuellement, il est un peu plus complexe ( File API ), mais cela n'a pour but que de vous donner accès aux données que l'utilisateur souhaite vous donner.
En fait, vous n'avez pas besoin de manipuler fileinput pour envoyer le fichier.
Si vous êtes le propriétaire du serveur, vous pouvez toujours accepter la chaîne base64 du champ textinput normal en tant que fichier valide (au lieu du champ de fichier normal).
Sinon, vous pouvez toujours utiliser ajax (avec text ou blob ) pour envoyer votre form.