programing

Jquery/AJAX를 통한 파일 업로드 방법

codeshow 2023. 8. 30. 22:20
반응형

Jquery/AJAX를 통한 파일 업로드 방법

현재 AJAX를 통해 다음 코드로 양식을 게시하고 있습니다.

$(document).ready(function(){
    $("form#createForm").submit(function() { // loginForm is submitted
        $("form#createForm input#createForm_submit").attr('disabled','disabled');

        tinyMCE.triggerSave();

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "perform", // URL of the Perl script
            data: $("#createForm").serialize(),

            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data){

                $('div.form-group').each(function(){
                    $(this).removeClass('has-error');
                });

                if (data.error) { // script returned error
                    var myList = $('ul.msg-list').empty();

                    $.each(data.msg, function(key,item) {
                        $("div."+key).addClass('has-error');
                        $('<li>').text(item.errtxt).appendTo(myList);
                    });


                    $('div#create_createresult').html('some error').html(myList);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                } // if
                else 
                { // login was successful
                    //$('form#login_loginform').hide();
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");

                } //else
            } // success
        }); // ajax
        $('div#login_loginresult').fadeIn();
        return false;
    });
});

이제 동일한 양식으로 사진을 업로드할 수 있는 가능성을 추가하고 이 JQUERY 및 동일한 서버 측 스크립트에서 구현합니다.제 유일한 문제는 어떻게 해야 할지 모른다는 거예요위에서 테스트한 결과 $_FILES 변수가 서버 쪽 스크립트에 전달되지 않습니다.

이 스크립트로 이미지 업로드 가능성을 추가하기 위해 제가 해야 할 일을 지시할 수 있는 사람이 있습니까?

이것을 사용해 보세요.

// grab your file object from a file input
$('#fileInput').change(function () {
  sendFile(this.files[0]);
});

// can also be from a drag-from-desktop drop
$('dropZone')[0].ondrop = function (e) {
  e.preventDefault();
  sendFile(e.dataTransfer.files[0]);
};

function sendFile(file) {
  $.ajax({
    type: 'post',
    url: '/targeturl?name=' + file.name,
    data: file,
    success: function () {
      // do something
    },
    xhrFields: {
      // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet)
      onprogress: function (progress) {
        // calculate upload progress
        var percentage = Math.floor((progress.total / progress.totalSize) * 100);
        // log upload progress to console
        console.log('progress', percentage);
        if (percentage === 100) {
          console.log('DONE!');
        }
      }
    },
    processData: false,
    contentType: file.type
  });
}

언급URL : https://stackoverflow.com/questions/19920322/how-to-upload-file-through-jquery-ajax

반응형