Unggah File tanpa Formulir

Tanpa menggunakan form apapun, dapatkah saya mengirim file / file dari <input type="file">ke 'upload.php' menggunakan metode POST menggunakan jQuery. Tag masukan tidak ada di dalam tag formulir apa pun. Itu berdiri secara individual. Jadi saya tidak ingin menggunakan plugin jQuery seperti 'ajaxForm' atau 'ajaxSubmit'.

Anda dapat menggunakan FormData untuk mengirimkan data Anda dengan permintaan POST. Berikut ini contoh sederhananya:

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

Anda tidak perlu menggunakan formulir untuk membuat permintaan ajax, selama Anda mengetahui pengaturan permintaan Anda (seperti url, metode dan data parameter).

Semua jawaban di sini masih menggunakan API FormData . Ini seperti "multipart/form-data"unggahan tanpa formulir. Anda juga dapat mengunggah file langsung sebagai konten di dalam tubuh POSTpermintaan menggunakan xmlHttpRequestseperti ini:

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-Typedan Content-Dispositionheader digunakan untuk menjelaskan apa yang kami kirim (jenis mime dan nama file).

Saya memposting jawaban serupa juga di sini .

Berdasarkan tutorial ini , berikut cara yang sangat mendasar untuk melakukannya:

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

Jangan lupa untuk menambahkan penanganan error yang tepat

Langkah 1: Buat Halaman HTML tempat meletakkan Kode HTML.

Langkah 2: Di Bagian Bawah Halaman Kode HTML (footer) Buat Javascript: dan letakkan Kode Jquery di tag Script.

Langkah 3: Buat File PHP dan salin kode php sebelumnya. setelah Kode Jquery di $.ajaxurl Kode terapkan yang mana di nama file php Anda.

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

Coba puglin simpleUpload ini , tidak perlu formulir

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

  }
});

Maaf untuk menjadi pria itu tetapi AngularJS menawarkan solusi yang sederhana dan elegan.

Ini kode yang saya gunakan:

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>

Di sisi server saya memiliki pengontrol MVC dengan tindakan yang menyimpan file yang diunggah yang ditemukan dalam koleksi Request.Files dan mengembalikan JsonResult.

Jika Anda menggunakan AngularJS coba ini, jika Anda tidak ... maaf sobat :-)