jquery 직렬화를 사용하여 파일 업로드를 수행하는 방법

그래서 양식이 있고 jquery 직렬화 기능을 사용하여 ajax를 통해 양식을 제출하고 있습니다.

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",
        cache   : false,
        url     : "blah",
        data        : serialized,
        success: function(data) {

        }

그러나 양식에 <input type="file">필드 가 있으면 어떻게해야합니까 ...이 ajax 직렬화 방법을 사용하여 파일을 양식에 전달하는 방법 ... $ _FILES 인쇄는 아무것도 출력하지 않습니다

AJAX를 사용하여 파일을 업로드 할 수 없습니다. 클라이언트 컴퓨터에 저장된 파일의 내용에 액세스 할 수없고 javascript를 사용하여 요청으로 보낼 수 없기 때문입니다. 이를 달성하는 기술 중 하나는 숨겨진 iframe을 사용하는 것입니다. 양식 을 AJAXify하고 파일 업로드 도 지원 하는 멋진 jquery 양식 플러그인 이 있습니다 . 따라서이 플러그인을 사용하면 코드가 다음과 같이 표시됩니다.

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

플러그인 submit은 양식 의 이벤트 구독 , 기본 제출 취소, 값 직렬화, 적절한 방법 사용 및 파일 업로드 필드 처리 등을 자동으로 처리합니다.

FormData개체 사용 모든 유형의 형식에 대해 작동합니다.

$(document).on("submit", "form", function(event)
{
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {
            

        }
    });        

});

   var form = $('#job-request-form')[0];
        var formData = new FormData(form);
        event.preventDefault();
        $.ajax({
            url: "/send_resume/", // the endpoint
            type: "POST", // http method
            processData: false,
            contentType: false,
            data: formData,

그것은 나를 위해 일했습니다! processData 및 contentType False를 설정하십시오.

HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
    <input id="name" name="name" placeholder="Enter Name" type="text" value="">
    <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
    <select name="gender" id="gender">
        <option value="male" selected="selected">Male</option>
        <option value="female">Female</option>
    </select>
    <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>

자바 스크립트

var data = new FormData();

//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
    data.append(input.name, input.value);
});

//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
    data.append("my_images[]", file_data[i]);
}

//Custom data
data.append('key', 'value');

$.ajax({
    url: "URL",
    method: "post",
    processData: false,
    contentType: false,
    data: data,
    success: function (data) {
        //success
    },
    error: function (e) {
        //error
    }
});

PHP

<?php
    echo '<pre>';
    print_r($_POST);
    print_r($_FILES);
    echo '</pre>';
    die();
?>

FormData 메서드를 사용하여 AJAX를 통해 파일을 업로드 할 수 있습니다. IE7,8 및 9는 FormData 기능을 지원하지 않습니다.

$.ajax({
    url: "ajax.php", 
    type: "POST",             
    data: new FormData('form'),
    contentType: false,       
    cache: false,             
    processData:false, 
    success: function(data) {
        $("#response").html(data);
    }
});

$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
    type: "POST",
    data: formData,
    dataType: "json",
    url: form.attr('action'),
    processData: false,
    contentType: false,
    success: function(data) {
         alert('Sucess! Form data posted with file type of input also!');
    }
)};});

파일 입력으로 양식의 ajax 호출 제출 을 사용 new FormData()하고 설정 함으로써 processData: false, contentType:false나를 위해 일했습니다.

위의 코드를 사용하여 Ajax를 통해 파일 필드와 함께 양식 데이터를 제출할 수 있습니다.

흠 나는 사람들이 FormData 지원 브라우저 뿐만 아니라 모든 브라우저를 대상으로하고 싶어하는 사람들을 위해 특별히 만드는 훨씬 효율적인 방법이 있다고 생각 합니다.

페이지에 IFRAME 을 숨기고 From inside IFrame 예제에 대한 일반 제출을 하는 아이디어

<FORM action='save_upload.php' method=post
   enctype='multipart/form-data' target=hidden_upload>
   <DIV><input
      type=file name='upload_scn' class=file_upload></DIV>
   <INPUT
      type=submit name=submit value=Upload /> <IFRAME id=hidden_upload
      name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'
      style='width:0;height:0;border:0px solid #fff'></IFRAME> 
</FORM>

숨겨진 iframe ID 또는 이름 과 enctype multipart / form-data 를 형식의 대상으로 만들어 사진을 허용하는 것이 가장 중요합니다.

자바 스크립트 측

function getFrameByName(name) {
    for (var i = 0; i < frames.length; i++)
        if (frames[i].name == name)
            return frames[i];

    return null;
}

function uploadDone(name) {
    var frame = getFrameByName(name);
    if (frame) {
        ret = frame.document.getElementsByTagName("body")[0].innerHTML;

        if (ret.length) {
            var json = JSON.parse(ret);
         // do what ever you want 
        }
    }
}

서버 측 예제 PHP

<?php
  $target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);

  if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
    $result = ....
  }

echo json_encode($result);
?>

HTML5는 FormDataajax로 파일을 업로드하는 데 사용할 수있는 클래스를 도입했습니다 .

FormData 지원은 다음 데스크톱 브라우저 버전에서 시작됩니다. IE 10 이상, Firefox 4.0 이상, Chrome 7 이상, Safari 5 이상, Opera 12 이상

FormData-Mozilla.org