File Uploading

jcstanley · October 10, 2007

Hi

At the moment I have a very basic upload form which works fine.

I have read about progress bars but have come to the conclusion that they are too complicated and difficult to implement, so I thought, is there a way to display a .gif file while the file is being uploaded. Is this possible?

Here is what i have already:

$target_path = "bulletin/";
$target_path = $target_path . basename( $_FILES['file']['name']); 
$_FILES['file']['tmp_name'];  
if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
   echo "";
} else{
    		echo '<body bgcolor="#FFFFFF">';
	echo '<p align="center" style="margin-top: 0; margin-bottom: 0">';
	echo '<b><font face="Tahoma" size="4" color="#FF0000">Incomplete Form</font></b></p>';
	echo '<center><p><b><font face="Tahoma" size="2" color="#FF0000">Please select a File to Upload</font></b></p>';
	echo '<center><p><font face="Tahoma" size="2" color="#000000"><a href=insert_bulletin_form.php>Try Again</a></font></P>';
	exit;
}

Any suggestions greatly appreciated

Thanks

jaikar · October 10, 2007

yes, you can very well do that.

1. create an iframe in the page and set the display to none

2. while you submit the file upload, make the target to that iframe

3. in the onsubmit event, use a javascript document.getElementById('element_id').innerHTML='<img src="loding.gif" />';

4. now you are submiting the file upload to a file throught iframe, when the file is sucessfully uploaded, write a javascript code. parent.window.location="redirected_page.php";

5. thats it

jcstanley · October 10, 2007

thanks but i don't quite understand this:

2. while you submit the file upload, make the target to that iframe

how is this done?

I have made an inline frame in the same page and included the onSubmit javascript. Could you check this below and show me how you make the target to the iframe.

<form method="POST" enctype="multipart/form-data" action="insert_bulletin.php" onSubmit=document.getElementById('element_id').innerHTML='img src="loding.gif"/>';

	<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="46%" id="AutoNumber1" onsubmit="return FrontPage_Form1_Validator(this)" language="JavaScript" name="Bulletin" enctype="multipart/form-data">
    		<tr>
      		<td width="50%" align="right">
    		<div align="center">
	<center>
      		
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="53%" id="AutoNumber1" height="98">
          <tr> 
            <td width="34%" align="right" height="40"> 
              <p style="margin-right: 6; margin-top: 0; margin-bottom: 0"><b> 
                <font size="2" face="Tahoma">Bulletin Name:</font></b>
            </td>
            <td width="35%" height="40"><font face="Tahoma"> 
               <!--webbot bot="Validation" s-display-name="Title" b-value-required="TRUE" i-maximum-length --><input type="text" name="title" size="45" maxlength="" tabindex="1">
              </font></td>
          </tr>
          <tr> 
            <td width="34%" align="right" height="28"> 
              <p style="margin-right: 6; margin-top: 0; margin-bottom: 0"><b> 
                <font face="Tahoma" size="2">File:</font></b>
            </td>
            <td width="35%" height="28"> 
              <input type="file" name="file" size="33">
            </td>
          </tr>
        </table>
      		</center>

    		</div>
    		<p align="center">
    		
      <iframe name="Loading" src="loading.htm" scrolling="no" border="0" frameborder="0">
      Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></p>
    		<p align="center">

jaikar · October 10, 2007

give a id name to the iframe first, src should be a php file where you should have the upload php script

Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

create a div element

the form should start like below

<form target="loading" onsubmit="document.getElementById('show_loading').innerHTML='<img src="loding.gif" />'" name=" ......

.....

</form>

redbrad0 · October 10, 2007

Or you can just use Javascript that when the form is submitted it pops open another window saying to please wait while the form is loaded

window.open("upload_progress.asp?progressid=3",null,winstyle);

jcstanley · October 10, 2007

where abouts should the div element be created?

jaikar · October 10, 2007

wherever you want the loading to be displayed, you can create the div

jcstanley · October 10, 2007

Ok sorry i am getting really confused.

I have 2 files: insert_bulletin_form.php - Produces the form to upload the file

insert_bulletin.php - Actually uploads the file

So, in the insert_bulletin_form.php file i need to create an inline frame which has the source src=insert_bulletin.php, correct?

<iframe id="loading" style="display:none;" name="Loading" src="insert_bulletin.php" scrolling="no" border="0" frameborder="0">
      Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

And the upload form:

<form method="POST" enctype="multipart/form-data" action="insert_bulletin.php"  target="loading"  

onSubmit=document.getElementById('element_id').innerHTML='<img src="/images/loading.gif"/>';>

So in which file does the div element need to be created to show the gif?

Sorry for making this so complicated for you.

jaikar · October 10, 2007

in insert_bulletin_form.php file

Sign In

File Uploading

Recommended Posts

jcstanley

Link to comment

Share on other sites

jaikar

Link to comment

Share on other sites

jcstanley

Link to comment

Share on other sites

jaikar

Link to comment

Share on other sites

redbrad0

Link to comment

Share on other sites

jcstanley

Link to comment

Share on other sites

jaikar

Link to comment

Share on other sites

jcstanley

Link to comment

Share on other sites

jaikar

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information