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:
<i class="fa fa-pencil"></i> Edit Client Image
<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: <i class="fa fa-pencil"></i> Edit Client Image
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.
Related
I tried to combine the browse button and submit button together .When the button is clicked , Iam able to select the file.
But the file doesn't get uploaded
This is the form
HTML:
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" method="post" id="myform" enctype="multipart/form-data">
<input type="file" name="upload" id="upload" style="display:none">
<button id="browse">Upload</button>
</form>
JQuery
$(document).ready(function(){
$("#upload").change(function(){
$("#myform").submit();
});
$("#browse").click(function(){
$("#upload").click();
});
});
Then I submitted the data
PHP :
if($_SERVER["REQUEST_METHOD"]=="POST")
{
$file=$_FILES["upload"]["name"];
$folder='uploads/';
$err=$_FILES["upload"]["error"];
$target=$folder.$file;
$temp=$_FILES["upload"]["tmp_name"];
echo $err;
move_uploaded_file($temp, $target);
}
I got the output as 4 . This means that no file was uploaded .How can i resolve this issue?
There is a easy an elegant way to achieve that.
Add the type="submit" to the button because not all web browser are using "submit" as default button type
Add a form event listener that triggers when "submit" event is raised
Example code:
$(document).ready(function(){
$('#myform').submit(function(e) {
// Remove following two lines in order to perform the submission
// I added the two lines in order to avoid the real submission (Test purposes)
e.preventDefault();
alert('Submitted!')
})
$("#upload").change(function(){
$("#myform").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="example.html" method="post" id="myform" enctype="multipart/form-data">
<input type="file" name="upload" id="upload">
<button id="browse">Upload</button>
</form>
Remember to remove the "preventDefault" and the "alert" lines that I included in order to execute the code snippet without redirect you to another page.
I'm working on a simple webpage for a company and the company wants to be able to edit the content themselves from time to time. However they have no programing knowledge and therefore I want to use an embedded HTML editor, I have chosen jQuery TE.
The problem is that I only know how to use this as a form, e.g.:
<form id = "wyForm" method="post" action="test.php">
<textarea class="editor"name = "testText">Hi</textarea>
<input type="submit" class="wymupdate" />
</form>
Then I would convert the textarea to an editor with jQuery:
<script> $('.editor').jqte() </script>
This makes it possible to send the result to a .php page that updates the database. However many times I don't want to use a textfield or a form, but just a simple object that I convert to an editor in the same way. But how do I save the change in that case?
Catch the form submit event and copy the content to a hidden field.
<form id = "wyForm" method="post" action="test.php">
<div class="editor" name="testText">Hi</div>
<input type="submit" class="wymupdate" />
<input type="hidden" id="editorHiddenField" />
</form>
...
$('#wyForm').submit(function() {
$('#editorHiddenField').val($('.editor').html());
});
You may need to use an API to get the content instead (I'm not familiar with the plugin), but the concept is sound.
Edit - If you don't want to use a form at all:
<div class="editor></div>
<button id="SaveButton">Save</button>
...
$(document).ready(function() {
$('#SaveButton').click(function(e) {
e.preventDefault();
$.post('savepage.php', { data: $('.editor').html() }).done(function() { alert('saved!'); });
});
});
I am using this reference
http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php
for ajax uploader ,its working absolutely fine for single upload but i want to convert this script into multiple upload with the help of your guidance also helps are definitely appreciated..
I just want to know how do i target a multiple iframe with the using of single form. Current script is target on a spacefic formId like this and this form contain only one input file...
Code
<script type="text/javascript">
function init() {
document.getElementById("file_upload_form").onsubmit=function() {
document.getElementById("file_upload_form").target = "upload_target";
document.getElementById("upload_target").onload = uploadDone;
}
}
window.onload=init;
<script>
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="http://www.appifylabs.com/web/php-upload-progress-bar/uploaderSecond/upload.php/">
<input name="file" id="file" size="27" type="file" multiple="multiple"/><br />
<input type="submit" name="action" value="Upload Image" /><br />
<iframe id="upload_target" onload="uploadDone()" name="upload_target" src="" style="width:600px;height:600px;border:1px solid #ccc;"></iframe>
</form>
Attempt didn't work
<script type="text/javascript">
function init() {
document.getElementById("file_upload_form").onsubmit=function() {
document.getElementById("file_1").target = "upload_target_1";
document.getElementById("file_2").target = "upload_target_2";
}
}
window.onload=init;
<script>
Notice
I don't want to use any third party uploader like uploadify,JqueryUploader,Valum etc only the reason for learn
Each form can have only one target. And target is a property of the FORM element, not the INPUT ones (you tried above).
One possible solution is to clone the form using Jquery, set the corresponding target to the required IFRAME and submit each clone.
I have this little form that has a button loading a little icon onto the form itself.
The button says 'browse', and there is another button says 'upload image'.
I find it kinda unnecessary to have two buttons to upload the image.
How can I make the upload happen on the end of Browse ?
here's the code by the way.
(The upload button just activate the js that calls a php file that does the trick, the js function updates it on the form)
<form class="jQ-form" action="includes/ajaxupload.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<fieldset>
<button id="image_upload_button" style="float:left;" onclick= "$('#upload_area').css('display','none');
$('#upload_area').fadeIn('slow');ajaxUpload(this.form,'includes/ajaxupload.php?filename=filename&maxSize=200000&
... more func data.'); return false;" disabled>upload icon</button>
<input type="file" id="upload_file" name="filename" style="float:left;width:70%;" size="42"/>
<p style="float:right;color:#a2983c;margin:10px;width:373px;">
Pick a nice icon that is max 300x300 pixels please
</p>
<?php
echo '<div id="upload_area" style="'.((($theiconname!='') && (file_exists($thumb_path.$theiconname))) ? '' : 'display:none;').'float:left;
width:50px;height:50px;border:3px solid #000;margin-top:12px;margin-left:3px;">';
if ($theiconname){
if (file_exists($thumb_path.$theiconname))
{
echo'<img id="the_logo" src="'.$thumb_path.$theiconname.'"/>';
}
}
?>
</div>
</fieldset>
</form>
Thanks in advance!
Sure! Just detect when the file input field has been changed, then submit the parent form. I notice you're using jQuery so I'll provide an answer using that:
$("#upload_file").change( function(){
$("#standard_use").submit();
});
Alternatively, if you're submitting this via AJAX and not actually intending to submit the form, then replace $("#standard_use").submit(); with whatever function would normally fire when someone pressed your "upload image" button.
I need jquery to check if my posted filename (up_image) is empty or not.
if it's empty i need a div tag to be shown and come with some kind of alert message.
if not, just do the
$("#submit").submit();
<form action="/profile/" method="post" enctype="multipart/form-data" id="submit">
<p>
<label for="up_image">image:</label>
<input type="file" name="up_image" id="up_image" />
</p>
Upload
</form>
$(function() {
$("#post_submit").click(function() {
var fil = $("#up_image");
if($.trim(fil.val()).length == 0) {
alert("Choose a file!");
fil.focus();
return false;
}
$("#submit").submit();
});
});
1: use a standard submit button to submit your form rather than a javascript-dependent link, for accessibility reasons, and to prevent brokenness if someone tries to right-click-open-in-new-window or other similar action on the link. If you want it to look like a link, you can still use a button, just apply some CSS to make it no longer look like a button.
2: use the form.onsubmit event to do validation rather than relying on a submit button click (forms can also be submitted by pressing enter, which may not always generate a button click)
<form id="uploadform" method="post" action="/profile/" enctype="multipart/form-data">
<p>
<label for="up_image">image:</label>
<input id="up_image" type="file" name="up_image" />
</p>
<p>
<input type="submit" value="Upload" />
</p>
</form>
<script type="text/javascript">
$('#uploadform').submit(function(e) {
if ($('#up_image').val()=='') {
alert('Please choose a file to upload.');
e.preventDefault();
}
});
</script>