Develop Reference

PHP, Image preview with javascript and uploader by PHP

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>

event after selecting file using html input file multiple

I would like to start uploading the files that I have just selected using the input type="file" multiple="multiple" html element.
Which event can I hook into to run code right after the file dialog has closed and I have completed my files selection.
My html code looks like this:
<form enctype="multipart/form-data" action="/photo" method="post">
<input type="hidden" name="section_id" value="234" />
<input type="file" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />
</form>

$('input[type=file]').change(function (e) {
console.log(e);
console.log(e.target.files); //a list of the files
});
for file array, you can select it by type with specific class as well.
<input type="file" class="fileclassputhere" multiple="multiple" id="section_photos" name="section_photos[]" accept=".jpg, .png, .gif" />
<script>
$('input[type=file].fileclassputhere').change(function (e) {
console.log(e);
console.log(e.target.files); //a list of the files
});
</script>

Add a change eventListener to the input:
var input = document.getElementById('input')
input.addEventListener('change', function(e){
console.log(e);
console.log(e.target.files); // a list of the files
});

<input type="file"> onChange calls js out of mutliple <script>-Tags

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>

Object name for <input type=file?

on my html I have this tag for user browse a file from their computer, like this
*<form action="SamePageUpload.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="FINISH" onClick="echoHello()">
</form>*
by hit Submit button is clicked it will trigger 'echoHello()' js function, I want to pass the image to a php file SamePageUpload.php
*
<script>
function echoHello()
{
var url = "SamePageUpload.php";
var cv = ????;
$.post(url, {contentVar: cv}, function(data){
$("#alertDiv").html(data).show();
});
}
</script>*
but I don't know what ???? should asign to cv, I want to know what's the variable that represent the image file user choose? Please help, thank you

JCrop will not work in my JavaScript code

Ok so the JCrop bit of code below doesn't work.
The visitor uses the file input element to select an image on their computer which is then shown in an img tag before it is uploaded. The visitor then uses JCrop to select what part of the image they want to upload. Once uploaded I will use a servlet to crop and save the image in a database.
Any ideas anyone? Thanks
JavaScript in header:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="tapmodo-Jcrop-5e58bc9/js/jquery.Jcrop.js"></script>
<link href="tapmodo-Jcrop-5e58bc9/css/jquery.Jcrop.css" rel="stylesheet" type="text/css"/>
<script>
<!--
$(document).ready(function () {
$("#previewInput").change(function(e) {
var file = e.originalEvent.srcElement.files[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
img.id = 'previewimg';
reader.readAsDataURL(file);
$("#preview").html('Please crop your image below:<br />');
$("#preview").append(img);
setTimeout(1250);
$('#previewimg').Jcrop({
aspectRatio: 1,
onChange: setCoords,
onSelect: setCoords
});
});
});
function setCoords(c)
{
$('input[name=x1]').val(c.x);
$('input[name=y1]').val(c.y);
$('input[name=x2]').val(c.x2);
$('input[name=y2]').val(c.y2);
};
-->
</script>
HTML in body:
<h1>Thanks for registering!</h1>
Upload a display picture:<br />
<div id="upload">
<form action="crop" method="post" enctype="multipart/form-data" >
<input id="previewInput" type="file" name="image"/><br />
<input type="hidden" name="x1" value=""/>
<input type="hidden" name="y1" value=""/>
<input type="hidden" name="x2" value=""/>
<input type="hidden" name="y2" value=""/>
<input type="submit" name="submit" value="Upload and crop image"/><br />
</form>
<div id="preview"></div>
</div>
Or click here to view your account and keep the default image<br />

I am the author of Jcrop. I think the problem may be that your element is not inserted into the DOM yet. It usually needs to be there for Jcrop to figure out the size. Once you do so, in your code above, you might also try using $(img) instead of selecting by the ID. Sometimes when you insert an element it takes a tiny amount of time for the DOM to respond, so trying to select it immediately after sometimes causes problems. Again, I'm not completely sure if these are the problems you're having, but that's my initial reaction.