Ajax를 사용하여 데이터와 파일을 한 형태로 업로드하시겠습니까?

Ajax를 사용하여 데이터와 파일을 한 형태로 업로드하시겠습니까?

데이터와 파일을 제출하기 위해 양식에 jQuery와 Ajax를 사용하고 있는데 데이터와 파일을 모두 하나의 형식으로 보내는 방법을 잘 모르겠습니다.

현재 두 가지 방법을 거의 동일하게 사용하고 있지만 데이터를 배열로 수집하는 방법은 다릅니다..serialize();그러나 파일은= new FormData($(this)[0]);

Ajax를 통해 파일과 데이터를 하나의 형태로 업로드 할 수 있도록 두 가지 방법을 조합할 수 있습니까?

Data jQuery, Ajax 및 html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

jQuery, Ajax 및 html 파일

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

어떻게 하면 Ajax를 통해 데이터와 파일을 하나의 형태로 보낼 수 있을까요?

저는 이 양식을 모두 Ajax와 한 번에 보낼 수 있는 것을 목표로 하고 있습니다만, 가능할까요?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

문제는 잘못된 jQuery 식별자를 사용하는 것이었습니다.

Ajax를 사용하여 하나의 형식으로 데이터와 파일을 업로드할 수 있습니다.

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

쇼트 버전

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

또 다른 옵션은 iframe을 사용하여 폼의 대상을 설정하는 것입니다.

다음과 같이 시도할 수 있습니다(jQuery 사용).

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

모든 브라우저에서 잘 작동하므로 데이터를 직렬화하거나 준비할 필요가 없습니다.한 가지 단점은 진행상황을 감시할 수 없다는 것입니다.

또한 적어도 크롬의 경우 개발자 도구의 "xhr" 탭에는 요청이 표시되지 않고 "doc" 아래에 표시됩니다.

ASP에서도 같은 문제가 있었습니다.HttpPostedFilebase를 사용하여 Net MVC를 실행하고 Submit에서 폼을 사용하는 대신 필요한 작업을 수행할 수 있는 버튼을 클릭해야 했습니다.그 후, 모든 것이 OK인 경우는, 다음과 같이 조작할 수 있었습니다.

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

MVC 모델이 올바르게 입력되는 것보다 더 많이 입력됩니다.모델에서 HttpPPostedFileBase []의 속성이 html의 입력 컨트롤 이름과 동일한 이름인지 확인하십시오.

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}

또는 단축:

$("form#data").submit(function() {
    var formData = new FormData(this);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});

편집: JQuery의 새로운 버전(3.6)에서는 콘텐츠를 사용해 볼 수도 있습니다.function 인수를 대신 입력합니다.enctype.해라contentType: multipart/form-data.

---

나한텐 그게 없으면 안 되더라고enctype: 'multipart/form-data'필드를 지정합니다.나는 그것이 비슷한 문제에 처한 사람에게 도움이 되기를 바란다.

이 경우에도enctype 어떤 이유로 Ajax 요구는 자동으로 식별되지 않았습니다.enctype(jQuery 3.3.1).

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >
     
     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

위에서 언급한 바와 같이 특히 주의하시기 바랍니다.contentType ★★★★★★★★★★★★★★★★★」processData[ ]이렇게 하다

new FormData()용기(또는 가방)와 같은 것입니다.모든 속성이나 파일을 저장할 수 있습니다. 한 가지 가 필요한 것은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★attribute, file, fileName ::

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

에이잭스 ::

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

FormData를 사용하여 n개의 파일 또는 데이터를 추가할 수 있습니다.

에서 Node Script.js "Node.js" Route "AJAX"를 사용하지 하십시오.
req.body
req.files(이미지, 등

참고로 2022년에는 jquery를 사용할 필요가 없습니다.js 표준 Fetch API 시행

    var formData = new FormData(this);

    fetch(url, { 
      method: 'POST',
      body: formData
    })
    .then(response => {
      if(response.ok) {
        //success
        alert(response);
      } else {
        throw Error('Server error');
      }
    })
    .catch(error => {
       console.log('fail', error);
    });

아래 코드가 유효합니다.

$(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

Action Post Method에서 매개 변수를 HttpPosted FileBase Upload File로 전달하고 파일 입력이 Action Method 매개 변수와 동일한지 확인합니다.AJAX Begin 폼에서도 동작합니다.

여기서 AJAX BEGIN Form은 위에서 설명한 코드에 정의된 포스트 콜을 하고 요건에 따라 코드에서 메서드를 참조할 수 있으므로 여기서 작동하지 않습니다.

답장이 늦은건 알지만 이게 나한테 효과가 있었어.

이것은 내가 구현한 솔루션이다.

var formData = new FormData();
var files = $('input[type=file]');
for (var i = 0; i < files.length; i++) {
if (files[i].value == "" || files[i].value == null) {
    return false;
}
else {
    formData.append(files[i].name, files[i].files[0]);
}
}
var formSerializeArray = $("#Form").serializeArray();
for (var i = 0; i < formSerializeArray.length; i++) {
  formData.append(formSerializeArray[i].name, formSerializeArray[i].value)
}
$.ajax({
 type: 'POST',
 data: formData,
 contentType: false,
 processData: false,
 cache: false,
 url: '/Controller/Action',
 success: function (response) {
    if (response.Success == true) {
        return true;
    }
    else {
        return false;
    }
 },
 error: function () {
    return false;
 },
 failure: function () {
    return false;
 }
 });

제 경우, POST 요청을 해야 했습니다. POST 요청에는 헤더를 통해 정보가 전송되고 FormData 객체를 사용하여 파일이 전송되었습니다.

여기 있는 몇 가지 답변을 조합하여 작업을 수행했기 때문에 기본적으로는 Ajax 요청에 다음 다섯 줄을 포함시켰습니다.

 contentType: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

여기서 formData는 다음과 같이 작성된 변수입니다.

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);

폼 데이터에 파일 및 데이터를 추가할 수 있습니다.이걸 읽을 수 있어요.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

더 나은 이해를 위해.파일용 $_FILE과 데이터용 $_POST를 개별적으로 검색할 수 있습니다.

<form id="form" method="post" action="otherpage.php" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

//// 기타 페이지php

<?php
    print_r($_FILES);
?>

언급URL : https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax