Question

我正在尝试编写代码以将图像上传到我的服务器。我找到了一个并且有效。

这是代码

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应该是相同的，以使其工作。我在这做错了什么？我该如何解决这个问题？

Answer 1

使用#时你不会包含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>

JavaScript DOM文件输入选择器冲突

1 个答案: