**1. index.php** <body> <span id="msg" style="color:red"></span><br/> <input type="file" id="photo"><br/> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).on('change','#photo',function(){ var property = document.getElementById('photo').files[0]; var image_name = property.name; var image_extension = image_name.split('.').pop().toLowerCase(); if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){ alert("Invalid image file"); } var form_data = new FormData(); form_data.append("file",property); $.ajax({ url:'upload.php', method:'POST', data:form_data, contentType:false, cache:false, processData:false, beforeSend:function(){ $('#msg').html('Loading......'); }, success:function(data){ console.log(data); $('#msg').html(data); } }); }); }); </script> </body> **2.upload.php** <?php if($_FILES['file']['name'] != ''){ $test = explode('.', $_FILES['file']['name']); $extension = end($test); $name = rand(100,999).'.'.$extension; $location = 'uploads/'.$name; move_uploaded_file($_FILES['file']['tmp_name'], $location); echo '<img src="'.$location.'" height="100" width="100" />'; }

file upload in php through ajax

$('#upload').on('click', function() { var file_data = $('#sortpicture').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); alert(form_data); $.ajax({ url: 'upload.php', // point to server-side PHP script dataType: 'text', // what to expect back from the PHP script, if anything cache: false, contentType: false, processData: false, data: form_data, type: 'post', success: function(php_script_response){ alert(php_script_response); // display response from the PHP script, if any } }); });

file upload in php through ajax

var formData = new FormData($("#YOUR_FORM_ID")[0]); $.ajax({ url: "upload.php", type: "POST", data : formData, processData: false, contentType: false, beforeSend: function() { }, success: function(data){ }, error: function(xhr, ajaxOptions, thrownError) { console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } });

file upload in php through ajax

async function saveFile() { let formData = new FormData(); formData.append("file", sortpicture.files[0]); await fetch('/uploads', {method: "POST", body: formData}); alert('works'); }

file upload in php through ajax

Similar Code Examples