我正在尝试编写代码以将图像上传到我的服务器。我找到了一个并且有效。
这是代码
HTML：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<input type="file" id="file" />
<button onclick="uploadFile();">Upload</button>
<script type="text/javascript">
function uploadFile() {
var input = document.getElementById("file");
file = input.files[0];
if(file != undefined){
formData= new FormData();
if(!!file.type.match(/image.*/)){
formData.append("image", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data){
alert('File Uploaded');
}
});
}else{
alert('Not a valid image!');
}
}else{
alert('Input something!');
}
}
</script>
</body>
</html>
PHP：
<?php
$dir = "upload/";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir. $_FILES["image"]["name"]);
?>
现在我必须输入多个表单文件，所以我尝试执行以下操作：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<input type="file" id="one" />
<button onclick="uploadFile1();">Upload</button>
<input type="file" id="two" />
<button onclick="uploadFile2();">Upload</button>
<script type="text/javascript">
function uploadFile1() {
var input = document.getElementById("#one");
file = input.files[0];
if(file != undefined){
formData= new FormData();
if(!!file.type.match(/image.*/)){
formData.append("image", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data){
alert('File Uploaded');
}
});
}else{
alert('Not a valid image!');
}
}else{
alert('Input something!');
}
}
function uploadFile2() {
var input = document.getElementById("#two");
file = input.files[0];
if(file != undefined){
formData= new FormData();
if(!!file.type.match(/image.*/)){
formData.append("image", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data){
alert('File Uploaded');
}
});
}else{
alert('Not a valid image!');
}
}else{
alert('Input something!');
}
}
</script>
</body>
</html>
但它不起作用，我发现文件格式的文件类型和 ID 应该相同才能使其工作。我在这里做错了什么？如何解决这个问题？
使用 getElementById 时不包含#(您给它一个id值，而不是 CSS 选择器(，因此：
var input = document.getElementById("#one");
// Remove this ----------------------^
。同样对于#two.
但是，您不必为了使用不同的文件输入而重复整个函数。更改函数以接受id参数：
function uploadFile(id) {
var input = document.getElementById(id);
file = input.files[0];
if(file != undefined){
formData= new FormData();
if(!!file.type.match(/image.*/)){
formData.append("image", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data){
alert('File Uploaded');
}
});
}else{
alert('Not a valid image!');
}
}else{
alert('Input something!');
}
}
然后：
<button onclick="uploadFile('one');">Upload</button>
和
<button onclick="uploadFile('two');">Upload</button>