복붙노트

PHP, jQuery 및 AJAX를 사용하여 여러 파일을 업로드하는 방법

PHP

PHP, jQuery 및 AJAX를 사용하여 여러 파일을 업로드하는 방법

나는 사용자가 파일을 서버에 업로드 할 수 있도록 간단한 양식을 설계했다. 처음에는 양식에 '찾아보기'버튼이 하나 있습니다. 사용자가 여러 파일을 업로드하려는 경우 "추가 파일 추가"버튼을 클릭해야 양식에 다른 '찾아보기'버튼이 추가됩니다. 양식이 제출되면 파일 업로드 프로세스는 'upload.php'파일에서 처리됩니다. 그것은 여러 파일을 업로드 완벽하게 작동합니다. 이제 jQuery의 '.submit ()'을 사용하여 양식을 제출하고 파일 업로드를 처리하기 위해 'upload.php'파일에 ajax [ '.ajax ()'] 요청을 보냅니다.

여기에 내 HTML 양식입니다 :

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" id="upload" value="Upload File" />
</form>

다음은 JavaScript입니다.

$(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});

다음은 파일 업로드 처리를위한 코드입니다.

for($i=0; $i<count($_FILES['file']['name']); $i++){
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
    echo "The file has been uploaded successfully <br />";
} else{
    echo "There was an error uploading the file, please try again! <br />";
}

}

내 '.submit ()'함수를 작성하는 방법에 대한 제안은 정말 도움이 될 것입니다.

해결법

  1. ==============================

    1.마지막으로 다음 코드를 사용하여 솔루션을 찾았습니다.

    마지막으로 다음 코드를 사용하여 솔루션을 찾았습니다.

    $('body').on('click', '#upload', function(e){
        e.preventDefault();
        var formData = new FormData($(this).parents('form')[0]);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            success: function (data) {
                alert("Data Uploaded: "+data);
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
});
  2. ==============================

    2.HTML

    HTML

    <form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" value="Upload File" id="upload"/>
</form>

    자바 스크립트

     $(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' type='file'/>");
    });
});

    아약스 업로드 용

    $('#upload').click(function() {
    var filedata = document.getElementsByName("file"),
            formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    var i = 0, len = filedata.files.length, img, reader, file;

    for (; i < len; i++) {
        file = filedata.files[i];

        if (window.FileReader) {
            reader = new FileReader();
            reader.onloadend = function(e) {
                showUploadedItem(e.target.result, file.fileName);
            };
            reader.readAsDataURL(file);
        }
        if (formdata) {
            formdata.append("file", file);
        }
    }
    if (formdata) {
        $.ajax({
            url: "/path to upload/",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(res) {

            },       
            error: function(res) {

             }       
             });
            }
        });

    PHP

    for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

/** 
    Edit: $target_path variable need to be reinitialized and should 
    be inside for loop to avoid appending previous file name to new one. 
*/

    ajax 업로드에는 위의 스크립트를 사용하십시오. 효과가있다.

  3. ==============================

    3.내 솔루션

    내 솔루션

    jQuery 코드

    $('#my_form_id').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    var msg_error = 'An error has occured. Please try again later.';
    var msg_timeout = 'The server is not responding';
    var message = '';
    var form = $('#my_form_id');
    $.ajax({
        data: formData,
        async: false,
        cache: false,
        processData: false,
        contentType: false,
        url: form.attr('action'),
        type: form.attr('method'),
        error: function(xhr, status, error) {
            if (status==="timeout") {
                alert(msg_timeout);
            } else {
                alert(msg_error);
            }
        },
        success: function(response) {
            alert(response);
        },
        timeout: 7000
    });
});
  4. ==============================

    4.HTML

    HTML

     <input type="file" id="multiupload" name="uploadFiledd[]" multiple >
 <button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
 <div id="uploadsts"></div>

    자바 스크립트

    <script>

function uploadajax(ttl,cl){

var fileList = $('#multiupload').prop("files");
$('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

var form_data =  "";

form_data = new FormData();
form_data.append("upload_image", fileList[cl]);


var request = $.ajax({
          url: "upload.php",
          cache: false,
          contentType: false,
          processData: false,
          async: true,
          data: form_data,
          type: 'POST', 
          xhr: function() {  
      var xhr = $.ajaxSettings.xhr();
      if(xhr.upload){ 
        xhr.upload.addEventListener('progress', function(event){
                        var percent = 0;
                        if (event.lengthComputable) {
                            percent = Math.ceil(event.loaded / event.total * 100);
                        }
                        $('#prog'+cl).text(percent+'%')

                    }, false);
       }
      return xhr;
     }    
      })
      .success(function(res,status) {

        if(status == 'success'){

            percent = 0;
            $('#prog'+cl).text('');            

                $('#prog'+cl).text('--Success: ');

            if(cl < ttl){
                uploadajax(ttl,cl+1);
            }else{
               alert('Done ');

            }     

            }

      })
      .fail(function(res) {
      alert('Failed');
      });

}



$('#upcvr').click(function(){

var fileList = $('#multiupload').prop("files");
$('#uploadsts').html('');
var i
for ( i = 0; i < fileList.length; i++) {
$('#uploadsts').append('<p class="upload-page">'+fileList[i].name+'<span class="loading-prep" id="prog'+i+'"></span></p>');
if(i == fileList.length-1){
    uploadajax(fileList.length-1,0);
}
}

});

</script>

    PHP

    upload.php
    move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);

    5. from https://stackoverflow.com/questions/19295746/how-to-upload-multiple-files-using-php-jquery-and-ajax by cc-by-sa and MIT license

'PHP' 카테고리의 다른 글

PHP에서 URL에 대한 POST 데이터  (0) 2018.09.20
URL에 Ajax 요청을 표시하는 방법은 무엇입니까?  (0) 2018.09.20
jQuery $ .ajax를 통해 JavaScript 배열을 PHP에 전달  (0) 2018.09.20
\ w와 \ b 정규식 메타 문자의 차이점  (0) 2018.09.20
PHP를 사용하여 디렉토리에있는 모든 폴더 하위 폴더와 파일 나열  (0) 2018.09.20
,

티스토리툴바