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.?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.