Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Upload Files Without Page Reload or Form Submission

Reply
Thread Tools

Upload Files Without Page Reload or Form Submission

 
 
VUNETdotUS
Guest
Posts: n/a
 
      11-02-2007
My goal is to upload files without submitting the form. I am not
looking for the code here but rather a concept. I did a little
research and discovered that I can submit a form to an invisible
dynamically creeated iframe (to avoid page reloading) and the server
page will invoke the client page (where the form is) with
window.parent.foo function.
However I suspect that this is an old method and I miss some improved
ideas. What can one suggest for my case?
Thanks.

 
Reply With Quote
 
 
 
 
Jeremy
Guest
Posts: n/a
 
      11-02-2007
VUNETdotUS wrote:
> My goal is to upload files without submitting the form. I am not
> looking for the code here but rather a concept. I did a little
> research and discovered that I can submit a form to an invisible
> dynamically creeated iframe (to avoid page reloading) and the server
> page will invoke the client page (where the form is) with
> window.parent.foo function.
> However I suspect that this is an old method and I miss some improved
> ideas. What can one suggest for my case?
> Thanks.
>


Actually, this is still the only (form-based) method of uploading a file
without the page appearing to reload. You can do some neat tricks with
it though - for example, monitoring the progress of the file upload with
asynchronous requests lets you create nice little progress bars (which
users really like, if they are able to see it - nobody likes waiting for
an upload to finish when they have no idea of when that might be).

Jeremy
 
Reply With Quote
 
 
 
 
VUNETdotUS
Guest
Posts: n/a
 
      11-02-2007
On Nov 2, 1:11 pm, Jeremy <(E-Mail Removed)> wrote:
> VUNETdotUS wrote:
> > My goal is to upload files without submitting the form. I am not
> > looking for the code here but rather a concept. I did a little
> > research and discovered that I can submit a form to an invisible
> > dynamically creeated iframe (to avoid page reloading) and the server
> > page will invoke the client page (where the form is) with
> > window.parent.foo function.
> > However I suspect that this is an old method and I miss some improved
> > ideas. What can one suggest for my case?
> > Thanks.

>
> Actually, this is still the only (form-based) method of uploading a file
> without the page appearing to reload. You can do some neat tricks with
> it though - for example, monitoring the progress of the file upload with
> asynchronous requests lets you create nice little progress bars (which
> users really like, if they are able to see it - nobody likes waiting for
> an upload to finish when they have no idea of when that might be).
>
> Jeremy


Thanks! Progress bar is a great idea. I saw some examples before.
Though how do I know the upload status, unless you mean a rotating
image which can be shown and removed after submission?

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      11-08-2007
VUNETdotUS wrote:
> Thanks! Progress bar is a great idea. I saw some examples before.
> Though how do I know the upload status, unless you mean a rotating
> image which can be shown and removed after submission?


You can use an implementation of the IXMLHTTPRequest interface to make
requests to the server and to evaluate the corresponding response message.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
Darko
Guest
Posts: n/a
 
      11-08-2007
On Nov 2, 4:51 pm, VUNETdotUS <(E-Mail Removed)> wrote:
> My goal is to upload files without submitting the form. I am not
> looking for the code here but rather a concept. I did a little
> research and discovered that I can submit a form to an invisible
> dynamically creeated iframe (to avoid page reloading) and the server
> page will invoke the client page (where the form is) with
> window.parent.foo function.
> However I suspect that this is an old method and I miss some improved
> ideas. What can one suggest for my case?
> Thanks.


If you meant AJAX, then no - you cannot do that. That would require
Javascript
to read local files and get their contents, which will never be
possible, for
security sake. I hope they're going to add such functionality that
would somehow
get these contents through a file input, if it's already filled by the
user.

 
Reply With Quote
 
VK
Guest
Posts: n/a
 
      11-10-2007
On Nov 10, 9:57 pm, TheBagbournes <(E-Mail Removed)> wrote:
> If your form with the <input type="file"> has the id "file-form", them you'd write
>
> Ext.Ajax.request({
> form: 'file-form',
> url: '/myUpload.do', // Optional if the form has the correct action attribute
> params: { // Optional params that are temporarily added as hidden
> type: 'jpg'
> caption: 'A picture'
> },
> isUpload: true // Optional if the form has enctype="multipart/form-data"
> success: function() {
> alert('File uploaded');
> },
> failure: {
> alert('File could not be uploaded');
> }
>
> });


So what is this code about? AJAX has nothing to do with the OP's
question, because it cannot submit files from input="file" elements.
This is why for multipart/form-data forms with file upload AJAX never
was an option, one needs to stay with frame/iframe for that.

To OP: the security model of file upload element treats each such
element as one-time only, nontransferable user permission to read and
upload a single file from her hard drive to the server where such
permission explicetly expressed by direct physical user's interaction
(click on Browse..., select file, click OK).

Any deviation from this model you may find on a particular browser is
a serious security hole to be reported rather than to be anyhow used.
Lucky all popular browsers do implement this model very strictly. The
only difference I'm aware of is that IE allows to invoke click()
methods for type="file" to call "Select file" dialog w/o user clicking
Browse... button. FF considers it as a violation of the spelled
security model and I do agree with them (anyone is welcome do not).

 
Reply With Quote
 
dhtmlkitchen@gmail.com
Guest
Posts: n/a
 
      11-12-2007
On Nov 2, 7:51 am, VUNETdotUS <(E-Mail Removed)> wrote:
> My goal is to upload files without submitting the form. I am not
> looking for the code here but rather a concept. I did a little
> research and discovered that I can submit a form to an invisible
> dynamically creeated iframe (to avoid page reloading) and the server
> page will invoke the client page (where the form is) with
> window.parent.foo function.
> However I suspect that this is an old method and I miss some improved
> ideas. What can one suggest for my case?
> Thanks.


It's an old method. You're right. FileList should be the way to go. I
haven't used this yet.
http://www.w3.org/TR/file-upload/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
using refresh to reload page, problem is it loads header, footer andeverything, can I avoind those to reload? VT HTML 8 10-13-2010 11:09 PM
JavaScript refresh: <a href="#" onClick="window.location.reload( true );">Reload</a> Joshua Beall HTML 26 06-29-2007 06:31 PM
Is there an SNMP equivalent to "Reload in [x]" / "Reload cancel" commands? steve.chambers@gmail.com Cisco 5 05-20-2006 04:06 AM
Form submission without reloading the contained page HP ASP .Net 4 07-04-2005 06:27 AM
Changing data on the form without page reload Aleksandar Andjelkovic ASP General 0 05-24-2004 08:46 AM



Advertisments