อัปโหลดไฟล์โดยไม่มีแบบฟอร์ม

โดยไม่ต้องใช้รูปแบบใด ๆ ฉันสามารถส่งไฟล์ / ไฟล์จาก<input type="file">ไปที่ 'upload.php' โดยใช้วิธี POST โดยใช้ jQuery แท็กอินพุตไม่ได้อยู่ในแท็กฟอร์มใด ๆ มันยืนเป็นรายบุคคล ดังนั้นฉันไม่ต้องการใช้ปลั๊กอิน jQuery เช่น 'ajaxForm' หรือ 'ajaxSubmit'

คุณสามารถใช้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
});

คุณไม่จำเป็นต้องใช้แบบฟอร์มเพื่อสร้างคำขอ ajax ตราบใดที่คุณทราบการตั้งค่าคำขอของคุณ (เช่นข้อมูล url วิธีการและพารามิเตอร์)

คำตอบทั้งหมดในที่นี้จะยังคงใช้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-TypeและContent-Dispositionส่วนหัวใช้สำหรับอธิบายสิ่งที่เรากำลังส่ง (ประเภท mime และชื่อไฟล์)

ฉันโพสต์คำตอบที่คล้ายกันไว้ที่นี่ด้วย

จากบทช่วยสอนนี้นี่เป็นวิธีพื้นฐานในการดำเนินการ:

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

อย่าลืมเพิ่มการจัดการข้อผิดพลาดที่เหมาะสม

ขั้นตอนที่ 1: สร้างเพจ HTML ที่จะวางโค้ด HTML

ขั้นตอนที่ 2: ในหน้าโค้ด HTML ด้านล่าง (ส่วนท้าย) สร้าง Javascript: และใส่ Jquery Code ในแท็กสคริปต์

ขั้นตอนที่ 3: สร้างไฟล์ PHP และคัดลอกโค้ด php ที่ผ่านมา หลังจาก Jquery Code ใน$.ajaxCode 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);

ลองใช้ 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');

  }
});

ขออภัยที่เป็นผู้ชายคนนั้นแต่ AngularJS นำเสนอโซลูชันที่เรียบง่ายและสง่างาม

นี่คือรหัสที่ฉันใช้:

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 พร้อมการดำเนินการที่บันทึกไฟล์ที่อัปโหลดที่พบใน Request.Files collection และส่งคืน JsonResult

หากคุณใช้ AngularJS ลองใช้สิ่งนี้หากคุณไม่ ... ขอโทษเพื่อน :-)