111

<input type="file">フォームをまったく使用せずに、 jQuery を使用した POST メソッドを使用して、「upload.php」にファイルを送信できます。input タグが form タグ内にありません。個別に立っています。そのため、「ajaxForm」や「ajaxSubmit」などの jQuery プラグインは使用したくありません。

4

7 に答える 7

104

FormDataを使用して、POST リクエストでデータを送信できます。簡単な例を次に示します。

var myFormData = new FormData();
myFormData.append('pictureFile', pictureInput.files[0]);

$.ajax({
  url: 'upload.php',
  type: 'POST',
  processData: false, // important
  contentType: false, // important
  dataType : 'json',
  data: myFormData
});

リクエストの設定 (URL、メソッド、パラメータ データなど) がわかっている限り、フォームを使用して ajax リクエストを行う必要はありません。

于 2014-11-01T15:14:06.673 に答える
42

ここでのすべての回答は、まだFormData APIを使用しています。"multipart/form-data"フォームのないアップロードのようなものです。次のようにPOST使用して、リクエストの本文内のコンテンツとしてファイルを直接アップロードすることもできます。xmlHttpRequest

var xmlHttpRequest = new XMLHttpRequest();

var file = ...file handle...
var fileName = ...file name...
var target = ...target...
var mimeType = ...mime type...

xmlHttpRequest.open('POST', target, true);
xmlHttpRequest.setRequestHeader('Content-Type', mimeType);
xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');
xmlHttpRequest.send(file);

Content-TypeContent-Dispositionヘッダーは、送信する内容 (MIME タイプとファイル名) を説明するために使用されます。

ここにも同様の回答を投稿しました。

于 2015-01-29T10:45:15.653 に答える
14

このチュートリアルに基づいて、これを行うための非常に基本的な方法を次に示します。

$('your_trigger_element_selector').on('click', function(){    
    var data = new FormData();
    data.append('input_file_name', $('your_file_input_selector').prop('files')[0]);
    // append other variables to data if you want: data.append('field_name_x', field_value_x);

    $.ajax({
        type: 'POST',               
        processData: false, // important
        contentType: false, // important
        data: data,
        url: your_ajax_path,
        dataType : 'json',  
        // in PHP you can call and process file in the same way as if it was submitted from a form:
        // $_FILES['input_file_name']
        success: function(jsonData){
            ...
        }
        ...
    }); 
});

適切なエラー処理を追加することを忘れないでください

于 2014-10-25T20:20:42.180 に答える
2

この puglin simpleUploadを試してください。フォームは必要ありません

HTML:

<input type="file" name="arquivo" id="simpleUpload" multiple >
<button type="button" id="enviar">Enviar</button>

Javascript:

$('#simpleUpload').simpleUpload({
  url: 'upload.php',
  trigger: '#enviar',
  success: function(data){
    alert('Envio com sucesso');

  }
});
于 2014-04-13T01:49:55.770 に答える
2

Sorry for being that guy but AngularJS offers a simple and elegant solution.

Here is the code I use:

ngApp.controller('ngController', ['$upload',
function($upload) {

  $scope.Upload = function($files, index) {
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        file: file,
        url: '/File/Upload',
        data: {
          id: 1 //some data you want to send along with the file,
          name: 'ABC' //some data you want to send along with the file,
        },

      }).progress(function(evt) {

      }).success(function(data, status, headers, config) {
          alert('Upload done');
        }
      })
    .error(function(message) {
      alert('Upload failed');
    });
  }
};
}]);
.Hidden {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-controller="ngController">
  <input type="button" value="Browse" onclick="$(this).next().click();" />
  <input type="file" ng-file-select="Upload($files, 1)" class="Hidden" />
</div>

On the server side I have an MVC controller with an action the saves the files uploaded found in the Request.Files collection and returning a JsonResult.

If you use AngularJS try this out, if you don't... sorry mate :-)

于 2014-11-03T09:28:09.427 に答える