File upload control - click and load immediately

Posted by Gayathri under ASP.NET on 1/17/2012 | Points: 10 | Views : 11464 | Status : [Member] | Replies : 4
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




Responses

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

Up
0
Down
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

Up
0
Down
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

Up
0
Down
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

Login to post response