フォームなしでファイルをアップロード

Question

フォームを一切使用せずに、<input type="file">からjQueryを使用してPOSTメソッドを使用して 'upload.php'にファイル/ファイルを送信することはできますか？入力タグがフォームタグ内にありません。それは個別に立つ。ですから、私は 'ajaxForm'や 'ajaxSubmit'のようなjQueryプラグインを使いたくありません。

Answer 1

このpuglin simpleUpload、不要フォーム

Htmlの試してみてください。それを行うことは非常に基本的な方法

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

    } 
}); 

Answer 2

ベイシング上this tutorial、ここに：

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

Javascriptを

$('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){ 
      ... 
     } 
     ... 
    }); 
}); 

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

Answer 3

FormDataを使用すると、POSTリクエストでデータを送信できます。あなたは（URL、メソッドおよびパラメータデータのように）あなたの要求の設定を知っている限り、AJAXリクエストを作るために、フォームを使用する必要はありません

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 
}); 

：ここでは簡単な例です。

Answer 4

申し訳ありませんが、その男ですが、AngularJSはシンプルで洗練されたソリューションを提供しています。ファイルはRequest.Filesコレクションと帰国で見つけてアップロード節約

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>

サーバー側では、私はアクションでMVCコントローラを持っています。ここでは

は、私が使用するコードですJsonResult

あなたはAngularJSを使用している場合は、申し訳ありません...ここにすべての答えはまだFormData APIを使用している

Answer 5

:-)交尾していない場合は、これを試してみてください。これは、フォームなしのフォームファイルアップロードのようなものです。また、このようなxmlHttpRequestを使用してPOSTリクエストのボディ内のコンテンツとして直接ファイルをアップロードすることができます

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-TypeとContent-Dispositionヘッダは、我々は（MIMEタイプおよびファイル名）を送信しているものを説明するために使用されています。

私は同様の回答を投稿しましたhere。

Answer 6

ステップ1：HTMLコードを配置するHTMLページを作成します。

ステップ2：HTMLコードページの下端（フッター）にJavascriptを作成し、スクリプトタグにJquery Codeを挿入します。

手順3：PHPファイルとPHPコードのコピーを過去に作成する。 Jqueryコードの後に​​$.ajaxコードURLは、あなたのPHPファイル名に適用されます。

JS

//$(document).on("change", "#avatar", function() { // If you want to upload without a submit button 
$(document).on("click", "#upload", function() { 
    var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field 
    var form_data = new FormData(); // Creating object of FormData class 
    form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data 
    form_data.append("user_id", 123) // Adding extra parameters to form_data 
    $.ajax({ 
    url: "/upload_avatar", // Upload Script 
    dataType: 'script', 
    cache: false, 
    contentType: false, 
    processData: false, 
    data: form_data, // Setting the data attribute of ajax with file_data 
    type: 'post', 
    success: function(data) { 
     // Do something after Ajax completes 
    } 
    }); 
}); 

HTML

<input id="avatar" type="file" name="avatar" /> 
<button id="upload" value="Upload" /> 

PHPの

print_r($_FILES); 
print_r($_POST);