Javascript PHP文件按名称上传

Question

我正在尝试使用 ajax 调用和 PHP 上传文件，但是我遇到了一些困难，即我的调用成功但我无法获取上传的文件。

我的 Javascript 函数：

function uploadFile(filename) {
    var fd = new FormData();
    fd.append("RESULT_FileUpload-15", filename);

    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           alert("IM SUCCESS: ",response);
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
}

我的 PHP 代码：

if(isset($_FILES["RESULT_FileUpload-15"]["tmp_name"])) {
    if ($_FILES["RESULT_FileUpload-15"]["error"] > 0) {
        echo "Error: " . $_FILES["RESULT_FileUpload-15"]["error"] . "<br />";
    } else {
$target_dir = dirname(__FILE__) ;
$pic =  basename($_FILES["RESULT_FileUpload-15"]["name"]);
$target_file =  $target_dir. $pic;

$uploadOk = 1;
if(isset($_POST["submit"])) {
        $uploadOk = 1;
}
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
} else {
    if (move_uploaded_file($_FILES["RESULT_FileUpload-15"]["tmp_name"], $target_file)) {
        $a = [$target_file,$_FILES["RESULT_FileUpload-15"]["name"]];
        echo json_encode($a);
      //  echo "The file ". basename( $_FILES["RESULT_FileUpload-15"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
}
}

P.S：我的 PHP 代码适用于以下 HTML 表单。

<form id="uploadForm" action="upload.php" method="post">
        <input name="RESULT_FileUpload-15" id="RESULT_FileUpload-15" size="25" type="file"  />
        <input type="submit" value="upload" class="btnSubmit" />
</form>

当我得到文件名时，如何使用 javascript 和 PHP 提交文件？

Answer 1

试试

var filename;

$("#RESULT_FileUpload-15").on("change", function(e) {
  filename = e.target.files[0]
});

function uploadFile(filename) {
    var fd = new FormData();
    fd.append("RESULT_FileUpload-15", filename);
    console.log(filename, fd)
    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           alert("IM SUCCESS: ",response);
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
};

$(".btnSubmit").on("click submit", function(e) {
  e.preventDefault();
  uploadFile(filename);
});

var filename;

$("#RESULT_FileUpload-15").on("change", function(e) {
  filename = e.target.files[0]
});

function uploadFile(filename) {
    var fd = new FormData();
    fd.append("RESULT_FileUpload-15", filename);
    console.log(filename, fd);
    /*
    $.ajax({
       url: "upload.php",
       type: "POST",
       data: fd,
       processData: false,
       contentType: false,
       success: function(response) {
           alert("IM SUCCESS: ",response);
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage); // Optional
       }
    });
    */
};

$(".btnSubmit").on("click submit", function(e) {
  e.preventDefault();
  uploadFile(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="uploadForm" action="upload.php" method="post">
        <input name="RESULT_FileUpload-15" id="RESULT_FileUpload-15" size="25" type="file"  />
        <input type="submit" value="upload" class="btnSubmit" />
</form>