Upload File tanpa Bentuk

Tanpa menggunakan apapun bentuk apapun, saya hanya dapat mengirim file/file dari <input type="file"> untuk 'tanggal.php' menggunakan metode POST menggunakan jQuery. Masukan tag ini tidak dalam bentuk tag. Ia berdiri secara individual. Jadi saya don't ingin menggunakan plugin jQuery seperti 'ajaxForm' atau 'ajaxSubmit'.

Mengomentari pertanyaan (2)

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

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 don't harus menggunakan bentuk untuk membuat permintaan ajax, asalkan anda tahu permintaan anda pengaturan (seperti url, metode dan parameter data).

Komentar (6)

Semua jawaban di sini masih menggunakan FormData API. Hal ini seperti sebuah "multipart/form-data" meng-upload tanpa bentuk. Anda juga dapat meng-upload file secara langsung sebagai konten di dalam tubuh permintaan POST menggunakan xmlHttpRequest seperti 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-Type dan Content-Disposition header yang digunakan untuk menjelaskan apa yang kami mengirimkan (mime-type dan nama file).

Saya memposting jawaban serupa juga di sini.

Komentar (1)

Mendasarkan pada tutorial ini, berikut ini cara yang sangat dasar untuk melakukan itu:

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

Don't lupa untuk menambahkan penanganan kesalahan yang tepat

Komentar (0)

Langkah 1: Membuat Halaman HTML di mana untuk menempatkan Kode HTML.

Langkah 2: Di Kode HTML Halaman Bawah(footer)Membuat Javascript: <script></script> dan letakkan Kode Jquery ke dalam tag Script.

Langkah 3: Buat File PHP, dan kode php copy lalu. setelah Kode Jquery di $.ajax Kode url menerapkan yang satu pada file php anda nama.

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" />

Php

print_r($_FILES);
print_r($_POST);
Komentar (7)

Maaf untuk menjadi pria tapi AngularJS menawarkan solusi sederhana dan elegan.

Berikut adalah 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>

Pada sisi server saya memiliki sebuah MVC controller dengan tindakan menyimpan file upload ditemukan dalam Permintaan.Koleksi file dan kembali JsonResult.

Jika anda menggunakan AngularJS mencoba hal ini, jika anda don't... maaf sobat :-)

Komentar (2)

Coba ini puglin simpleUpload, tidak perlu membentuk

Html:

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

Javascript:

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

  }
});
Komentar (0)