programing

HTML5 다중 파일 업로드: AJAX를 통해 하나씩 업로드

elseif 2023. 4. 4. 21:05

HTML5 다중 파일 업로드: AJAX를 통해 하나씩 업로드

여러 파일 업로드 폼이 있습니다.

<input type="file" name="files" multiple />

저는 이 파일들을 에이잭스와 함께 올립니다.선택한 파일을 1개씩 업로드하고 싶습니다(개별 진행 표시줄을 작성하기 위해, 궁금해서).

파일 또는 개별 파일 목록을 다음 방법으로 가져올 수 있습니다.

FL = form.find('[type="file"]')[0].files
F  = form.find('[type="file"]')[0].files[0]

점등하고 있다

FileList { 0=File, 1=File, length=2 }
File { size=177676, type="image/jpeg", name="img.jpg", more...}

하지만 FileList는 불변하기 때문에 단일 파일을 제출하는 방법을 알 수 없습니다.

저는 http://blueimp.github.com/jQuery-File-Upload/을 봤기 때문에 가능하다고 생각합니다.저는 이 플러그인을 사용하고 싶지 않습니다만, 결과만큼 학습이 중요하기 때문에(어쨌든 커스터마이징이 너무 많이 필요하게 됩니다.플래시도 사용하고 싶지 않습니다.

동기 조작을 실시하려면 , 마지막 전송이 완료되었을 때에 새로운 전송을 개시할 필요가 있습니다.예를 들어 Gmail은 모든 것을 동시에 전송합니다.AJAX 파일 업로드 진행에 대한 이벤트는 다음과 같습니다.progress또는onprogress미가공부하여XmlHttpRequest사례.

그래서 각자 다음에$.ajax()서버측에서(사용할 수 있는 것은 알 수 없습니다), JSON 응답을 송신해, 다음의 입력시에 AJAX 를 실행합니다.하나의 옵션은 AJAX 요소를 각 요소에 바인드하여 작업을 쉽게 할 수 있도록 하는 것입니다.success그$(this).sibling('input').execute_ajax().

다음과 같은 경우:

$('input[type="file"]').on('ajax', function(){
  var $this = $(this);
  $.ajax({
    'type':'POST',
    'data': (new FormData()).append('file', this.files[0]),
    'contentType': false,
    'processData': false,
    'xhr': function() {  
       var xhr = $.ajaxSettings.xhr();
       if(xhr.upload){ 
         xhr.upload.addEventListener('progress', progressbar, false);
       }
       return xhr;
     },
    'success': function(){
       $this.siblings('input[type="file"]:eq(0)').trigger('ajax');
       $this.remove(); // remove the field so the next call won't resend the same field
    }
  });
}).trigger('ajax');  // Execute only the first input[multiple] AJAX, we aren't using $.each

위의 코드는 여러 개에 해당됩니다.<input type="file">을 위해서가 아니다<input type="file" multiple>이 경우 다음과 같이 해야 합니다.

var count = 0;

$('input[type="file"]').on('ajax', function(){
  var $this = $(this);
  if (typeof this.files[count] === 'undefined') { return false; }

  $.ajax({
    'type':'POST',
    'data': (new FormData()).append('file', this.files[count]),
    'contentType': false,
    'processData': false,
    'xhr': function() {  
       var xhr = $.ajaxSettings.xhr();
       if(xhr.upload){ 
         xhr.upload.addEventListener('progress', progressbar, false);
       }
       return xhr;
     },
    'success': function(){
       count++;
       $this.trigger('ajax');
    }
  });
}).trigger('ajax'); // Execute only the first input[multiple] AJAX, we aren't using $.each

이것은 매우 좋은 튜토리얼인 것 같습니다.당신이 찾고 있는 것입니다.

단, 모든 브라우저에서 vanilla ajax를 통한 업로드가 지원되는 것은 아닙니다.또한,iframe(I.E는 동적으로 iframe을 생성하여 javascript를 사용하여 POST합니다.)

나는 항상 이 대본을 사용해왔고 매우 간결하다는 것을 알았다.iframe을 생성하여 업로드하는 방법을 배우고 싶다면, iframe의 소스를 조사해야 합니다.

도움이 되었으면 좋겠다:)

추가 편집

iframe 메서드를 사용하여 진행 표시줄을 만들려면 서버 측에서 몇 가지 작업을 수행해야 합니다.php를 사용하는 경우 다음을 사용할 수 있습니다.

nginx를 사용하는 경우 업로드 진행 모듈을 사용하여 컴파일할 수도 있습니다.

이 모든 것은 동일한 방식으로 작동합니다. 업로드할 때마다 UID가 지정되며, 일정 간격으로 Ajax를 통해 해당 ID와 관련된 '진행'을 요청합니다.서버에 의해 결정된 업로드 진행 상황이 반환됩니다.

저도 같은 문제에 직면해서 이 해결책을 찾았습니다.multipart를 사용하여 폼을 가져오고 재귀 호출(file afile)에서 ajax 요청을 시작합니다.이 요청은 완료 시에만 호출됩니다.

var form = document.getElementById( "uploadForm" );
var fileSelect = document.getElementById( "photos" );
var uploadDiv = document.getElementById( "uploads" );

form.onsubmit = function( event ) {
    event.preventDefault(  );

    var files = fileSelect.files;
    handleFile( files, 0 );
};

function handleFile( files, index ) {
    if( files.length > index ) {
        var formData = new FormData(  );
        var request = new XMLHttpRequest(  );

        formData.append( 'photo', files[ index ] );
        formData.append( 'serial', index );
        formData.append( 'upload_submit', true );

        request.open( 'POST', 'scripts/upload_script.php', true );
        request.onload = function(  ) {
            if ( request.status === 200 ) {
                console.log( "Uploaded" );
                uploadDiv.innerHTML += files[ index ].name + "<br>";
                handleFile( files, ++index );
            } else {
                console.log( "Error" );
            }
        };
        request.send( formData );
    }
}

이 소스 코드를 사용하면 구글과 같은 여러 파일을 Ajax를 통해 하나씩 업로드 할 수 있습니다.업로드 진행 상황도 확인할 수 있습니다.

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"]);

HTML 코드

<div class="row">
    <form id="singleUploadForm" name="singleUploadForm" style="float: right; padding-right: 25px">
        <input style="float: left;" id="singleFileUploadInput" type="file" name="files" class="file-input btn btn-default" required multiple/>
        <button style="float: left" type="submit" class="btn .btn-primary">Upload</button>
    </form>
</div>

자바스크립트 코드

$('#mutipleUploadForm').submit(function (event) {
    var formElement = this;
    var formData = new FormData(formElement);
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/uploadFile",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            alert("Image Uploaded Successfully");

            location.reload();
        },
        error: function (error) {
            console.log(error);
            // process error
        }
    });
    event.preventDefault();
});

스프링 컨트롤러 클래스

@PostMapping("/uploadFile")
@ResponseBody
public boolean uploadMutipleFiles(@RequestParam("file") MultipartFile[] file) {
    List<Boolean> uploadStatusList = new ArrayList<>();
    for (MultipartFile f : file) {
        uploadStatusList.add(uploadFile(f));
    }
    return !uploadStatusList.contains(false);
}

public boolean uploadFile(@RequestParam("file") MultipartFile file) {
    boolean uploadStatus = galleryService.storeFile(file);
    return uploadStatus;
}

스프링 서비스 클래스

public boolean storeFile(MultipartFile file) {
    boolean uploadStatus = false;
    try {
        String fileName = file.getOriginalFilename();
        InputStream is = file.getInputStream();
        Files.copy(is, Paths.get(imagesDirectory + fileName), StandardCopyOption.REPLACE_EXISTING);
        System.out.println("File store success");
        uploadStatus = true;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return uploadStatus;
}

언급URL : https://stackoverflow.com/questions/13656066/html5-multiple-file-upload-upload-one-by-one-through-ajax

'programing' 카테고리의 다른 글

각도로 문자열 길이 제한JS  (0) 2023.04.04
Woocommace mySQL 쿼리 - 모든 주문, 사용자 및 구매한 아이템 나열  (0) 2023.04.04
OpenCart에서 간단한 모듈을 만드는 방법Wordpress에서 최신 게시물을 가져와 OpenCart에 표시하는 예?  (0) 2023.04.04
Spring 앱의 옵션 환경 변수  (0) 2023.04.04
값이 null이 아닌 Mongoose 쿼리  (0) 2023.04.04

'programing'의 다른글

  • 현재글HTML5 다중 파일 업로드: AJAX를 통해 하나씩 업로드

관련글

댓글

티스토리툴바