I currently have a small form with two buttons - one for browsing and another for uploading an image. I feel that having two separate buttons for this purpose is unnecessary.
Is there a way to combine the browse and upload functions into just one button?
Here is the code snippet that relates to this issue: (When the upload button is clicked, it triggers a JavaScript function that calls a PHP file to handle the upload process)
<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>
I would appreciate any help or suggestions on how to streamline this process! Thanks in advance!