Javascript PHP file upload by name

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

P.S: 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.?

Try attaching `change` event to `form` , `btnSubmit` , call `fileUpload` with value from previously selected `input type=file` . See post. — guest271314, Apr 16 '15 at 21:45
actually Im checking the uploading on submit already, so I dont need the on click event. I'm using javascript funciton in onsubmit @guest271314 — developer, Apr 16 '15 at 21:52
Ok. Not appear at `js` at original post where `uploadFiles` is called ? Tried `js` at post ? — guest271314, Apr 16 '15 at 21:55
Yeah ofcourse, need to acknowlege back the uplaoding is done — developer, Apr 16 '15 at 21:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75440/discussion-between-guest271314-and-developer). — guest271314, Apr 16 '15 at 22:00

score 0 · Answer 1 · answered Apr 16 '15 at 21:43

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>

@developer See also http://stackoverflow.com/questions/28207106/pdf-file-upload-ajax-html/ — guest271314, Apr 17 '15 at 04:35

Javascript PHP file upload by name

1 Answers1