Téléchargement de fichier sans formulaire

Sans utiliser aucun formulaire, puis-je simplement envoyer un fichier / fichiers de <input type="file">vers 'upload.php' en utilisant la méthode POST en utilisant jQuery. La balise d'entrée ne se trouve dans aucune balise de formulaire. Il se tient individuellement. Je ne veux donc pas utiliser de plugins jQuery comme 'ajaxForm' ou 'ajaxSubmit'.

Vous pouvez utiliser FormData pour soumettre vos données par une requête POST. Voici un exemple simple:

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

Vous n'avez pas besoin d'utiliser un formulaire pour faire une requête ajax, tant que vous connaissez le paramètre de votre requête (comme les données d'url, de méthode et de paramètres).

Toutes les réponses ici utilisent toujours l' API FormData . C'est comme un "multipart/form-data"téléchargement sans formulaire. Vous pouvez également télécharger le fichier directement en tant que contenu dans le corps de la POSTdemande en utilisant xmlHttpRequestcomme ceci:

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-Typeet les en- Content-Dispositiontêtes sont utilisés pour expliquer ce que nous envoyons (type mime et nom de fichier).

J'ai posté une réponse similaire également ici .

Sur la base de ce didacticiel , voici une façon très basique de le faire:

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

N'oubliez pas d'ajouter une gestion des erreurs appropriée

Étape 1: Créez une page HTML où placer le code HTML.

Étape 2: Dans le bas de la page de code HTML (pied de page), créez Javascript: et placez le code Jquery dans la balise Script.

Étape 3: Créez un fichier PHP et copiez le code php. après Jquery Code dans l' $.ajaxURL du code, appliquez lequel sur votre nom de fichier 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);

Essayez cette puglin simpleUpload , aucune forme de besoin

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

  }
});

Désolé d'être ce type, mais AngularJS offre une solution simple et élégante.

Voici le code que j'utilise:

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>

Du côté du serveur, j'ai un contrôleur MVC avec une action qui enregistre les fichiers téléchargés trouvés dans la collection Request.Files et renvoie un JsonResult.

Si vous utilisez AngularJS, essayez ceci, si vous ne le faites pas ... désolé mon pote :-)