JQuery AJAX를 통해 FormData와 문자열 데이터를 함께 전송하시겠습니까?

JQuery AJAX를 통해 FormData와 문자열 데이터를 함께 전송하시겠습니까?

파일을 게시하고 문자열 데이터를 입력하려면FormData()예를 들어 서버에 전송해야 하는 다른 숨겨진 입력 데이터가 많이 있습니다.

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>

아래의 코드로는 파일 데이터만 보낼 수 있고 숨겨진 입력 데이터는 보낼 수 없습니다.

쿼리,

// 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.displaces

print_r($_FILES);
print_r($_POST);

결과,

Array
(
    [file] => Array
        (
            [name] => xxx.doc
            [type] => application/msword
            [tmp_name] => C:\wamp\tmp\php7C24.tmp
            [error] => 0
            [size] => 11776
        )

)

하지만 저는 이것을 제 결과로 받고 싶습니다.

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
    ...
)

가능합니까?

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);
    }
});

a를 추가했습니다.for루프 및 변경.serialize()로..serializeArray()오브젝트 참조용으로.each()에 추가하다FormData.

더 쉽고 짧은 대안으로, 이것도 할 수 있어!!

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);
    }
});

저는 항상 이걸 써요.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)
        {

        }
    });
});

저는 이 포럼에서 제 친구와 코드 콜라보레이션의 수정에 기여하려고 합니다.

$('#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);
                   }
               });
           });

이것은 나의 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">

이 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]);
    }

}
?>

나는 같은 문제를 가진 사람들이 이 문제를 빨리 해결할 수 있기를 바란다.여러 업로드 이미지 때문에 머리가 아파요.

제가 알기론 이미지와 입력값을 함께 보내주시기를 희망하시는 것으로 알고 있습니다.이 코드가 잘 작동하니 앞으로 누군가 도움이 되었으면 좋겠어요.

<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);
}});

미리보기와 함께 Ajax 다중 업로드에 대한 짧은 코드를 보세요.

https://santanamic.github.io/ajax-multiple-upload/

다음과 같이 시험해 보십시오.

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

Multiple file input의 경우: 다음 코드를 사용해 보십시오.

 <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);
         }
     });
 });

Ajax에 여러 파일이 있는 경우 다음과 같이 하십시오.

        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
                }
        })

인 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'];
              }
        }

 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);
    }
});

(ModelState가 서버에서 false인 경우 등) 서버에 다시 페이지 투고를 하면 서버에 오래된 가치가 있다는 것을 알게 되었습니다.그래서 나는 그 해결책을 찾았다.

   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);
        }
    });

나는 아래의 논리로 나의 문제를 해결했다.

var ObjformData   = new FormData(document.getElementById('Form1'));  // form 1 data
var ArrayformData = $('#Form2').serializeArray();  // form 2 data

// merging form 2 data into form1 data 
$.each(formDataObj2, function (key, input)
    {
        if (formDataObj1.has(input.name)) {
            formDataObj1.set(input.name, input.value);
        } else {
            formDataObj1.append(input.name, input.value);
        }
 });


   // file data output
   console.log(ObjformData);

Ajax를 사용하여 이미지를 업로드하기 위해 이 작업을 수행했습니다.내 경우 from1의 이미지는 여러 개, form2는 일반 사용자 입력만으로 30개 이상의 필드를 입력할 수 있습니다.이것은 Happy Coding에 도움이 될 것입니다:)

언급URL : https://stackoverflow.com/questions/21060247/send-formdata-and-string-data-together-through-jquery-ajax