Jump to content

Recommended Posts

Hi there

 

I'm running in some browser-related issues right now trying to create an ajax upload application. ( Well, technically speaking it's not really ajax, it's kind of a hack but as far as I know it's the only way to do it. )

 

What's going wrong is the following :

 

I've got a form with the attributes :

 

action="upload.php" and target="hiddenUploadFrame"

 

Then I've got my file input field and I've got my submit button ( to wich I bind my javascript function and a false return so the page doesn't reload ... otherwise this wouldn't really be a usefull thing to do  ::):P ).

 

onsubmit="ajaxUpload(); return false"

 

Now when I click this submit button It's supposed to echo my result ( being a string : "upload completed" ) in the iframe.

I've set the iframe visible while still in development but when the application is finished the iframe will be invisible and the echoed result will be placed on my main page trough javascript      ... that aside.

In internet explorer this seems to work and I can upload my file and get the "upload completed" message in my iframe, yet in firefox this doesn't work and my file doesn't get uploaded. So I can only conlcude my php file isn't being loaded ... leaving me wondering why ?

 

If I use a dummycode such as :

 

<?php echo "test"; ?>

 

it still won't be echoed so my php code doesn't matter in case anyone would ask for it ..

 

I hope anyone knows a solution to this because in all honesty it isn't making any sense to me.

K, here we go ...

 

I've got to tell you though, for some reason this doesn't work in IE either  :facewall:

I've never used iframes before, my teacher told me they're evil and boy was she right.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testfile</title>
</head>

<body>

<form enctype="multipart/form-data" action="php/testimonial.php" method="post" onsubmit="return false" target="frame">
<fieldset>
	<input type="file" name="file" />
    	<input type="submit" name="btnUpload" id="btnUpload" class="submit"  />
</fieldset>
</form>
    
<iframe name='frame' id='frame' src="#"></iframe>

</body>
</html>

 

<?php

echo "Wtf is going on?!";

?>

Oh yes they are evil.  That sample you posted, won't it do nothing at all because the onsubmit returns false?

 

I know they're evil and I fully agree, but it's the only way to make an ajax kind-off upload form  :'(

 

Furthermore I believe the return false makes sure the page doesn't get reloaded, I don't know if it affects the target if you specify one ( my frame in this case. ), and it did work in IE a while ago in my full project, it seems quite random to me at the moment, can't really get to understand it!  :facewall:

I know they're evil and I fully agree, but it's the only way to make an ajax kind-off upload form  :'(

You don't need an iframe to make it work. What does your javascript look like?

 

I also notice a difference in your previous code in comparison with the form code you posted.

the following:

onsubmit="ajaxUpload(); return false"

does not correspond with:

<form enctype="multipart/form-data" action="php/testimonial.php" method="post" onsubmit="return false" target="frame">

now where did the ajaxUpload function go?

I removed it for ease of use when giving an example code.

 

The ajaxUpload(); function in my javascript is a simple function with an alert in it, a dummy function as my javascript still needs to be constructed. If I'd get this working this function would contain some code to create a small "uploading" animation and catch wether the uploading has passed to inform the user of that.

 

Could you enlighten me on the possibility of creating an axaj-like form upload without using iframes if you will ? I've been looking at various options but none of them seemed to come up with a way to eliminate the use of an invisible iframe. An iframe-free solution would kind of be a gods gift  :)

 

Thanks for your reply.

I removed it for ease of use when giving an example code.

 

The ajaxUpload(); function in my javascript is a simple function with an alert in it, a dummy function as my javascript still needs to be constructed.

Well if you want an ajax solution the javascript part is the most important part to focus on. This is where you would handle the post/get request, fetching the form values and updating the mainpage.

 

Could you enlighten me on the possibiliteit of creating an axaj-like form upload without using iframes if you will ? I've been looking at various options but none of them seemed to come up with a way to eliminate the use of an invisible iframe

 

I usually don't use ajax for uploading files I find traditional forms suffient. However take a look at the following link http://digitarald.de/project/fancyupload/3-0/showcase/attach-a-file/. It doesn't use a iframe, however it does use flash. But it does demonstrate that you don't need an iframe.

Thanks for the link.

 

I didn't quite think of the possibility by using flash before. I'll check that information out and see if I can find a way to make it work with amfphp wich I'm learning at the moment.

 

For the time being I'll just let the upload thingy refresh the page, I need to get some urgent rest. I'll check back later.

 

Thanks a ton allready!  ;)

  • 4 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.