Comment puis-je publier des données de fichier et de chaîne avec FormData()
? Par exemple, j'ai beaucoup d'autres données d'entrée cachées dont j'ai besoin qu'elles soient envoyées au serveur,
html,
<form action="image.php" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id;?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form>
Avec ce code ci-dessous, je ne parviens qu'à envoyer les données du fichier mais pas les données d'entrée masquées.
jquery,
// HTML5 form data object.
var fd = new FormData();
var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); // page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID
fd.append("file", file_data);
$.ajax({
url: 'add.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
server.php
print_r($_FILES);
print_r($_POST);
résultat,
Array
(
[file] => Array
(
[name] => xxx.doc
[type] => application/msword
[tmp_name] => C:\wamp\tmp\php7C24.tmp
[error] => 0
[size] => 11776
)
)
J'aimerais cependant que cela soit mon résultat,
Array
(
[file] => Array
(
[name] => xxx.doc
[type] => application/msword
[tmp_name] => C:\wamp\tmp\php7C24.tmp
[error] => 0
[size] => 11776
)
)
Array
(
[page_id] => 1000
[category_id] => 12
[method] => upload
...
)
C'est possible?
var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
fd.append("file_"+i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
fd.append(input.name,input.value);
});
$.ajax({
url: 'test.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}
});
Ajout d'une boucle for
et modification de .serialize()
en .serializeArray()
pour la référence à un objet dans un .each()
afin de l'ajouter à la FormData
.
bien, comme une alternative plus facile et plus courte, vous pouvez le faire aussi !!
var fd = new FormData();
var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); //page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID
fd.append("file", file_data);
$.ajax({
url: 'add.php?'+ other_data, //<== just add it to the end of url ***
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
J'utilise toujours this.It envoie des données de formulaire en utilisant ajax
$(document).on("submit", "form", function(event)
{
event.preventDefault();
var url=$(this).attr("action");
$.ajax({
url: url,
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
}
});
});
J'essaie de contribuer mon code de collaboration avec mon ami. modification de ce forum.
$('#upload').on('click', function() {
var fd = new FormData();
var c=0;
var file_data,arr;
$('input[type="file"]').each(function(){
file_data = $('input[type="file"]')[c].files; // get multiple files from input file
console.log(file_data);
for(var i = 0;i<file_data.length;i++){
fd.append('arr[]', file_data[i]); // we can put more than 1 image file
}
c++;
});
$.ajax({
url: 'test.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}
});
});
ceci mon fichier html
<form name="form" id="form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]"multiple>
<input type="button" name="submit" value="upload" id="upload">
ce fichier de code php
<?php
$count = count($_FILES['arr']['name']); // arr from fd.append('arr[]')
var_dump($count);
echo $count;
var_dump($_FILES['arr']);
if ( $count == 0 ) {
echo 'Error: ' . $_FILES['arr']['error'][0] . '<br>';
}
else {
$i = 0;
for ($i = 0; $i < $count; $i++) {
move_uploaded_file($_FILES['arr']['tmp_name'][$i], 'uploads/' . $_FILES['arr']['name'][$i]);
}
}
?>
J'espère que les personnes ayant le même problème pourront rapidement résoudre ce problème… .. j'ai eu mal à la tête car plusieurs images téléchargées.
D'après ce que j'ai compris, vous souhaitez envoyer les images et les valeurs des entrées ensemble. Ce code fonctionne bien pour moi, j'espère que cela aidera quelqu'un dans le futur.
<form id="my-form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id;?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form>
-
jQuery.ajax({
url: 'post.php',
data: new FormData($('#my-form')[0]),
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}});
Jetez un oeil à mon code court pour le téléchargement multiple ajax avec aperçu.
Vous pouvez essayer ceci:
var fd = new FormData();
var data = []; //<---------------declare array here
var file_data = object.get(0).files[i];
var other_data = $('form').serialize();
data.Push(file_data); //<----------------Push the data here
data.Push(other_data); //<----------------and this data too
fd.append("file", data); //<---------then append this data
var fd = new FormData();
//Get Form Values
var other_data = $('#form1').serializeArray();
$.each(other_data, function (key, input) {
fd.append(input.name, input.value);
});
//Get File Value
var $file = jq("#photoUpload").get(0);
if ($file.files.length > 0) {
for (var i = 0; i < $file.files.length; i++) {
fd.append('Photograph' + i, $file.files[i]);
}
}
$.ajax({
url: 'test.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}
});
J'ai trouvé que, si d'une manière ou d'une autre (comme votre ModelState est false sur le serveur.) Et que la page postait à nouveau sur le serveur, elle prenait l'ancienne valeur sur le serveur. Alors j'ai trouvé cette solution pour ça.
var data = new FormData();
$.each($form.serializeArray(), function (key, input) {
if (data.has(input.name)) {
data.set(input.name, input.value);
} else {
data.append(input.name, input.value);
}
});
Pour plusieurs fichiers en ajax, essayez ceci
var url = "your_url";
var data = $('#form').serialize();
var form_data = new FormData();
//get the length of file inputs
var length = $('input[type="file"]').length;
for(var i = 0;i<length;i++){
file_data = $('input[type="file"]')[i].files;
form_data.append("file_"+i, file_data[0]);
}
// for other data
form_data.append("data",data);
$.ajax({
url: url,
type: "POST",
data: form_data,
cache: false,
contentType: false, //important
processData: false, //important
success: function (data) {
//do something
}
})
En php
parse_str($_POST['data'], $_POST);
for($i=0;$i<count($_FILES);$i++){
if(isset($_FILES['file_'.$i])){
$file = $_FILES['file_'.$i];
$file_name = $file['name'];
$file_type = $file ['type'];
$file_size = $file ['size'];
$file_path = $file ['tmp_name'];
}
}
Pour la saisie de plusieurs fichiers: Essayez ce code:
<form name="form" id="form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]">
<input type="file" name="file[]" >
<input type="text" name="name" id="name">
<input type="text" name="name1" id="name1">
<input type="button" name="submit" value="upload" id="upload">
</form>
$('#upload').on('click', function() {
var fd = new FormData();
var c=0;
var file_data;
$('input[type="file"]').each(function(){
file_data = $('input[type="file"]')[c].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
fd.append("file_"+c, file_data[i]);
}
c++;
});
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
fd.append(input.name,input.value);
});
$.ajax({
url: 'work.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}
});
});