[英]Ajax FormData using POST type but in PHP file no request can be fetched
[英]Simple file upload using Javascript FormData(), AJAX $.post and PHP
所以我有一个简单的 FormData object,我试图用它上传一个文件,而不必提交表单。 在 HTML 中,我创建了一个简单的表单,其中包含 1) 文件上传 2) 另一个用于概念验证的简单文本输入。 尝试使用 jquery $.post function 来实现这一点。 PHP 文件 PHP_SIMPLE_AJAX_IMAGE.php 只是从同一张发送的图像中吐出数据。 HTML 是:
<form id="form_image_upload">
<input type="file" id="input_file" name="input_file_n"></input>
<label for="input_file" id="label_input_file" >choose file</label>
<label for="input_file" id="label_small_input_file">...</label><br>
<input type="text" id='simp_text_id' name='simp_text_n' ><br>
<button id="btn_submit" type="submit" value="submit" class="upload_file">Submit</button>
<form>
<DIV id="Sub_Div_7"> </DIV>
Javascript
$("#input_file").change(function(e){
$("#label_small_input_file").html(e.target.files[0].name);
});
$("#form_image_upload").submit(function(e){
e.preventDefault();
let fd = new FormData(this);
// alert( fd.get('input_file_n').name); //This works
// alert( fd.get('simp_text_n')); //This works
$.post("PHP/PHP_SIMPLE_AJAX_IMAGE.php", fd, function(data){
$("#Sub_Div_7").html(data); });
});
PHP
<?PHP
if(isset($_FILES['input_file_n'])
{ $F_name = $_FILES['input_file_n']['name'];
$F_tmpnm = $_FILES['input_file_n']['tmp_name'];
$F_type = $_FILES['input_file_n']['type'];
$F_size = $_FILES['input_file_n']['size']; }
$text_1 = isset($_POST['simp_text_n']) ? $_POST['simp_text_n'] : "NULL";
echo "Filename: " . $F_name . " Tempname: " . $F_tmpnm . " Type: ". $F_type . " Size: " . $F_size . " TextInput: " . $text_1 ;
?>
当我把两行 alert( fd.get('input_file_n').name); alert( fd.get('simp_text_n')); 我收到了具有正确文件名的警报,因此 fd object 确实在获取表单数据。 然而,当我执行时,在控制台中我得到一个大错误..一些类似的东西:“Uncaught TypeError: Illegal invocation”在 $.post(...) 所在的 javascript 中的行..出了什么问题?
按照以下说明操作:
<input type="file" id="file_target">
$('#file_target').change(function (e) {
e.preventDefault();
// for single file upload
uploadFile(this.files[0]);
// for multiple file upload
$.each(this.files, function (k, file) {
uploadFile(file);
});
});
uploadFile
function:您可以在此处验证要上传的文件
function uploadFile(file) {
// some validation like size or dimension
//...
var urlPath = 'php_script_file_for_upload';
// create data to be send
var fd = new FormData();
fd.append('file_data', file);
// if you do not want use jQuery
var xhr = new XMLHttpRequest();
// third parameter is set to be async request
xhr.open('POST', urlPath, true);
xhr.send(fd);
// if you do use jQuery
$.ajax({
method: 'POST',
url: urlPath,
data: fd
});
}
if(!empty($_FILES['file_data']))
{
$path = "uploads/";
$path = $path . basename( $_FILES['file_data']['name']);
if(move_uploaded_file($_FILES['file_data']['tmp_name'], $path)) {
// successful upload
} else{
// error during upload
}
}
如果您不需要 ajax 方法,请参阅https://gist.github.com/taterbase/2688850
您可以简单地fetch
以将 do post 请求发送到您的backend
php 文件。
它对您不起作用的原因是$.post
本身无法处理formData
object - 因此您会收到该错误。
将fetch与 Post 方法结合使用
现场演示:
$("#input_file").change(function(e) { $("#label_small_input_file").html(e.target.files[0].name); }); $("#form_image_upload").submit(function(e) { e.preventDefault(); let fd = new FormData($(this)[0]) //store data using $(this)[0] //Using Simple Fetch API fetch('PHP/PHP_SIMPLE_AJAX_IMAGE.php', { method: 'post', body: fd, }).then(function(data) { $("#Sub_Div_7").html(data); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form_image_upload"> <input type="file" id="input_file" name="input_file_n" /> <label for="input_file" id="label_input_file">choose file</label> <label for="input_file" id="label_small_input_file">...</label><br> <input type="text" id='simp_text_id' name='simp_text_n'><br> <button id="btn_submit" type="submit" value="submit" class="upload_file">Submit</button> <form> <div id="Sub_Div_7"> </div>
使用$.ajax和 post 方法
现场演示:
$("#input_file").change(function(e) { $("#label_small_input_file").html(e.target.files[0].name); }); $("#form_image_upload").submit(function(e) { e.preventDefault(); let fd = new FormData($(this)[0]) $.ajax({ url: 'PHP/PHP_SIMPLE_AJAX_IMAGE.php', type: 'POST', data: fd, processData: false, contentType: false, success: function(data) { $("#Sub_Div_7").html(data); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form_image_upload"> <input type="file" id="input_file" name="input_file_n" /> <label for="input_file" id="label_input_file">choose file</label> <label for="input_file" id="label_small_input_file">...</label><br> <input type="text" id='simp_text_id' name='simp_text_n'><br> <button id="btn_submit" type="submit" value="submit" class="upload_file">Submit</button> <form> <div id="Sub_Div_7"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.