通过AJAX上传图像-如何将文件名传递给服务器？
[英]Image Upload via AJAX - How to pass file name to server ?
问题描述
I am trying to upload an image to the webserver using AJAX, but am unable to pass the file name and path to the PHP script on the server side. 
我正在尝试使用AJAX将图像上传到Web服务器，但是无法将文件名和路径传递给服务器端的PHP脚本。
This is the HTML with the JavaScript (ImageUpload01.php) which calls the PHP : 这是带有JavaScript的HTML（ImageUpload01.php），它调用了PHP：
Please do not pay much attention to lines in bold ( .... ) as those are the scripts that I wrote for testing and did not work. 请不要过多地关注粗体（ .... ）行，因为这些是我为测试而编写的脚本，无法正常工作。
The same program I wrote to upload images without the use of AJAX and it DID WORK. 我编写的同一程序无需使用AJAX即可上传图像，并且可以正常工作。 And also, I did the exact same logic using AJAX to retrieve database record upon sending a customer ID and it also worked. 而且，我使用AJAX进行了完全相同的逻辑，以在发送客户ID后检索数据库记录，并且它也有效。 But image upload in AJAX is giving me problems (just because I don't know how to pass the file name/path 但是在AJAX中上传图片给我带来了问题（只是因为我不知道如何传递文件名/路径
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Image Upload</title>
<script>
function showThumbnail(str)
{
var xmlhttp;
**alert(str);**
**var params = "q=" + $_FILES['file']['name'];**
if (str==="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","RunImageUpload01.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange=function()
{
alert(xmlhttp.responseText);
if (xmlhttp.readyState===4 && xmlhttp.status===200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.send(params);
}
</script>
</head>
<body>
<?php
?>
<form action="" >
<input type="file" name="file" id="file" /><br />
<input type="button" name="submit" value="Submit" onclick="return showThumbnail(file.value);" />
</form>
<div id="txtHint">
</div>
</body>
</html>
PHP Script on the server side (RunImageUpload01.php) 服务器端的PHP脚本（RunImageUpload01.php）
<?php
**$pName = $_POST['q'];**
$moved = move_uploaded_file($pName, "/var/www/vhosts/mywebsiteURL.com/store/mytest/images/temp/" . $pName);
if ($moved) {
echo "Success"
}
else {
echo "You fool, failure"
}
?>
Please help me, I prefer JavaScript instead of JQuery. 请帮助我，我更喜欢JavaScript而不是JQuery。
thanks, 谢谢，
Isaac 以撒
3 个解决方案
解决方案1
0 2013-11-29 16:25:39
What browser are you using? 你使用的是什么浏览器？ This won't work with older browsers (IE). 这不适用于较旧的浏览器（IE）。 I know you mentioned that you prefer vanilla javascript, but if you have the option to use jquery, have a look at this plugin: http://malsup.com/jquery/form/#file-upload . 我知道您提到过您喜欢香草javascript，但是如果您可以选择使用jquery，请查看此插件： http : //malsup.com/jquery/form/#file-upload 。 It does all sorts of workarounds and hacks for you to make it work with all browsers. 它可以为您提供各种解决方法和技巧，以使其与所有浏览器兼容。
解决方案2
-1 2013-11-29 16:24:11
The file name cannot be passed together with the file itself. 文件名不能与文件本身一起传递。 Instead, read the filename with Javascript (from the file input element) and send it as a separate input type="hidden" element. 而是使用Javascript读取文件名（从file输入元素），并将其作为单独的input type="hidden"元素发送。
By the way, your form element should contain the attribute enctype="multipart/form-data" , otherwise there will probably be a problem with the file transmission. 顺便说一句，您的表单元素应包含属性enctype="multipart/form-data" ，否则文件传输可能会出现问题。
解决方案3
-1 2013-11-29 16:24:56
Use XHR2 to do it as an alternative to jQuery. 使用XHR2替代jQuery。
http://www.w3.org/TR/XMLHttpRequest2/#the-formdata-interface http://www.w3.org/TR/XMLHttpRequest2/#the-formdata-interface
The original XMLHttpRequest does not properly support multipart data. 原始XMLHttpRequest不正确支持多部分数据。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.