File upload control - click and load immediately

Posted by Gayathri under ASP.NET on 1/17/2012 | Points: 10 | Views : 13307 | Status : [Member] | Replies : 4

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

A file upload control does not have auto post back property.
An image control too does not..

I have a requirment like as soon as i choose the file using file uplod control, the file must go and sit in the image control . There should not be any extra control like button to set the path or any java script.
Kindly help.

-gayathri

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Blessyjees on: 1/18/2012 [Member] Bronze | Points: 25

0	hi, I am not sure you can implement this without button or javascript. You can implement this using javascript with xmlhttprequest. If you are interest using javascript, let me know. i will provide the code. Blessy Baby Digitalmesh Softech pvt Ltd https://blessybaby.wordpress.com/ Gayathri, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Gayathri on: 1/19/2012 [Member] Starter | Points: 25

0	yes please most welcome kindly share the java script.. Gayathri, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Blessyjees on: 1/19/2012 [Member] Bronze | Points: 25

0	Hi, Add this in your page <div> <span id="attach_link" >Attach file »</span> <input id="hidden_fileinput" name="uploaded_data" type="file" onchange="uploadFile()"/> </div> and add below java script <script type="text/javascript"> function uploadFile() { var fd = new FormData(); fd.append("fileupload", document.getElementById('hidden_fileinput').files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', uploadProgress, false); xhr.onreadystatechange = stateChange; xhr.open('POST', 'FileUpload.aspx'); xhr.send(fd); } // Show the upload progress function uploadProgress(event) { var percent = parseInt(event.loaded / event.total * 100); $('#attach_link').text('Uploading: ' + percent + '%'); } function stateChange(event) { if (event.target.readyState == 4) { if (event.target.status == 200 \|\| event.target.status == 304) { $('#attach_link').text('Attach file »'); } else { } } } </script> add a new aspx page called "fileupload.aspx" to save file in the physical location and add below code in the code behind page. Public Overrides void ProcessRequest(HttpContext context ) { HttpPostedFile file = context.Request.Files["fileupload"]; string fileName = file.FileName; file.SaveAs(Context.Server.MapPath(@"..\uploads\"+fileName)); } Blessy Baby Digitalmesh Softech pvt Ltd https://blessybaby.wordpress.com/ Gayathri, if this helps please login to Mark As Answer. \| Alert Moderator

Hi,

Add this in your page

 <div>

  <span id="attach_link" >Attach file »</span>

   <input id="hidden_fileinput" name="uploaded_data" type="file" onchange="uploadFile()"/>

 </div>

and add below java script

<script type="text/javascript">

 function uploadFile() {

            var fd = new FormData();

             fd.append("fileupload", document.getElementById('hidden_fileinput').files[0]);

            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener('progress', uploadProgress, false);

            xhr.onreadystatechange = stateChange;

            xhr.open('POST', 'FileUpload.aspx');

            xhr.send(fd);

        }

 // Show the upload progress

        function uploadProgress(event) {

            var percent = parseInt(event.loaded / event.total * 100);

            $('#attach_link').text('Uploading: ' + percent + '%');

        }

 function stateChange(event) {

            if (event.target.readyState == 4) {

                if (event.target.status == 200 || event.target.status == 304) {

                    $('#attach_link').text('Attach file »');

                                  

                }

                else {

                  

                }

            }

        }

 </script>

add a new aspx page called "fileupload.aspx" to save file in the physical location and add below code in the code behind page.


 Public Overrides void ProcessRequest(HttpContext context )

{

           HttpPostedFile file = context.Request.Files["fileupload"];

			    string fileName = file.FileName;

file.SaveAs(Context.Server.MapPath(@"..\uploads\"+fileName));

}

Blessy Baby
Digitalmesh Softech pvt Ltd
https://blessybaby.wordpress.com/

Gayathri, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Vinay13mar on: 10/14/2012 [Member] Starter | Points: 25

0	check the link http://dotnetpools.com/Article/ArticleDetiail/?articleId=5&title=Fileupload%20Control%20In%20Asp.net Gayathri, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts