[英]Upload file with pure Javascript and PHP
I get stuck with my script and I hope somebody can help me.我被我的脚本卡住了,我希望有人能帮助我。 I try to send a file to the server with Javascript and PHP.
我尝试使用 Javascript 和 PHP 将文件发送到服务器。 For this I created a file input element
为此,我创建了一个文件输入元素
<input type="file" class="quote_attachment" id="quote_attachment"/>
With Javascript I create a request使用 Javascript 我创建一个请求
<script type="text/javascript">
document.getElementById("quoteform").addEventListener("submit", function(){
var attachment = document.getElementById("quote_attachment").value;
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://www.mysite/mailer/mailer.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('&attachment='+attachment);
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
}
}
event.preventDefault();
});
</script>
On the serverside I do this with PHP在服务器端,我用 PHP 做到这一点
<?php
if(isset($_POST['attachment'])){
$allowed = array('ai', 'AI', 'eps', 'EPS', 'pdf', 'PDF', 'svg', 'SVG');
if($_POST['attachment'] !== ''){
$get_extension = pathinfo($_POST['attachment'], PATHINFO_EXTENSION);
if(!in_array($get_extension, $allowed)){
$errors[] = 'Dit type ondersteunen wij niet';
}else{
if(!move_uploaded_file($_FILES["attachment"]["tmp_name"], 'quoteattachment/')){
echo 'there is something wrong with uploading the file.';
}
}
}
}
?>
This is not the whole code but only the part of the file handling.这不是整个代码,而只是文件处理的一部分。 If I run the code I get the error "there is something wrong with uploading the file.
如果我运行代码,我会收到错误“上传文件有问题。
Who can help me further with this?谁能帮我进一步解决这个问题?
Using document.getElementById("quote_attachment").value;
使用
document.getElementById("quote_attachment").value;
will just return the name of the file in the file input.只会在文件输入中返回文件的名称。 You should use
.files
and pass it into a formData object.您应该使用
.files
并将其传递给 formData 对象。 For example:例如:
<script type="text/javascript">
document.getElementById("quoteform").addEventListener("submit", function(){
// Get the files in input
var files = document.getElemenyById("quote_attachment").files;
// Create formData object
var formData = new FormData();
// Might or not be a multi file input, so loop through it
for (var i = 0; i < files.length; i++) {
var file = files[i]
formData.append('files[]', file);
}
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://www.mysite/mailer/mailer.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('&attachment='+formData);
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
}
}
event.preventDefault();
});
</script>
Now if you var_dump in your PHP-function you should get an Array containing all file data.现在,如果你在 PHP 函数中使用 var_dump,你应该得到一个包含所有文件数据的数组。 If it does your PHP-function should run without problem.
如果确实如此,您的 PHP 函数应该可以毫无问题地运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.