I'm trying to duplicate the photo upload script used on Facebook for changing your profile picture. I'm wanting for the user to click on a link and it automatically opens the file browser, and then when they click ok it submits the image.
What I'm wanting to know is how do you trigger the file browser on clicking a link, and how do you trigger to submit it when they press ok?
I already have a form, but want to make it more streamlined.
Current script:
<a href="#" data-reveal-id="changeImage"><i class="fa fa-pencil"></i> Edit Client Image</a>
<div id="changeImage" class="reveal-modal">
<form action="view.php" enctype="multipart/form-data" method="post" name="imgForm" id="imgForm">
<input type="file" name="clientImage" id="clientImage" accept="image/*" />
<input name="doEditImg" type="submit" id="doEditImg" value="Save" />
</form>
</div>
I worked this out with the following code.
Link: <a href="#" id="changeImage"><i class="fa fa-pencil"></i> Edit Client Image</a>
Form: <form action="view.php" enctype="multipart/form-data" method="post" name="imgForm" id="imgForm"><input type="file" name="clientImage" id="clientImage" style="visibility:hidden;" accept="image/*" onchange="this.form.submit()" /></form>
Jquery:
$('#changeImage').click(function(){
$('#clientImage').trigger('click');
return false;
});
the way it works is that there is a real file selector button but it is hidden.then there is a link such that all its functions are linked with the file selector so when the link is clicked the file selector is clicked and displays you the browse window.this is possible with jquery and some css
the following code may help you,modify it according to your needs
step1. the jquery file
You can either download it or use an api from Jquery.com
step2.the code
<html>
<script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script> //use an api link to avoid keep on downloading the latest jquery version
<script>
//the script below will load the preview of the image in a div which has an id of image_preview
if (window.FileReader) {
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('image_preview').innerHTML = ['<img class="the_img_prev" src="', e.target.result,'" title="', theFile.name, '">'].join('');
};
})(f);
reader.readAsDataURL(f);
}
} else {
alert('This browser does not support FileReader');
}
//the script will make the link act like a file selector
document.getElementById('files_selector').addEventListener('change', handleFileSelect, false);
</script>
<!-------------the form part---------------->
<form id="image" action="upload.php" method="POST">
<input type="file" id="files_selector" name="image" style="display:none;"><!--the hidden selector-->
<a href="#" class="image_selector" id="image_selector" onclick="document.getElementById('files_selector').click();" /><!--the link that acts as the selector -->
</form>
<div id="image_preview"><!-----the selected image will be previewed in this div---></div>
</html>
No point in re-inventing the wheel here :) There's a bunch of good jquery (and pure js) libs for file-upload...
jQuery File Upload Basic Demo looks like it will do what you want (and look good too). Another one I've heard a lot of good things about: Dropzone JS. Both support clicking a simple link to start the file-browser, select a file and start the upload process etc.
