I made PHP script to preview an image before upload it, which is simple and easy to read. the first part is to displays the image then to upload it after pressing Submit button.
I have an issue with uploading the image, it doesn't upload.
<?php
if (!empty($_POST["uploadForm"])) {
if (is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$targetPath = "uploads/".$_FILES['userImage']['name'];
if (move_uploaded_file($_FILES['userImage']['tmp_name'], $targetPath)) {
$uploadedImagePath = $targetPath;
}
}
}
?>
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="userImage" />
<script>
var loadFile = function(event) {
var output = document.getElementById('userImage');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {URL.revokeObjectURL(output.src) } // free memory
};
</script>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="submit" name="upload" value="Submit" class="btnSubmit">
</form>
You have several logical errors in your PHP Code as well as HTML.
When checking for form submission you have to check if "upload" (name of submit button) is in the $_POST.
The File Upload Input should be inside <form> tag.
Set a name for File Upload field, I have set it to "userImageUpload", so you can access it from $_FILES in PHP.
Here is the final Code:
<?php
if (!empty($_POST["upload"])) {
if (is_uploaded_file($_FILES['userImageUpload']['tmp_name'])) {
$targetPath = "uploads/" . $_FILES['userImageUpload']['name'];
if (move_uploaded_file($_FILES['userImageUpload']['tmp_name'], $targetPath)) {
$uploadedImagePath = $targetPath;
}
}
}
?>
<img id="userImage" />
<script>
var loadFile = function(event) {
var output = document.getElementById('userImage');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src)
} // free memory
};
</script>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" accept="image/*" onchange="loadFile(event)" name="userImageUpload">
<input type="submit" name="upload" value="Submit" class="btnSubmit">
</form>
Note: Please make sure that "upload" folder is already there and permissions are correct too.
Youve placed the input out of the form, but it should be in it:
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" accept="image/*" onchange="loadFile(event)">
<input type="submit" name="upload" value="Submit" class="btnSubmit">
</form>
Related
I have this code for choosing a file in HTML, and I want to allow the user to choose a file, and then be able to set it as the background. Heres the code for choosing the file
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
Or is there a way I could access the camera of the user in HTML? Basically, I want the user to be able to choose an image or take an image, and then set the image as the background.
Yes we can take advantage the browser's FileReader API to read files and use the file on client side
Below is a typical example of using the FileReader API for your use case:
function sendFile() {
// IN YOUR ACTUAL CODE REPLACE DEMODIV WITH
// document.body or the body of your html
const demoDiv = document.querySelector('#demo');
const file = document.querySelector('#file1').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// setting image file convert to base64 string as demoDiv's background
demoDiv.style.backgroundImage = `url(${reader.result})`;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
#demo {
width: 100%;
height: 400px;
}
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
<div id="demo"></div>
Reference: reader.readFileAsDataUrl
I'm making an upload-page, where you can upload file by dropping it onto an area as well as by clicking on an image and choosing a file.
It works great, but now I want to implement a progressbar, so I have to call a js-function in the onChange-Event of the chooseFile-button:
<img src="images/cloud.png" id="uploadCloud" class="uploadImage" alt="Dateien durchsuchen"/>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="datei" name="datei" onChange="javascript:upload()" hidden/>
</form>
These are my scripts:
<script>
function upload()
{
//Do stuff to upload file (already implemented)
}
</script>
<script>
$(document).ready(function(e)
{
$("#uploadCloud").click(function()
{
$("#datei").trigger('click');
});
});
</script>
Testing the code, the console throws a ReferenceError: upload is not defined
I can't see where my differs from this: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange
What have I done wrong calling the upload() function?
I don't get the point of javascript:onchange(); and that hidden word there...
<img src="images/cloud.png" id="uploadCloud" class="uploadImage" alt="Dateien durchsuchen"/>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="datei" name="datei" onchange="upload()" />
</form>
You should just type onChange="upload()" instead of onChange="javascript:upload()" but the better unobtrusive way would be
<head>
<script>
upload = function() {
}
$(document).ready(function(e) {
$("#datei").change(upload);
$("#uploadCloud").click(function()
{
$("#datei").trigger('click');
});
});
</script>
</head>
<body>
<img src="images/cloud.png" id="uploadCloud" class="uploadImage" alt="Dateien durchsuchen"/>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" id="datei" name="datei" />
</form>
</body>
i have 3 input file, i wanna make a javascript validation for 3 input file in one submit button form event onSubmit=""
<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi" >
<div>
<input type="file" name="fUpload1" id="fileUpload1"/>
<input type="file" name="fUpload2" id="fileUpload2"/>
<input type="file" name="fUpload3" id="fileUpload3"/>
</div>
<div>
<input type="submit" name="upload" value="upload" />
</div>
</form>
EDITED CODE
new code that working but, still proccess saving
$(document).ready(function(){
$('#tbl_next').click(function(){
//alert('hello');
$('input[type="file"]').each(function(){
var thisFile = $(this);
var fileSize = thisFile[0].files[0].size;
var fileType = thisFile[0].files[0].type;
//alert(fileSize);
if(fileSize>1048576){ //do something if file size more than 1 mb (1048576)
alert(fileSize +" bites\n ukuran gambar terlalu besar");
return false;
}else{
switch(fileType){
case 'image/png':
case 'image/gif':
case 'image/jpeg':
case 'image/pjpeg':
alert("Acceptable image file!");
break;
default:
alert('Unsupported File!');
return false;
}
}
});
$('form#dataPribadi').submit();
});
});
Change type of submit button to normal button and use onclick handler for it by giving a id as upload,
<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi" >
<div>
<input type="file" name="fUpload1" id="fileUpload1"/>
<input type="file" name="fUpload2" id="fileUpload2"/>
<input type="file" name="fUpload3" id="fileUpload3"/>
</div>
<div>
<input type="button" id="upload" value="upload" />
</div>
</form>
and your click event handler should be,
$(document).ready(function(){
$('#upload').click(function(){
alert('hello');
$('input[type="file"]').each(function(){
var thisFile = $(this);
var fileSize = thisFile[0].files[0].size;
alert(fileSize);
});
$('form#dataPribadi').submit();
});
});
UPDATED FIDDLE
Following my code:
HTML:
<form id="test" action="javascript:test()" method="post">
<input name="image" type="file" />
<input type="submit" value="Submit" />
</form>
JS:
function test(){
iframe = document.createElement("IFRAME");
iframe.name = "iframe_upload";
iframe.src="test.php";
document.body.appendChild(iframe);
document.getElementById("test").target = "iframe_upload";
}
PHP:
<?php
if (isset($_FILES["image"])){
echo 'exist';
exit();
}
?>
Where is the error? I'm sure the problem is in javascript, it would be easy to take off without the javascript dynamically create the iframe, but I must use javascript.
there are a couple of problems with that but nothing major,
firstly in order to post files you need to add enctype="multipart/form-data"to your form
seccondly the action of the form should be the file you are posting to (the iframe source) and the javascript should be run from onsubmit
finally you need to give the iframe an id for cross browser support
i end up with this
JS:
function test(){
iframe = document.createElement("IFRAME");
iframe.name = "iframe_upload";
iframe.id = "iframe_upload"; //some browsers target by id not name
document.body.appendChild(iframe);
document.getElementById("test").target = "iframe_upload";
}
HTML:
<form id="test" method="post" target="iframe_upload" enctype="multipart/form-data" onsubmit="javascript:test()" action="test.php">
<input name="image" type="file" />
<input type="submit" value="Submit" />
</form>
PHP:
<?php
print_r($_FILES);
?>
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" >
<input type="file" name="file1"><br><br>
<input type="Submit" value="Upload File" onclick="showProgress()" method="POST">
<script>
function showProgress() {
if(document.frm.file1.value == "")
{
alert('Please upload a file');
}
else
{
document.getElementById('progress').style.display = 'block';
}
}
</script>
In my jsp file I have the above code. If there is no file selected the alert('Please upload a file') is displayed successfully . But it calls the servlet program Readcsvv and goes to the next page.
After diplaying the alert box i want to program to be in same page. What should I do for that?
<input type="Submit" value="Upload File" onclick="return showProgress()" method="POST">
use this with return false
Try below,
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" >
<input type="file" name="file1"><br><br>
<input type="Submit" value="Upload File" onclick="return showProgress();" method="POST">
<script>
function showProgress() {
if(document.frm.file1.value == "")
{
alert('Please upload a file');
return false;
}
else
{
document.getElementById('progress').style.display = 'block';
return true;
}
}
</script>
Try this:
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" onSubmit="return false;">
If this were jQuery you would have to return false at the end of an onClick event handler. I would try return false;.
You also need to change your onclick attribute to be an onsubmit attribute on the form element.