У меня есть форма с некоторыми полями и возможностью загрузки файлов. Я хочу отправить загруженный файл через Ajax в upload.php . Вот код, который я пробовал, и он не работает. Где я делаю неправильно? Любые предложения, пожалуйста.
form.php
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" </script> <script type="text/javascript"> $(document).ready(function() { $("#submit_custom").click(function() { e.preventDefault(); var postData = new FormData(); postData.append('file[]', $('input[type=file]')[0].files[0]); postData.append('trxid', $('input[name=trxid]')); postData.append('orderid', $('input[name=orderid]')); postData.append('custid', $('input[name=custid]'));// Uncaught TypeError: Illegal invocation if(proceed) $.post('upload.php', post_data, function(response){ if(response.type == 'error'){ //load json data from server and output message output = '<div class="error">'+response.text+'</div>'; }else{ output = '<div class="success">'+response.text+'</div>'; $("#upload_form").slideUp(); //hide form after success } $("#upload_form").hide().html(output).slideDown(); }, 'json'); }); }); </script> </head> <body> <h2>Hello <?php echo $user ?> </h2> <p> "You have successfully done purchasing process.</p> <div id="upload_form"> <p>To send your size details for your order please upload the following file:</p> <p>Download custom size form Provide us your custom size: <a href="download.php?download_file=custom-measurement-form.pdf">File.pdf</a></p> <form enctype="multipart/form-data" action="" method="post"> <input type="text" name="trxid" value="<?=$trx?>"> <input type="text" name="orderid" value="<?=$orderid?>"> <input type="text" name="custid" value="<?=$customerid?>"> <input type="file" name="file"> <input type="submit" id="submit_custom"> </form> </div> </body> </html>
upload.php
<?php if(isset($_POST['file'])){ if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { $output = json_encode(array( //create JSON data 'type'=>'error', 'text' => 'Sorry Request must be Ajax POST' )); die($output); } $file=$_FILES['file']['name']; $trx=$_POST['trxid']; $oid=$_POST['orderid']; $cid=$_POST['custid']; echo $file; $query=mysqli_query($con,"insert into payments(custom_file) value ('$file') where orderid='$oid',trx_id='$trx' and cust_id='$cid' "); if($query){ $m=move_uploaded_file($_FILES['file']['name'],'./ServerUploadedFiles/'.$trx.$file); $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .' Thank you for your email')); die($output); } else { $output = json_encode(array('type'=>'error', 'text' => 'Problem uploading file! .')); die($output); } } ?>
Пытаться
var postData = new FormData(); $('input[type=file]').each(function() { postData.append('file[]', $('input[type=file]')[0].files[0]); }
не
post_data = { 'file': $('input[name=file]').val(),
Этот код отправляет данные и получает результат, ваш код ничего не делает
Тестовый файл a.php
<html> <head> <!-- change jquery version, your give me some warnings --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var proceed=true; /* ** declare proceed */ $("#submit_custom").click(function() { /*e.preventDefault();*/ var postData = new FormData(); alert('Found file '+$('[type=file]').val()); postData.append('file', $('[type=file]')[0].files[0]); if(proceed) { $.ajax({ processData: false, /* important */ contentType: false, /* important */ type: "POST", url: 'b.php', data: postData, /* ** here not post_Data but postData like declared in var*/ error: function(jqXHR, textStatus, errorThrown){ alert(textStatus); }, success:function(data, textStatus, jqXHR) { alert(data); var response; /* added */ try { response = JSON.parse(data); } catch (err) { alert('Error parsing response.'); return; } alert('result after parsing json of a is '+response.a); /* */ }, dataType: 'html' /* I change it ot html for this example*/ }); } }); }); </script> </head> <body> <form name="upload" enctypex="multipart/form-data" action="b.php" method="post"> <input type="file" name="file"> <input type="button" id="submit_custom" value="ajax"> <input type="submit" value="post"> </form> </div> </body> </html>
В тестовом файле b.php содержится ответ вроде json {"a":"2"}
{"a":"2"}
После того, как вы сможете отправлять и получать ответ, вы добавляете другие pribambasi