i have created a webform.in that there is file upload.
i want to upload the image and show the thumbnail image on fileupload select,and On page submit i want to save the image path to database.
how can u implement it using ajax.
Thanks in advance.
Strictly speaking there is no way to implement an actual ajax file upload as its not supported by browsers. Html 5 has a lot more stuff you can do with file uploads.
You can implement your own hack using iframes, I have done this before. Basically you have an iframe that just has a form with the fileupload control on it and auto submit the form then call out to the parent window to update it when complete.
Alternatively use a pre built control something like the telerik one, you should be able to find a free one. http://www.telerik.com/products/aspnet-ajax/upload.aspx.
Related
I need to implement some, let's call it "dialog" in some old ASP.NET project that I took over. It's huge project so I'm not allowed to implement new things.
I have a form on which user can attach up to 3 file attachments, enter some 10-15 fields, and when required fields are filled, submit button get's enabled.
What need to be done is press submit, wait for any possible response for server, and then display some sort of dialog, alert, lightbox which would display short summary and list of correctly uploaded files.
What would be the best approach to do this in ASP.NET?
Considering jQuery Lightbox is designed for overlaying images rather than HTML I would recommend using FancyBox or FaceBox instead.
Is there any controls that I can download that allows a user to upload images with just a button click and be able to open the file dialog. I do not want to use the fileupload control.
If you're looking for something with better asthetics, Steve Sanderson has a nice Ajax uploader with a progress bar you can check out. Pretty straightforward installation.
http://blog.stevensanderson.com/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/
According to me: no. It would open a security hole as if you don't let an enduser decide which file to select from his/her drive an application would be able to leech anything from that drive.
The ASP.NET fileupload control itself simply renders to an <input type="file"> html element. How the browser renders that is up to the browser. However it can be styled. For example like this: http://www.quirksmode.org/dom/inputfile.html.
If it's on a corporate LAN and there's a certain file on a users drive and (s)he opens your page then you might want to use something like a custom written ActiveX control which can be embedded in the rendered html to perform the task.
A variant on this one would be to create a winforms user control, embed that into the rendered html (a so called smart client), with enough CAS settings on the client pc to be able to do this.
I'm using an asp:FileUpload control to give the user the chance to look for an image on the hard drive, once the user has chosen the image, after a button is pressed, I want to display the image in an asp:Image control.
I've been trying to get the full path of the file but I can't get it, I'm using Path.GetFullPath(FileUpload.FileName) but I'm getting a totally different path, not the path to the image that the user selected.
I was reading that I need to set the src attribute of the asp:Image control to be an aspx page which is going to return the image, and then I have to write the bytes from the image to the response but I'm not sure how to do this (I'm a newbie in web development), I don't know what should I put in my event, in the code behind, or what code should I place on the aspx page that will return the image, neither how to call the aspx page with the image from the event handler.
Can anyone show me a good example on how to achieve this please?
The issue here is the file being uploaded resides on the client computer where the asp:image control is looking for an image on the server computer.
What you should be doing is on the form submit/button click save the file into the application folder then reference that file with your asp:image control.
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.
Hi ive got an mvc form with a fileupload functionality. Ive got an action that accepts an file and extracts thumbnails from it, after which the user can select the images and then proceed to submit the form. How can post the initial file via ajax, bearing in mind, this is not the final submission on the form and I want to retain user input. ie no postback
Thanks
I use the ajaxupload plugin for jQuery. Lots of sample code is provided on the site. From the site:
[The] plugin creates invisible file input on top of the button you provide, so when user clicks on your button the normal file selection window is shown. And after user selects a file, plugin submits form that contains file input to an iframe. So it isn’t true ajax upload, but brings same user experience.
Browsers don't allow the uploading of files via ajax. There are several good workarounds, however.
I have a form in asp.net with a FileUpload control inside. Next to this control I have "Upload" button which is used to upload a file to a list of files. The problem is that I also have "Submi"t button used for submiting whole form.
Now when somebody selects a file through browse button and presses on "Submit" not "Upload" file is being uploaded and I wouldn't want that.
I'm hoping for asp.net or general HTML answer
Sounds like the FileUpload control and Upload button should be inside it's own form. With ASP.NET and the 1 server-side form restriction, you may have to resort to regular HTML controls to do this.
Alternatively, you may be able to use JavaScript to clear the FileUpload if Upload isn't clicked. Browsers can be picky about access to file inputs, though (for security reasons) so it may not be accessible.
For the general HTML answer, have your file upload button be part of a separate form from the other form, meaning they are encapsulated within separate Form tags.
For ASP.NET, you're going to have more pain, since ASP.NET by default has only one form per page.
Ultimately, however, I think you're better off rethinking your design. Try to put that file upload on a separate page; if you have a page that does more than one thing, you're inviting confusion on the part of the user.
Submit button will send all of the form's information.
Try putting the FileUpload control outside, on a diferent form.
Your FileUpload control needs to be in its own form if you want to to be submitted separately. When you click the Upload button, the other parts of your form are being submitted as well. That's just how it works.
I would separate the two forms. Using JavaScript or something like that could get to be a pain. The problem with separating the forms is you have to do it in a way where you don't lose your original form, meaning if you have other form information around the file upload you might have a bit of a nightmare on your hands but if you can put the file upload either above or below the form that submit controls then it's easy.
<form id="A">
<button name="submit>
</form>
<form id="B">
<fileupload>
</form>
I use this method on one of my sites and it works quite well.