web-dev-qa-db-ja.com

HTML5複数ファイルのアップロード：AJAX

複数のファイルのアップロードフォームがあります。

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

これらのファイルをajaxで投稿しています。選択したファイルを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/ 。このプラグインを使用したくないのは、結果と同じくらい学習についてであるからです（とにかく、あまりにも多くの刺激が必要になるでしょう）。フラッシュも使いたくないです。

jqueryhtmlajaxfile-uploadasyncfileupload
29
Mark

これを同期操作にするには、最後の転送が完了したときに新しい転送を開始する必要があります。たとえば、Gmailはすべてを一度に同時に送信します。 AJAXファイルのアップロードの進行状況に関するイベントは、未加工のprogressインスタンスではonprogressまたはXmlHttpRequestです。

したがって、各$.ajax()の後に、サーバー側（何を使用するかわからない）で、JSON応答を送信してAJAX on the次の入力。1つのオプションは、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
31
pocesar

これは非常に優れたチュートリアルのように見えますが、まさにあなたが探しているものです 。

ただし、Vanilla ajaxを使用したアップロードはすべてのブラウザでサポートされているわけではないため、iframeの使用をお勧めします。 （つまり、iframeを動的に作成し、POST JavaScriptを使用してそれを作成します）

私は常にこのスクリプトを使用しています とても簡潔です。 iframeを作成してアップロードする方法を学びたい場合は、そのソースを調べてください。

それが役に立てば幸い ：）

追加編集

Iframeメソッドでプログレスバーを作成するには、サーバー側でいくつかの作業を行う必要があります。 PHPを使用している場合は、以下を使用できます。

Nginxを使用する場合は、コンパイルを選択することもできます アップロード進行モジュール

これらはすべて同じように機能します。すべてのアップロードにはUIDがあり、そのIDに関連付けられた「進行状況」をajaxを介して一定の間隔で要求します。これにより、サーバーによって決定されたアップロードの進行状況が返されます。

8
Nathan Kot

私は同じ問題に直面していて、この解決策を思いつきました。私は単にマルチパートでフォームを取得し、再帰呼び出し（file after file）で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 );
    }
}
4
hluchjak

このソースコードを使用すると、Googleのような複数のファイルをajaxを介して1つずつアップロードできます。アップロードの進行状況も確認できます

[〜＃〜] 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>

Javascript

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

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>

JavaScriptコード

$('#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;
}
0
Shreyas