All geek questions in one place

How to upload a file asynchronously using jQuery

I want to upload a file asynchronously using jQuery - without using PLUGIN.

JQuery is very new to me, and after looking at various forums, I ended up with this code:

HTML:

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('#myform').submit(function() { var fileInput = document.getElementById('file'); var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); $.ajax({ type: "POST", url: "upload.php", data: formData, processData: false, contentType: 'multipart/form-data', beforeSend: function (x) { if (x && x.overrideMimeType) { x.overrideMimeType("multipart/form-data"); } }, success:function(msg){ //alert( "Data Uploaded: " + msg ); document.getElementById('display').innerHTML = msg; } }); return false; }); }); </script> </head> <body> <form enctype="multipart/form-data" id="myform" name="myform" method="POST"> <input name="file" type="file" id="file" name="file"/> <input type="text" name="txtValue" value="" id="txtValue">--> <input type="submit" value="Upload" id="button" name="button"/> <div id="display"></div> </form> </body> </html>

PHP:

 <?php $uploaddir = './uploads/'; $file = $uploaddir . basename($_FILES['file']['name']); if (move_uploaded_file($_FILES['file']['tmp_name'], $file)) { $value = "success"; } else { $value = "error"; } echo $value; ?>

This code does not work, and every time the "display" DIV prints "error". Please help me.

+2
source share
4 answers

Take the hidden div. Inside this div, take an iframe and set the target form to id iframe.

In jQuery. In the after document ready function, add a load event handler (say, LEH) in the iframe. Thus, when the form is submitted and the file is loaded, and iframe is loaded, then LEH is called

This will act as an event of success.

Note: you need to make small changes, as the first time the page loads, as well as the iframe loads. Thus, there will be a first time check.

+1
source

With HTML5, you can upload files using Ajax and jQuery. In addition, you can perform file checks (name, size and MIME type) or handle a progress event with an HTML5 progress tag (or div).

HTML:

 <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress>

You can do some checking if you want.

 $(':file').change(function(){ var file = this.files[0]; var name = file.name; var size = file.size; var type = file.type; //Your validation });

Now Ajax submit with the click of a button:

 $(':button').click(function(){ var formData = new FormData($('form')[0]); $.ajax({ url: 'upload.php', //Server script to process data type: 'POST', xhr: function() { // Custom XMLHttpRequest var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // Check if upload property exists myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload } return myXhr; }, //Ajax events beforeSend: beforeSendHandler, success: completeHandler, error: errorHandler, // Form data data: formData, //Options to tell jQuery not to process data or worry about content-type. cache: false, contentType: false, processData: false }); });

Now, if you want to handle the progress.

 function progressHandlingFunction(e){ if(e.lengthComputable){ $('progress').attr({value:e.loaded,max:e.total}); } }

A SOURCE

+1
source

You can use the following plugins to download files using ajax:

The plugin in the first link provides very useful callbacks. You can check the documentation at the specified link.

0
source

I have a custom jQuery Form Plugin in my project. The jQuery raw xhr object is wrapped in a jqXhr object that has no reference to the new xhr load property. Hope you can start with this example below. html:

  <input type="file" class="text-input" size="50" id="file_upload" value="" name="file_upload"/> var formData = new FormData($('form')[0]); $.ajax({ url: '/files/add_file', //server script to process data type: 'POST', xhr: function() { // custom xhr myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists //myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload } return myXhr; }, dataType: 'JSON', beforeSend: beforeSendHandler, success: function(data) { if (data.error){ showMessage(data.html, false, false); } else{ showMessage(data.html, false, false); setTimeout("window.location = 'path/to/after/uploading';",450) } }, error: function(data) { showMessage(data.html, false, false); }, // Form data data: formData, //Options to tell JQuery not to process data or worry about content-type cache: false, contentType: false, processData: false });
0
source

Source: https://habr.com/ru/post/958196/

More articles:


All Articles