I saw there are similar question to this. But I couldn't find an answer. That's why I am posting this again. Sorry!!
I want to build a file uploader with percentage bar with in it using .net mvc 3.0
There are some jquery plugins. But they need html 5 support. I am trying to build it without html 5 support.
Currently what I do is upload files with Ajax support. When file is uploaded by user I make an ajax request and display loading.gif until requested completed. So it is a pretty strait forward code for simple image uploads.
Now I am trying to upload videos and send it to Vimeo through their REST APIs.
I could do the same thing. But since files are large I want to do it in a nice way.
My code is something like this
View
#using (Ajax.BeginForm("Upload", "Home", new AjaxOptions
{
UpdateTargetId = "form1",
InsertionMode = InsertionMode.Replace,
OnBegin = "ajaxValidate",
OnSuccess = "getGbPostSuccess",
OnFailure = "showFaliure"
}))
//.......
//rest of the form
}
Controller
public ActionResult Upload()
{
//Read file
//Post file to Vimeo (this is the part that take time to upload)
//get uploaded video content
return PartialView("xxxxx", Model); // return uploaded Video
}
I display a loading.gif using a small piece of javascript while this process happening. This code is working absolutely fine. As I mention before I want to make it more user friendly by putting a percentage progress bar.
Hope my question is clear.
Please help me...
Thanks in advance
But they need html 5 support.
Not necessary. For example the blueimp file upload plugin tests browser capabilities and could use the jQuery iframe transport if the browser doesn't support HTML5 XHR2. Here are more details about browser support.
Uploadify is another example which uses Flash if the browser doesn't suport XHR2.
Plupload is yet another very powerful plugin which supports a multitude of equivalents if the browser doesn't support XHR2.
So just pick a plugin, read the documentation, integrate it in your ASP.NET MVC 3 application and have fun.
Related
How to create token "#!" in asp.net mvc?
How to create html snapshot?
I have read google document, They talk create "Indicate to the crawler that your site supports the AJAX crawling scheme" by www.example.com/ajax.html#key=value to change www.example.com/ajax.html#!key=value.
But in asp.net mvc 4 I can't how to create "#!" because when i use #Ajax.ActionLink("link text", "controller", new { attribute router here },new AjaxOptions{ HttpMethod="GET", InsertionMode= InsertionMode.Replace, UpdateTargetId ="id to add function of ajax"}). So it gernater "action/?key=valuer" not like i expected "action/#!key=value"
So somebody help me. I want to google crawble link when ajax function do when i click a text and ajax function excute
what is html snapshot, is this create after when i excute ajax function( click text and ajax function do gernater hmtl to UpdattagetId(I code in asp mvc). So i can dont change any thing with existing i haved code: Ajax.actionlink(...) and gernerater html to UpdatetargetId)
Does anyone know what I need to get the ajax.beginform to work in my MVC4 project? I updated the jQuery library to version 2 and I have included the jquery.validate.js and jquery.validate.unobtrusive.js but the form is still posting to the new page rather than just updating the UpdateTargetId element
I have had a google and a lot of people seem to be having problems with a script called Microsoft.jQuery.Unobtrusive.Ajax but this isn't in my project. Do I need to install this, and if so do I then need to do a find and replace on live so that it uses on instead?
This is the form code:
#using (Ajax.BeginForm("AddImage", "Quote", FormMethod.Post, new AjaxOptions { UpdateTargetId = "Files" }, new { enctype = "multipart/form-data" }))
{
}
This posts to the quote controller addimage action and all that does is write out a string to the screen (which should appear in the Files div) but instead of doing an ajax call it is actually going to the Quote/AddImage page
All I had to do in the end was download the latest jquery.unobtrusive-ajax.js through nuget. This has been updated so it works with jquery 2
First, you're missing InsertionMode in your AjaxOptions.
Second, it seems you're trying to upload files using Ajax form? You won't be able to. Please see this post, for example.
Finally, Ajax.BeginForm is using jQuery.live() function, which has been removed as of jQuery version 1.9. See this question for more info.
You should install jQuery Migrate Plugin which will restore deprecated features. This will at least restore your Ajax form functionality. Alas, it won't help you upload files through Ajax. But that's a different topic.
I want to upload a file using the < s:file > tag, but Struts2 doesn't support Ajax for this functionality, as far as I know. I tried to do it using the Struts2 jquery plugin but it overwrites some jquery functions that i need an can't change right now (like .dialog()).
Is there an alternative way to do it?
There are many jquery based plugins for this purpose.
I am using this library. Its the most simple and elegant plugin, minimal requirements and lots of options.
Here are some other plugins which I considered(my preference was a plugin which doesnt use flash)
This one shows thumbnail before uploading and also overall progress
This one shows remaining time, uploading speed and remaining size
This is how I do it (I'm not using JQuery):
I hide an iframe inside my page. I give it an id (iframe for example) and a name (the same than the id).
I set the attribute "target" on my form to the id of the hidden iframe (then, the response from the server is loaded inside the iframe.
I register an event handler on the iframe to react on the onload event. The handler analyse the response from the server. Alternatively, I sometime just return javascript code from the server in a <script> tag. This code performs action on the client upon success or failure of the intended action.
If you like the idea, you may want to read this article or this one:
I have a page in my web flow where I want to upload a file without refreshing the page. I tried using an Ajax call for that, but failed. I couldn't figure out how to send the data in the uploaded file to the server side/back end for further processing. I'm using the Spring MVC framework and I don't want to use PHP.
Can anyone suggest a solution or some sample code with which I can get my job done? I am very new to JavaScript.
One more thing is i have to get back to the same page after going to server side to process uploaded file and return to same page with a string from server side.all this happen without refreshing the current page
Any suggestion would be highly appreciated.
Assuming you've already gotten your form built and server-side controller set up to handle the upload, this little snippet should get you on your way to AJAX-y refresh-less file uploading glory!
//create a new FormData reference
//(note: you could use getElementById or querySelector)
var myForm = document.forms.myUploadForm;
var fd = new FormData(myForm);
//create and open an XHR
var xhr = new XMLHttpRequest();
xhr.open("POST","http://www.example.url/the/path/to/your/upload/controller");
//set up event listeners (optional)
xhr.onreadystatechange = monitorStatusFunction;
xhr.onprogress = updateProgressBarFunction;
//send the form (w/ no page refresh!)
xhr.send(fd);
I Struggled for lot many days and at last i figured out a solution which may not be the best solution but i am posting it here so that anyone like me can get help from this..
To meet all my requirements
I opened a jsp page as a popup from my jsp page and from that page i landed on my controller and done with my work on the server side and returned a string depending upon the content of the file uploaded to the same popup page and from the popup i transfered that string to my parent page.
Hence my work is done without refreshing the page...
Steps to do this
1.open a popup as follow
window.open('//url of jsp page to open','//somename','//properties of popup page');
2.land on your controller from the popup and return to the same jsp page with a string i want from the jsp page.
3.pass that string to the parent page as follow.
window.open.urparentjspfuntion(valuefromcontroller);
4.in parent page define a function to do what ever you want.....
I hope this solution may help so of those like me...
I am looking for a documented, cross-browser supported jQuery plugin that I can use to build a site like this:
http://redsquareagency.com/
As you can see, as you navigate through the site, the URL changes via a hash and all new pages are loaded via ajax calls instead of page loads. This allows for some neat animations to be used when a new page is loaded.
I've searched for a while trying to find a good plugin that provides this functionality. The best I can find is jQuery Ajaxy: http://balupton.com/sandbox/jquery-ajaxy/demo/
But, the documentation is lacking, and I found it incompatible with the latest jQuery version (1.6.0).
Anyone know of plugins that can accomplish this?
Hmmm I don't think there is ONE plugin that does everything. But you can pretty much do some jquery your self with combination of jquery history plugin.
What you do do is write some code make all your hrefs load via AJAX. Like this -
$(document).ready(function() {
$.history.init(loadContent);
$('#navigation a').not('.external-link').click(function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
And that's it. The jquery history plugin will take care of the rest. You should also read google's documentation on how to do this properly for them to index it.
What you looking for is swfaddress. It provides deep linking for flash and ajax sites (obviously your looking for the ajax feature). You basically just have to listen for a page change request and load content accordingly.