Tải lên tệp mà không cần biểu mẫu

Không cần sử dụng bất kỳ biểu mẫu nào, tôi có thể chỉ gửi một tệp / tệp từ <input type="file">đến 'upload.php' bằng phương thức POST bằng jQuery. Thẻ đầu vào không nằm trong bất kỳ thẻ biểu mẫu nào. Nó đứng riêng lẻ. Vì vậy, tôi không muốn sử dụng các plugin jQuery như 'ajaxForm' hoặc 'ajaxSubmit'.

Bạn có thể sử dụng FormData để gửi dữ liệu của mình theo yêu cầu ĐĂNG. Đây là một ví dụ đơn giản:

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

Bạn không cần phải sử dụng biểu mẫu để thực hiện yêu cầu ajax, miễn là bạn biết cài đặt yêu cầu của mình (như dữ liệu url, phương thức và tham số).

Tất cả các câu trả lời ở đây vẫn đang sử dụng API FormData . Nó giống như một "multipart/form-data"tải lên không có biểu mẫu. Bạn cũng có thể tải tệp lên trực tiếp dưới dạng nội dung bên trong nội dung của POSTyêu cầu bằng cách sử dụng xmlHttpRequestnhư sau:

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-Typevà Content-Dispositiontiêu đề được sử dụng để giải thích những gì chúng tôi đang gửi (loại mime và tên tệp).

Tôi đã đăng câu trả lời tương tự cũng ở đây .

Dựa trên hướng dẫn này , đây là một cách rất cơ bản để làm điều đó:

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

Đừng quên thêm cách xử lý lỗi thích hợp

Bước 1: Tạo Trang HTML nơi đặt Mã HTML.

Bước 2: Trong HTML Code Page Bottom (footer) Tạo Javascript: và đặt Jquery Code trong thẻ Script.

Bước 3: Tạo tập tin PHP và sao chép mã php qua. sau khi mã Jquery trong $.ajaxurl mã áp dụng cái nào trên tên tệp php của bạn.

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

Hãy thử puglin đơn giản này Tải lên , không cần biểu mẫu

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

  }
});

Xin lỗi vì đã là anh chàng đó nhưng AngularJS cung cấp một giải pháp đơn giản và thanh lịch.

Đây là mã tôi sử dụng:

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>

Ở phía máy chủ, tôi có một bộ điều khiển MVC với một hành động lưu các tệp được tải lên được tìm thấy trong bộ sưu tập Request.Files và trả về một JsonResult.

Nếu bạn sử dụng AngularJS, hãy thử điều này, nếu bạn không ... xin lỗi bạn đời :-)