Upload img without using submit button or rederict in PHP & AJAX
Question
This might look like a duplicate but I have not found something that matches my needs exactly yet. I want to upload an Image to a folder by just choosing a file in the file browser, no submit button used (so far so good, i can do this). But then I want the user not be redirected the to upload.php file. So I need to submit a file without a using submit button and not redirecting the user to another page. A refresh is ok but preferable without refresh as well.. This is what i have right now, and my question is if this could be done in PHP,AJAX & Javascript or if i should go for a JQuery plugin ?
AND I will have several forms so i am not using ID-tag
My code so far doesn't work 100%, only when i upload and redirect to upload.php :
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" class="test">
</form>
$(".test").change(function() {
$.ajax({
url: "upload.php",
type: "post",
dataType: 'json',
processData: false,
contentType: false,
data('file', $(this[0].files[0])),
success: function(text) {
alert("successfully");
}
});
});
UPLOAD.PHP
<?php if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "uploads/myfile.jpg")) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}?>
2 answers
solution1
0 2015-06-15 09:09:11
I suggest you to use jQuery-File-Upload because it takes care of browser versions and operating systems compatibility issues. If you don't need anything advanced read thisdocumentation
Code from the above link
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
Edited based on OP comment:
$(function () {
$('.fileuploads').each(function(i, obj){
$(obj).fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
});
solution2
0 2015-06-15 09:17:14
You can use below method without button click and refresh page file upload.
<form id="uploadform" target="upiframe" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" class="test" onchange="yourFunction()">
</form>
<iframe id="upiframe" name="upiframe" witdh="0px" height="0px" border="0" style="width:0; height:0; border:none;"></iframe>
function yourFunction() {
var form = document.getElementById('uploadform');
form.submit();
});
}
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.