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.
Related
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.
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 trying to create an avatar uploader, but I want to be able to click only one button that opens the browsing window and then automatically calls the upload method from the AvatarUpload class.
The problem I have identified is that the form doesn't seem to be posting anything.
Any help would be great!
var_dump(isset($_POST['uploaded']));
if( isset($_POST['uploaded']) )
{
$img = new AvatarUpload();
$img->startUpload();
}
else
{
?>
<form method="post" enctype="multipart/form-data" name="uploadAvatar">
<p>
<input type="file" name="uploaded" id="file" onchange="this.form.submit()" />
<p>
</form>
<?php
}
?>
when you upload files they are listed under the $_FILES, not $_POST.
I have seen what seems like a hundred ways to do what I want but I can't seem to get a single one to work. I have a test page here : http://upcycledonline.com/test/Site/defaultUpCyc.php
What I want to happen is when the user clicks submit a pop window appears saying "Thanks! Your email has been added". When they click 'ok' the pop will close and the page refreshes. Right now I have the pop up going but after clicking the ok button it goes to my PHP page.
FYI: I am new to PHP and Javascript
Here is the form code and Javascript
<div id="signUp">
<script>
function confirmSubmit() {
if (confirm("Are you sure you want to submit the form?")) {
document.getElementById("FORM_ID").submit();
}
return false;
}
</script>
<?php
//if the validation falls back to php, then print the validation error
if (isset($error_message)) echo $error_message;
?>
<form method="post" action="process-form.php" id="emailForm" name="emailForm" target="_self">
<h4>Sign up to be notified when we go live!</h4>
<!--value="<?php if (isset($_POST['email'])) echo $_POST['email'];?>"-->
<label for="email">E-mail</label>
<input type="text" name="email" id="email" />
<!-- onSubmit="alert('Thank you. Your email has been added.')"-->
<input type="submit" name="submit" id="submit" value="Submit" onclick="return confirm('Are you sure?');">
<p>emails will not be shared with third parties</p>
</form>
<script>
<?php echo $validation_js_code;?>
</script>
</div>
You could do a couple things:
move your form processing logic to defaultUpCyc.php, submit the form to that URI and then have defaultUpCyc.php both process the form and reload the page.
Use AJAX, and post the data to process-form.php, this wouldn't require any refresh at all.
Do a redirect in process-form.php to defaultUpCyc.php.
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>