jQuery Ajax Upload de Fichier

Puis-je utiliser la suite de jQuery code pour effectuer l'upload de fichier à l'aide de la méthode post d'une requête Ajax ?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Si c'est possible, dois-je remplir les "données" de la partie? Est-ce la bonne manière? Je ne publier le fichier sur le serveur.

J'ai été Googler autour, mais ce que j'ai trouvé un plugin alors que dans mon plan, je ne veux pas l'utiliser. Au moins pour le moment.

Ajax ne prend pas en charge le téléchargement de fichiers, vous devez utiliser l'iframe à la place
Question connexe: stackoverflow.com/questions/6974684/...
Connexes: stackoverflow.com/questions/166221/...
Connexes: abandonner.ie/notebook/simple-fichier-téléchargements-using-jquery-ajax

OriginalL'auteur Willy | 2010-02-23

562

upload de fichier est possible grâce à ajax.
Vous pouvez télécharger le fichier, sans rafraichissement de la page à l'aide d'une IFrame.
vous pouvez vérifier plus en détail ici

Mise à JOUR:

Avec XHR2, upload de Fichier via AJAX est pris en charge. E. g. par FormData objet, mais malheureusement, il n'est pas pris en charge par tous/les vieux navigateurs.

FormData soutien commence à partir de la suite de bureau versions des navigateurs.
IE 10+,
Firefox 4.0+,
Chrome 7+,
Safari 5+,
Opera 12+

Pour plus de détails, voir MDN lien

Voici une liste des navigateurs qui ne sont pas pris en charge: caniuse.com/#search=FormData Aussi, je n'ai pas testé, mais voici un polyfill pour FormData gist.github.com/3120320
Plus précisément, c'est à dire < 10 n'est pas, pour ceux qui sont trop paresseux pour lire le lien.
non, nous n'avez pas à attendre que long plus, parce que tout IE a seulement 22% du marché mondial de partager et de 27% aux états-UNIS et en baisse rapide. Les Chances sont qu'il ya des gens de plus de 70 ans. Plutôt que de IE dicter ce que les développeurs ont à faire IE soit la forme ou de sortir de la course.
La plupart des utilisateurs d'internet explorer sont les employés de bureau qui n'ont pas le choix du navigateur à utiliser en raison de politiques de l'entreprise. Je ne pense pas que l'âge a beaucoup à faire avec elle. Je devine que la plupart des gens > 70 obtenir leur progéniture pour installer Chrome ou FF à la place 🙂
Ce lien m'a vraiment aidé à comprendre que le strict minimum. Je n'ai pas eu à utiliser une requête xhr. Si vous n'utilisez ajax assurez-vous que la enctype à "form/multipart"!

OriginalL'auteur Adeel

284

Iframes ne sont plus nécessaires pour le téléchargement de fichiers via ajax. J'ai récemment fait par moi-même. Découvrez ces pages:

À l'aide de HTML5 les uploads de fichier avec l'AJAX et jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Mise à jour de la réponse et de la nettoyer. Utiliser le getSize fonction pour vérifier la taille ou utiliser la fonction getType vérification des types.
Ajouté progressbar du code html et css.

var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function() {
return this.file.type;
};
Upload.prototype.getSize = function() {
return this.file.size;
};
Upload.prototype.getName = function() {
return this.file.name;
};
Upload.prototype.doUpload = function () {
var that = this;
var formData = new FormData();
//add assoc key values, this will be posts values
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax({
type: "POST",
url: "script",
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', that.progressHandling, false);
}
return myXhr;
},
success: function (data) {
//your callback here
},
error: function (error) {
//handle error
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
};
Upload.prototype.progressHandling = function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
};

Comment utiliser la classe Upload

//Change id to your id
$("#ingredient_file").on("change", function (e) {
var file = $(this)[0].files[0];
var upload = new Upload(file);
//maby check size or type here with upload.getSize() and upload.getType()
//execute upload
upload.doUpload();
});

Progressbar code html

<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>

Progressbar code css

#progress-wrp {
border: 1px solid #0099CC;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar {
height: 100%;
border-radius: 3px;
background-color: #f39ac7;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status {
top: 3px;
left: 50%;
position: absolute;
display: inline-block;
color: #000000;
}

Vous pouvez plus ou moins copiez le code tout de suite et l'utiliser. Il suffit de changer quelques noms de code et les noms de classe. Tout customation est sur votre propre.
Notez que myXhr semble être global, ainsi que le nom, la taille et le type. Aussi il est préférable d'utiliser des "beforeSend" pour améliorer la déjà créé objet XMLHttpRequest plutôt que d'utiliser "xhr" pour en créer un puis de le modifier.
Non pris en charge par IE9: caniuse.com/#search=xhr
Je ne pense pas que nous pouvons l'utiliser comme @Ziinloader. Vous êtes à l'aide de certains locaux, méthode qui n'est pas inclus: writer(catchFile). Qu'est-ce que writer()?
Que faire si les données contient également quelques champs avec un fichier à télécharger?

OriginalL'auteur Ziinloader

172

Ajax post et de téléchargement de fichiers est possible. Je suis en utilisant jQuery $.ajax fonction pour charger mes fichiers. J'ai essayé d'utiliser l'objet XHR, mais ne pouvait pas obtenir des résultats sur le côté serveur avec PHP.
```
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'upload.php',
type : 'POST',
data : formData,
processData: false,  //tell jQuery not to process the data
contentType: false,  //tell jQuery not to set contentType
success : function(data) {
console.log(data);
alert(data);
}
});
```
Comme vous pouvez le voir, vous devez créer un objet FormData, vide ou à partir de (sérialisé? - $('#yourForm').serialize()) formulaire existant, puis joignez le fichier d'entrée.

Ici plus d'informations:
- Comment faire pour télécharger un fichier à l'aide de jQuery.ajax et FormData
- Le téléchargement de fichiers via jQuery, objet FormData est fournie et pas de nom de fichier, requête GET

Pour le processus PHP, vous pouvez utiliser quelque chose comme ceci:
```
//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);
if($fileError == UPLOAD_ERR_OK){
//Processes your file here
}else{
switch($fileError){
case UPLOAD_ERR_INI_SIZE:   
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_FORM_SIZE:  
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_PARTIAL:    
$message = 'Error: no terminó la acción de subir el archivo.';
break;
case UPLOAD_ERR_NO_FILE:    
$message = 'Error: ningún archivo fue subido.';
break;
case UPLOAD_ERR_NO_TMP_DIR: 
$message = 'Error: servidor no configurado para carga de archivos.';
break;
case UPLOAD_ERR_CANT_WRITE: 
$message= 'Error: posible falla al grabar el archivo.';
break;
case  UPLOAD_ERR_EXTENSION: 
$message = 'Error: carga de archivo no completada.';
break;
default: $message = 'Error: carga de archivo no completada.';
break;
}
echo json_encode(array(
'error' => true,
'message' => $message
));
}
```
Quelle bibliothèque jquery ai-je besoin de référence pour exécuter ce code?
La réponse a été écrit en 2014. La version de JQuery est à 1,10. Je n'ai pas essayé avec des versions plus récentes.
formData.append('file', $('#file')[0].files[0]); retourne undefined et console.log(formData) a rien sauf _proto_
Pas pris en charge par IE 9, dans certains cas, est coincé dans le même enfer que je
J'ai eu ce travail...Pincez-moi, je suis sur Ajax de jQuery file upload ciel! var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });

OriginalL'auteur pedrozopayares

Je suis assez tard pour cela, mais je cherchais un ajax d'image basé sur le téléchargement de la solution et la réponse que je cherchais était un peu dispersés tout au long de ce post. La solution que j'ai installé sur impliquées l'objet FormData. J'ai assemblé une forme de base du code que j'ai mis ensemble. Vous pouvez le voir, il montre comment ajouter un champ personnalisé à la forme avec fd.append() ainsi que la façon de gérer les données de réponse quand la requête ajax est fait.

De téléchargement html:

<!DOCTYPE html>
<html>
<head>
<title>Image Upload Form</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function submitForm() {
console.log("submit event");
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("label", "WEBUPLOAD");
$.ajax({
url: "upload.php",
type: "POST",
data: fd,
processData: false,  //tell jQuery not to process the data
contentType: false   //tell jQuery not to set contentType
}).done(function( data ) {
console.log("PHP Output:");
console.log( data );
});
return false;
}
</script>
</head>
<body>
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<label>Select a file:</label><br>
<input type="file" name="file" required />
<input type="submit" value="Upload" />
</form>
<div id="output"></div>
</body>
</html>

Dans le cas où vous travaillez avec php voici une façon de gérer l'upload qui inclut l'utilisation de deux champs personnalisés démontré dans le html ci-dessus.

Upload.php

<?php
if ($_POST["label"]) {
$label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
} else {
$filename = $label.$_FILES["file"]["name"];
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("uploads/" . $filename)) {
echo $filename . " already exists. ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"],
"uploads/" . $filename);
echo "Stored in: " . "uploads/" . $filename;
}
}
} else {
echo "Invalid file";
}
?>

je suis Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, pourquoi est-ce donc, monsieur, je copie-coller de votre code comme il est
si vous Google votre message d'erreur, c'est le premier résultat: stackoverflow.com/questions/10752055/... avez-vous accès à vos pages web en local par le biais de file://, plutôt que d'utiliser un serveur web? En aparté, il n'est pas des meilleures pratiques, il suffit de copier et de coller le code à l'aveuglette sans d'abord comprendre. Je vous recommande de passer par le code, ligne par ligne, pour obtenir une compréhension de ce qui se passe avant de mettre le code à utiliser.
merci pour clarifier un peu les choses je l'ai fait passer par la ligne par ligne et je n'ai pas vraiment comprendre beaucoup de choses, donc j'ai posé la question pour que quelqu'un pourrait éclaircir mes doutes. Je suis à l'utilisation de locaux par voie de xampp pour être exact. Puis-je poser une question qui peut-être vous pouvez préciser?
Revival : je sais que c'est trop tard pour la réponse.. Vous avez obtenu une origine de la croix-erreur parce que vous avez ouvert le fichier html en tant que fichier que de l'exécuter à partir du serveur.
je goûtent la réponse, comment me conseillez-vous de faire pour bien faire?

OriginalL'auteur lee8oi

31

AJAX upload est en effet possible avec XMLHttpRequest(). Pas les iframes nécessaire. Télécharger les résultats peuvent être affichés.

Pour plus de détails voir: Réponse https://stackoverflow.com/a/4943774/873282 à la question jQuery de Progression de Téléchargement et upload de fichier en AJAX.

Malheureusement, IE < 10 ne prennent pas en charge cette.

OriginalL'auteur koppor
14

Dans le cas où vous voulez le faire comme ça:
```
$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
if( progressEvent.lengthComputable) {
var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
if( upload) {
console.log( percent + ' uploaded');
} else {
console.log( percent + ' downloaded');
}
}
})
.done( function() {
console.log( 'Finished upload');                    
});
```
que

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

pourrait être votre solution.

Où est la méthode de téléchargement en $ objet, le lien ci-dessus n'est pas en vigueur
github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/...
Merci de poster votre réponse! Assurez-vous de lire le FAQ sur l'Auto-Promotion avec soin. Notez également qu'il est que vous publiez un avertissement à chaque fois que vous accéder à votre propre site/du produit.

OriginalL'auteur lgersman
13
- Utiliser une iframe masqué et de définir votre forme de la cible pour que l'iframe nom. De cette façon, lorsque le formulaire est soumis, seulement l'iframe sera actualisé.
- Avez un gestionnaire d'événements enregistrés pour l'iframe événement load analyse de la réponse.
Plus de détails sur mon blog: http://blog.manki.in/2011/08/ajax-fie-upload.html.

Éviter les iframes si possible
quel est votre préoccupation?

OriginalL'auteur Manki
11
```
$("#submit_car").click( function() {
var formData = new FormData($('#car_cost_form')[0]);
$.ajax({
url: 'car_costs.php',
data: formData,
async: false,
contentType: false,
processData: false,
cache: false,
type: 'POST',
success: function(data)
{
},
})    return false;    
});
```
edit: Remarque contentype et traiter des données
Vous pouvez simplement l'utiliser pour télécharger des fichiers via Ajax...... soumettre entrée ne peut pas être à l'extérieur de la forme de l'élément 🙂

En utilisant cette méthode, vous pouvez poster la forme, mais pas avec "fichier" type de champs. Cette question est précisément à propos de fichier de téléchargement.

OriginalL'auteur Gvice

Voici comment j'ai obtenu ce travail:

HTML

<input type="file" id="file">
<button id='process-file-button'>Process</button>

$('#process-file-button').on('click', function (e) {
let files = new FormData(), //you can consider this as 'data bag'
url = 'yourUrl';
files.append('fileName', $('#file')[0].files[0]); //append selected file to the bag named 'file'
$.ajax({
type: 'post',
url: url,
processData: false,
contentType: false,
data: files,
success: function (response) {
console.log(response);
},
error: function (err) {
console.log(err);
}
});
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
$file = $_FILES['fileName'];
$name = $file['name'];
$path = $file['tmp_name'];
//process your file
}

Ce qui m'a le plus aidée pour moi c'était la $('#file')[0].files[0] qui est une sorte d'étrange JS solution de contournement sans nécessiter un bon <form>

OriginalL'auteur М.Б.

J'ai mis en œuvre un multiple de sélection du fichier avec l'aperçu instantané et téléchargement après la suppression des fichiers indésirables aperçu via ajax.

Documentation détaillée peut être trouvée ici: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Démo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

Javascript:

    $(document).ready(function(){
$('form').submit(function(ev){
$('.overlay').show();
$(window).scrollTop(0);
return upload_images_selected(ev, ev.target);
})
})
function add_new_file_uploader(addBtn) {
var currentRow = $(addBtn).parent().parent();
var newRow = $(currentRow).clone();
$(newRow).find('.previewImage, .imagePreviewTable').hide();
$(newRow).find('.removeButton').show();
$(newRow).find('table.imagePreviewTable').find('tr').remove();
$(newRow).find('input.multipleImageFileInput').val('');
$(addBtn).parent().parent().parent().append(newRow);
}
function remove_file_uploader(removeBtn) {
$(removeBtn).parent().parent().remove();
}
function show_image_preview(file_selector) {
//files selected using current file selector
var files = file_selector.files;
//Container of image previews
var imageContainer = $(file_selector).next('table.imagePreviewTable');
//Number of images selected
var number_of_images = files.length;
//Build image preview row
var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
'<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
'</tr> ');
//Add image preview row
$(imageContainer).html(imagePreviewRow);
if (number_of_images > 1) {
for (var i =1; i<number_of_images; i++) {
/**
*Generate class name of the respective image container appending index of selected images, 
*sothat we can match images selected and the one which is previewed
*/
var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
$(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
$(imageContainer).append(newImagePreviewRow);
}
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
/**
* Allow only images
*/
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
/**
* Create an image dom object dynamically
*/
var img = document.createElement("img");
/**
* Get preview area of the image
*/
var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');
/**
* Append preview of selected image to the corresponding container
*/
preview.append(img); 
/**
* Set style of appended preview(Can be done via css also)
*/
preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});
/**
* Initialize file reader
*/
var reader = new FileReader();
/**
* Onload event of file reader assign target image to the preview
*/
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
/**
* Initiate read
*/
reader.readAsDataURL(file);
}
/**
* Show preview
*/
$(imageContainer).show();
}
function remove_selected_image(close_button)
{
/**
* Remove this image from preview
*/
var imageIndex = $(close_button).attr('imageindex');
$(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}
function upload_images_selected(event, formObj)
{
event.preventDefault();
//Get number of images
var imageCount = $('.previewImage').length;
//Get all multi select inputs
var fileInputs = document.querySelectorAll('.multipleImageFileInput');
//Url where the image is to be uploaded
var url= "/upload-directory/";
//Get number of inputs
var number_of_inputs = $(fileInputs).length; 
var inputCount = 0;
//Iterate through each file selector input
$(fileInputs).each(function(index, input){
fileList = input.files;
//Create a new FormData object.
var formData = new FormData();
//Extra parameters can be added to the form data object
formData.append('bulk_upload', '1');
formData.append('username', $('input[name="username"]').val());
//Iterate throug each images selected by each file selector and find if the image is present in the preview
for (var i = 0; i < fileList.length; i++) {
if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
var file = fileList[i];
//Check the file type.
if (!file.type.match('image.*')) {
continue;
}
//Add the file to the request.
formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
}
}
//Set up the request.
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function () {
if (xhr.status === 200) {
var jsonResponse = JSON.parse(xhr.responseText);
if (jsonResponse.status == 1) {
$(jsonResponse.file_info).each(function(){
//Iterate through response and find data corresponding to each file uploaded
var uploaded_file_name = this.original;
var saved_file_name = this.target;
var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
file_info_container.append(file_name_input);
imageCount--;
})
//Decrement count of inputs to find all images selected by all multi select are uploaded
number_of_inputs--;
if(number_of_inputs == 0) {
//All images selected by each file selector is uploaded
//Do necessary acteion post upload
$('.overlay').hide();
}
} else {
if (typeof jsonResponse.error_field_name != 'undefined') {
//Do appropriate error action
} else {
alert(jsonResponse.message);
}
$('.overlay').hide();
event.preventDefault();
return false;
}
} else {
/*alert('Something went wrong!');*/
$('.overlay').hide();
event.preventDefault();
}
};
xhr.send(formData);
})
return false;
}

Veuillez voir le blog pour plus d'explications: goo.gl/umgFFy. Si vous avez encore des questions, de revenir à moi Merci

OriginalL'auteur Ima

J'ai manipulé dans un code simple. Vous pouvez télécharger un travail de démonstration de ici

Pour votre cas, ces très possible. Je vais vous prendre, étape par étape, comment vous pouvez télécharger un fichier vers le serveur à l'aide d'AJAX jquery.

Tout d'abord, mettons-nous à créer un fichier HTML à ajouter le fichier de formulaire élément comme indiqué ci-dessous.

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
<input  type="file" name="file"  required id="upload">
<button class="submitI" >Upload Image</button> 
</form>

Deuxièmement de créer un jquery.js fichier et ajoutez le code suivant pour gérer notre soumission des fichiers sur le serveur

    $("#formContent").submit(function(e){
e.preventDefault();
var formdata = new FormData(this);
$.ajax({
url: "ajax_upload_image.php",
type: "POST",
data: formdata,
mimeTypes:"multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(){
alert("file successfully submitted");
},error: function(){
alert("okey");
}
});
});
});

Il vous fait . Voir plus

OriginalL'auteur Daniel Nyamasyo

6

Oui, vous pouvez, il suffit d'utiliser javascript pour obtenir le fichier, assurez-vous de lire le fichier en tant que données d'URL. Analyser les choses avant de base64 à réellement obtenir les données encodées en base 64 et puis si vous êtes à l'aide de php ou de toute autre extrémité arrière de la langue vous pouvez décoder le 64 base de données et enregistrer dans un fichier, comme illustré ci-dessous
```
Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
dataToBeSent = reader.result.split("base64,")[1];
$.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);
PHP:
file_put_contents('my.pdf', base64_decode($_POST["data"]));
```
Bien sûr, vous voulez probablement faire de la validation de certains comme la vérification de type de fichiers que vous faites affaire avec et des trucs comme ça, mais c'est l'idée.

file_put_contents($fname, file_get_contents($_POST['data'])); file_get_contents occupe du décodage et de données:// en-tête

OriginalL'auteur Piacenti

À l'aide de FormData est le chemin à parcourir, comme indiqué par beaucoup de réponses. voici un peu de code qui fonctionne très bien pour cet usage. Je suis également d'accord avec le commentaire de nidification ajax blocs pour compléter circonstances complexes. En incluant e.PreventDefault(); dans mon expérience, rend le code plus de la croix-navigateur compatible.

    $('#UploadB1').click(function(e){        
e.preventDefault();
if (!fileupload.valid()) {
return false;            
}
var myformData = new FormData();        
myformData.append('file', $('#uploadFile')[0].files[0]);
$("#UpdateMessage5").html("Uploading file ....");
$("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");
myformData.append('mode', 'fileUpload');
myformData.append('myid', $('#myid').val());
myformData.append('type', $('#fileType').val());
//formData.append('myfile', file, file.name); 
$.ajax({
url: 'include/fetch.php',
method: 'post',
processData: false,
contentType: false,
cache: false,
data: myformData,
enctype: 'multipart/form-data',
success: function(response){
$("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
$("#UpdateMessage5").css("background","");
console.log("file successfully submitted");
},error: function(){
console.log("not okay");
}
});
});

cela va de la forme thru jquery valider ... if (!fileupload.valide()) { return false; }

OriginalL'auteur Mike Volmar

<html>
<head>
<title>Ajax file upload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
$("#uploadimage").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "upload.php", //Url to which the request is send
type: "POST", //Type of request to be send, called as method
data: new FormData(this), //Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, //The content type used when sending data to the server.
cache: false, //To unable request pages to be cached
processData:false, //To send DOMDocument or non processed data file it is set to false
success: function(data)   //A function to be called if request succeeds
{
alert(data);
}
});
}));
</script>
</head>
<body>
<div class="main">
<h1>Ajax Image Upload</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
</div>
</body>
</html>

OriginalL'auteur Nikit Barochiya

Vous pouvez utiliser la méthode ajaxSubmit comme suit 🙂
lorsque vous sélectionnez un fichier qui ont besoin de télécharger vers le serveur, formulaire de soumettre au serveur 🙂

$(document).ready(function () {
var options = {
target: '#output',   //target element(s) to be updated with server response
timeout: 30000,
error: function (jqXHR, textStatus) {
$('#output').html('have any error');
return false;
}
},
success: afterSuccess,  //post-submit callback
resetForm: true
//reset the form after successful submit
};
$('#idOfInputFile').on('change', function () {
$('#idOfForm').ajaxSubmit(options);
//always return false to prevent standard browser submit and page navigation
return false;
});
});

Je crois que vous parlez à propos de jquery formulaire plugin. C'est vraiment la meilleure option ici, mis à part le manque de détails dans votre réponse.
vous avez raison! ce script doit utiliser jquery forme de plugin pour soumettre l'utilisation de la méthode ajaxSubmit qui définissent en jquery forme de plugin

OriginalL'auteur Quy Le

4

pour télécharger un fichier qui est envoyé par l'utilisateur comme une partie de la forme à l'aide de jquery, veuillez suivre le code ci-dessous :
```
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
```
Puis envoyer les données du formulaire de l'objet serveur.

Nous pouvons également ajouter un Fichier ou un Blob directement à l'objet FormData.
```
data.append("myfile", myBlob, "filename.txt");
```
OriginalL'auteur VISHNU Radhakrishnan

Si vous voulez télécharger le fichier à l'aide d'AJAX voici le code que vous pouvez utiliser pour le transfert de fichier.

$(document).ready(function() {
var options = { 
beforeSubmit:  showRequest,
success:       showResponse,
dataType: 'json' 
}; 
$('body').delegate('#image','change', function(){
$('#upload').ajaxForm(options).submit();        
}); 
});     
function showRequest(formData, jqForm, options) { 
$("#validation-errors").hide().empty();
$("#output").css('display','none');
return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
if(response.success == false)
{
var arr = response.errors;
$.each(arr, function(index, value)
{
if (value.length != 0)
{
$("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
}
});
$("#validation-errors").show();
} else {
$("#output").html("<img src='"+response.file+"' />");
$("#output").css('display','block');
}
}

Voici le code HTML pour Télécharger le fichier

<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
<input type="file" name="image" id="image" /> 
</form>

OriginalL'auteur Nikunj K.

Pour obtenir toutes vos entrées de formulaire, y compris la type="file" vous devez utiliser objet FormData.
vous serez en mesure de voir le formData contenu dans le debugger -> réseau ->Headers après vous allez envoyer le formulaire.

var url = "YOUR_URL";
var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);
$.ajax(url, {
method: 'post',
processData: false,
contentType: false,
data: formData
}).done(function(data){
if (data.success){ 
alert("Files uploaded");
} else {
alert("Error while uploading the files");
}
}).fail(function(data){
console.log(data);
alert("Error while uploading the files");
});

OriginalL'auteur David

var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
url: 'url',
type: 'POST',
data: dataform,
async: false,
success: function(res) {
response data;
},
cache: false,
contentType: false,
processData: false
});

vous pouvez améliorer votre réponse par l'ajout de quelques détails

OriginalL'auteur Jayesh Paunikar

2019 mise à jour:

html

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

$(document).on('submit', '.fr', function(){
$.ajax({ 
type: 'post', 
url: url, <--- you insert proper URL path to call your views.py function here.
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: new FormData(this) ,
success: function(data) {
console.log(data);
}
});
return false;
});

views.py

form = ThisForm(request.POST, request.FILES)
if form.is_valid():
text = form.cleaned_data.get("text")
example_image = request.FILES['example_image']

Comment dow cette améliorer les réponses déjà données? Aussi cette réponse mentionne un views.py fichier qui est Django et n'a rien à voir avec la question.
Parce que le problème se manifeste de façon comparable lors de l'utilisation de Django, et si vous êtes à l'aide de Django, il n'y a pas beaucoup de sens ici en ce qui concerne le résoudre. J'ai pensé que je voudrais offrir une assistance proactive juste au cas où quelqu'un arrive ici, comme je l'ai fait dans l'avenir. Avoir une rude journée?

OriginalL'auteur Jay

1

Ici est une idée que je pensais:
```
Have an iframe on page and have a referencer.
```
Avoir un formulaire qui vous permet de déplacer l'ENTRÉE:Fichier de l'élément.
```
Form:  A processing page AND a target of the FRAME.
```
Le résultat sera publier sur le cadre, et alors vous pouvez simplement envoyer les données extraites d'un niveau à l'image de la marque que vous voulez avec quelque chose comme:
```
data:image/png;base64,asdfasdfasdfasdfa
```
et le chargement de la page.

Je crois qu'il fonctionne pour moi, et selon que vous pourriez être en mesure de faire quelque chose comme:
```
.aftersubmit(function(){
stopPropigation()//or some other code which would prevent a refresh.
});
```
Je ne vois pas en quoi cela améliore toute autre réponse donnée avant. C'est aussi l' de Propagation de l' pas propigation! 😉

OriginalL'auteur Fallenreaper

Vous devez vous connecter pour publier un commentaire.