按名称上传Javascript PHP文件

Question

I'm trying to upload a file using ajax call and PHP, however I'm facing some difficulty that my call was successful but I'm unable to get the uploaded file.

My Javascript Function:

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
       }
    });
}

My PHP Code:

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.";
    }
}
}
}

PS: My PHP Code works with following HTML Form.

<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>

How I can submit the file using javascript and PHP when I get the file name.?

Answer 1

Try

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>