Upload files without a form

Question

Without using any forms, can I just send the file / files from <input type="file"> to 'upload.php' using the POST method with jQuery. The input tag is not inside the form tag. He stands individually. Therefore, I do not want to use jQuery plugins such as "ajaxForm" or "ajaxSubmit".

Answer 1

You can use FormData strong> to send your data on POST request. Here is a simple example:

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

You do not need to use the form to create an ajax request if you know your request parameter (for example, URL, method and parameter data).

Answer 2

All answers here still use the FormData API . This is similar to loading "multipart/form-data" without a form. You can also upload the file directly as content inside the body of the POST request using xmlHttpRequest as follows:

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

The Content-Type and Content-Disposition headers are used to explain what we are sending (mime type and file name).

I sent a similar answer here too .

Answer 3

Based on this tutorial , here is a very simple way to do this:

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

Remember to add proper error handling

Answer 4

Step 1. Create an HTML page where to place the HTML code.

Step 2: In the HTML code page Footer (footer) Create Javascript: and put the jQuery code in the Script tag.

Step 3: Create a copy of the PHP file and php code. after the jQuery code in $.ajax Enter the URL that is listed in the name of your php file.

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

Answer 5

Sorry for being a guy, but AngularJS offers a simple and elegant solution.

Here is the code I'm using:

 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> 

On the server side, I have an MVC controller with an action that saves the files loaded in the Request.Files collection and returns JsonResult.

If you are using AngularJS, try this if you do not ... sorry mate :-)

Answer 6

Try this puglin simpleUpload , no form needed

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