I am creating one application in .net MVC, in which I am using jQuery AJAX to post some data to server. The data posting is working fine, but I also need to upload one image along with the data. I have searched on stack over flow for similar question but they are not able to help me. I donot want to use flash to upload file, pure jquery solution will help me.
Using some solution I tried to post to server, but on server side I am not getting file data.
Please can some body tell me how to implement file upload in jQuery ajax?
Thanks
Ashwani
I think you're out of luck if you want ajax like uploading without flash. Due to security limitations javascript can't do all the things required. Off the top of my head i'd say your only other option will be to use an iframe to make it appear as thought it was an ajax post.
Why not use flash though? YUI Uploader is amazingly simple and works great!
Related
Some time ago I start to work with Ajax, and I realy want to learn the right way to use it. My websys load the content with Ajax but I noted that if I change the HTML link code in Chrome or any other Nav the requisition will be done any away. My question is what is the right way to secure and verify the acess of links, and how I can do that with CI Framework and Ajax. My idea is verify with session integrating that with ajax loading the content based on the permission of user, but I don't know where I put that code in MVC Controller structure and how integrated that with the view/Ajax. I appreciate if someone could share some example code because I don't have any clue to solve that puzzle.
I am trying to implement a comment mechanism in which a user can post a comment and also upload multiple files with it. I am using a g:formRemote for the comment part but I learned that ajax request does not supports file uploads. SO how do I do this? I found few plugins but they did not work for me as I have to save comments as well and these plugins did not support that. I found a way on internet by using iframes, but I am not sure how to do that. Any help would be very appreciated. Thanks
Try to use jQuery Form plugin, it supports ajax file uploads as well so you don't need to implement this by yourself. It also allows to track upload progress.
I've spent several hours of googling. Can anybody point me to an example of big file uploader with progress with backend on ASP.Net MVC3. I found many different solutions, but most of them use PHP as backend, and it's a bit hard for me to convert. Also I think there have to be some examples for ASP.Net MVC3.
PS I don't consider paid components, please don't suggest them.
Uploadify - there you have it :)
Set maxRequestLength in the web.config
http://midnightprogrammer.net/post/Upload-Files-In-RAZOR-With-jQuery-Uploadify-Plugin.aspx
You could try out Telerik Upload not sure what the file size limit is though.
This is a free and opensource component from Telerik.
I spent a good amount of time getting the right plugin too.
I use this :
http://valums.com/ajax-upload/
Uploadify uses flash to send files, which was bad for me as i needed upload from authenticated users ONLY. And flash would not send the cookies and so your application will treat the upload request as anonymous. If that is not an issue, uploadify works fine too.
Here is how i implemented it in mvc3 -
Create a controller / action to receive the opload file.
Change the 'action' property of the plugin to point to it -
// url of the server-side upload script, should be on the same domain
action: '/controller/action'
Make sure that action returns JSON object with a property in it with 'success' = 'true'/'false'
I need for users to upload files (mostly images) without leaving the current webpage. What's the best tool, library or mechanism for doing this? I'm using the latest jQuery and Spring webmvc (with JSP), so if there's already a mechanism within them then that's ideal.
It would also be really great to have some kind of progress bar. Does that mean it requires coordination with the server to read the progress (where Spring would have to come into play)? Or is there a mechanism within JavaScript for this?
You should check out Plupload.
Plupload offers a cross-browser
JavaScript File uploading API that
handles multiple file uploads,
client-side progress meters, type
filtering and even client-side image
resizing and drag-and-drop from the
desktop. It achieves all of this by
providing backends for Flash,
Silverlight, Google Gears, HTML5 and
Browserplus and picking the most
capable available option.
Its really neat! Here's a link to some of their Demos...
http://www.plupload.com/example_jquery_ui.php
... and a screenshot of the jQuery UI queue widget (it has a progress bar!):
I hope this helps.
Hristo
I use uploadify pretty regularly: http://www.uploadify.com/
However it does use flash for the upload mechanism and as a result may create some issues if the user is authenticated.
You should use AJAX on the client side
http://www.webtoolkit.info/ajax-file-upload.html This tutorial covers all client side.
Om the server side
This tutorlal covers most of this issue:
http://www.ioncannon.net/programming/975/spring-3-file-upload-example/
Yopu can use jquery as well or any other JS framework.
But the mist important thing is the fact You need to remember that your tag on client side should have.
enctype='multipart/form-data'
property. it means that your request contains muultipart data.
Uploadify does that trick > http://www.uploadify.com/
All samples are php but you should be able to convert it to your platform.
I know how to POST/GET text values with ajax,
but never know how to upload files with ajax.
Can someone just give a simple demo here?
GMail is actually using Flash for uploading files now... You could try looking into something like SWFUpload.
Ajax could certainly upload files by posting a HTML form with a input type="file" in it.
Some links to get you started:
http://www.webtoolkit.info/ajax-file-upload.html
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
Depending on the server/server side language you could probably send some kind of progress info to the client to render as a progress bar.
Check out this Ajax upload scripts, it has examples in Php and .Net. The basic idea behind the script is that you have to create an iFrame to handle this.
The YUI uploader is a flash based uploader that is designed to be very easy to integrate into javascript, with minimal knowledge of flash.
If you want a progress bar, I believe a pure javascript solution would require a server side piece to send back the current completion percentage via ajax, which would add quite a bit of complexity compared to a flash solution.