file upload in php through ajax
file upload in php through ajax
xxxxxxxxxxasync function saveFile() { let formData = new FormData(); formData.append("file", sortpicture.files[0]); await fetch('/uploads', {method: "POST", body: formData}); alert('works');}Source: stackoverflow.com
Closely Related Answers
xxxxxxxxxx// add jquery// <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>$(document).ready(function() { $("#form").on('submit', (function(e) { e.preventDefault(); $.ajax({ url: $(this).attr('action'), type: "POST", data: new FormData(this), contentType: false, cache: false, processData: false, success: function(response) { $("#form").trigger("reset"); // to reset form input fields }, error: function(e) { console.log(e); } }); }));});Source: Grepper
xxxxxxxxxx$('#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 } });});Source: stackoverflow.com
xxxxxxxxxx**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**<?phpif($_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" />';}Source: stackoverflow.com
xxxxxxxxxx$('#ProblemUpload').submit(function(e){ e.preventDefault(); var file_data = $('#fileData').prop('files')[0]; //file input id var form_data = new FormData(); form_data.append('file', file_data); form_data.append('action', 'upload_sheet'); console.log(form_data); $.ajax({ url: '/apis/auth.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){ console.log(php_script_response); // <-- display response from the PHP script, if any } }); })Source: Grepper
xxxxxxxxxx// HTML structure<form id="myForm" enctype="multipart/form-data"> <input type="file" name="myFile"> <button type="submit">Upload</button></form><!-- JavaScript code --><script> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // Prevent default form submission var formData = new FormData(this); // Create a new FormData object from the form var xhr = new XMLHttpRequest(); // Create a new XMLHttpRequest object xhr.open('POST', '/upload', true); // Specify the request type, URL, and set it as asynchronous xhr.onload = function() { if (xhr.status === 200) { console.log('File successfully uploaded!'); } else { console.error('Error uploading file. Status:', xhr.status); } }; xhr.onerror = function() { console.error('Request failed'); }; xhr.send(formData); // Send the form data as the request payload });</script>Source: Grepper
xxxxxxxxxxvar 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); }});Source: stackoverflow.com
xxxxxxxxxx<?php if ( 0 < $_FILES['file']['error'] ) { echo 'Error: ' . $_FILES['file']['error'] . '<br>'; } else { move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); }?>Source: stackoverflow.com
xxxxxxxxxx<?$data = array(); //check with your logic if (isset($_FILES)) { $error = false; $files = array(); $uploaddir = $target_dir; foreach ($_FILES as $file) { if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) { $files[] = $uploaddir . $file['name']; } else { $error = true; } } $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files); } else { $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST); } echo json_encode($data);?>Source: stackoverflow.com
xxxxxxxxxxmove_uploaded_file( // this is where the file is temporarily stored on the server when uploaded // do not change this $_FILES['file']['tmp_name'], // this is where you want to put the file and what you want to name it // in this case we are putting in a directory called "uploads" // and giving it the original filename 'uploads/' . $_FILES['file']['name']);Source: stackoverflow.com
Twitter 
LinkedIn