I am trying to create a form which allow async file uploading with asp.net. I realize you cannot upload a file with ajax per se so I am examining alternatives
What is the best way to do this? Create an Iframe on the page with the entire form including the file input? Can I on the parent to the frame have the submit button which forces the frame to submit and then displays some sort of spinner to indicate file is uploading? Ideally upon completion I'd like to redirect the user to another page. Is there a somewhat easy way to do this???
Have you tried using one of the jquery plugins vice doing it by hand?
http://aquantum-demo.appspot.com/file-upload
Why not use the ASP.NET AJAX Control Toolkit's AsyncFileUpload control? It's free and works pretty well.
You could use http://jquery.malsup.com/form/#file-upload
Have it post to a page that will handle a file upload on the server side in your usual way.
I like to have the page return JSON with a success/failure flag and message, then parse the response to determine if the upload succeeded.
Related
I'm trying to retrieve the html of a page with some Ajax on.
Problem is that Webclient.Downloadstring() returns to fast, so the Ajax page haven't finished loading => I'm not getting the right html :(
Is it possible to call another function or similar, so I for example request the page, wait a few seconds and then read the response? (so I allow the Ajax to finish loading before I retrieve the html)
Thanks,
Louisa
The WebClient by default only fetches the (HTML) contents of a single URL. It does not parse HTML and thus does not know about any CSS, images or javascript used on the page. You are trying to emulate the functionality of a full-blown browser, for which the WebClient alone is insufficient.
To achieve your desired behaviour, you will have to not only retrieve the HTML, but then also parse it, retrieve and execute javascript on the page and then get the resulting DOM. This is most easily achieved through a library that provides the functionality of a webbrowser to your application. Examples include System.Windows.Forms.WebBrowser (WinForms), System.Windows.Controls.WebBrowser (WPF) or Awesomium.
i'm searching for a way to upload huge files with jQuery and C#/VB.net (ASP).
I want to open an uploadform, select a file and upload it. After firing the upload (submit) it must be possible to leave the page with the upload form, and switching to another page within the same domain (Fire & Forget).
Can this be realized with jQuery and C# / VB.Net. On which Keywords i have to look to find a solution to get this working or is this impossible ?
Greetings
Marcus
You can use an async upload like following and then write a code to redirect a page.
http://www.dotnetjalps.com/2011/12/async-file-upload-with-jquery-and.html
at the end of process request method write following code.
context.Response.Redirect("YourPage.aspx");
I'm facing the following issue:
I have a C# asp.net file upload form with a submit button. After the form is submitted the file is uploaded and post-processing is started. The point is that the post-processing can take up to several minutes.
I would like to create some kind of asynchronous call of the post-processing function with showing information to the user.
So, the steps should be:
file form is submitted by user and upload is started
after the file is uploaded some information is shown to the user (e.g. "Processing..." or some loading-bar animation, etc.)
Meanwhile, the post-processing function is automatically started running in a background
After the post-processing function is finished the user is automatically redirected to another page
When i was searching the Internet I've found several examples but mostly only about asynchrounous call of functions, asynchrounous file upload (PageAsync method, etc.).
Any idea or techniques I should use or some tutorial?
Thanks in advance
That all depends on how fancy you want to get;
Meta-refresh that reloads the page until the background operation is finished
Some kind of ajax call that checks some resource for when the processing is done
HTML5 websockets. if supported, which it probably isn't.
Personally I would use the number 2. and use jQuery to poll the upload page every 500ms or something.
You can use AJAX
http://geekswithblogs.net/ranganh/archive/2008/04/01/file-upload-in-updatepanel-asp.net-ajax.aspx
http://vinayakshrestha.wordpress.com/2007/03/13/uploading-files-using-aspnet-ajax-extensions/
http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=upload+using+Ajax&qscrl=1#sclient=psy&hl=en&qscrl=1&source=hp&q=upload+using+Ajax+in+asp.net&aq=f&aqi=&aql=&oq=&pbx=1&fp=db9c4fafd449a821
The jquery/flash control uploadify will allow you to do this easily. They also provide a method for asynchronously calling a method on the event that the file upload completes as described in this comprehensive documentation.
I have looked at a lot of places for a good example, and this is the one I like the best so far.
It does not handle the uploading, but it does a fine job at showing real progress to the user and it is not difficult to implement
http://inov8.wordpress.com/2010/08/29/c-asp-net-creating-an-asynchronous-threaded-worker-process-manager-and-updatepanel-progress-monitor-control/
I've been looking for a way to achieve this behavior and I found this sample project.
The trick in this project is that it changes the form target to an iframe created on the fly.
So far so good, I can get the byte[] on the server-side. But I need to change an image preview after the file is uploaded.
How can I get the iframe to update the main page? Would I have to save it on a file on the disk, make a javascript callback to change the image url? Is there another way to do this? What's recommended?
This control suggested by vorrtex actually causes a full page postback, am I missing something or is it the correct behavior?
I recommend you to use AsyncFileUploader and UpdatePanel. You have to save file on the disk but you can use C# for changing imageUrl.
Add a <script> block to the page that gets loaded in the <iframe> that interacts with the parent page and updates whatever you need to.
You can use the project mentioned below to preview the image before uploading. Working sample is also attached.
http://www.dotnetspider.com/resources/40858-Preview-Image-before-uploading-using.aspx
This uses AjaxControlToolKit's AsyncFileUploadControl and HTTPHandler to upload the image.
The user needs to click on browse button to browse his system .He then selects a text file & clicks ok.Once he clicks ok all the data in the text file should be displayed in a text area.How do I do that? I am using JavaScript & c# designing aspx pages.It would be preferable if i avoid round trip to the server.
You can't do it without a trip to the server, the only way for you to get the content of the file is by submitting it as part of a form. You can make the trip to the server happen in an iframe via XHR and then update the text area with the result from the XHR call, so it sort of seems like one wasn't involved, but you can't directly access the content of files of the user's machine, for obvious reasons.
I know you said you would prefer a round trip, but its the only way you are going to be able to accomplish what you want.
You could put the file upload in an iframe, and do the upload behind the scenes (No page refresh, gmail does this :) ) then use AJAX to download the data and insert it into the textarea.
It can't in general be done, as answers here outline.
However, it can be done in Firefox 3+ only, using the uploadfield.files array. Other browsers would have to fall back to the server round-trip.
For security reasons, JavaScript cannot access the local filesystem like that.
Javascript cannot do that without putting a severe security risk on the user. That said, the file will need to be posted to your server.
As other posters here have indicated, you're not allowed to access the local filesystem from Javascript directly. But you can set up an action on your server to take the file form POST input, and simply echo the data right back out to the response. If you hide an iframe inside your page as the form POST target, that response data can appear in the hidden iframe, and then the page won't have to reload. Then once the iframe has loaded with the text, you can use JS to pull the text out of the iframe, and put it into the text area that you're interested in.
Alternately, if you're inclined to restrict usage to Firefox users with an extension, you should be able to accomplish this without a roundtrip using a Greasemonkey user script (see www.greasespot.com) or something like it, that uses the custom Mozilla extensions.