Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Dec 26, 2012 11:39 AM by manjuby
Member
140 Points
147 Posts
Dec 25, 2012 07:36 PM|LINK
I am trying to implement a video upload with a progress bar using an XMLhttprequest() and a html5 progress element like this:
<input type="file" name="fileUpload1" id="fu1" /> <button type="button" id="clicker" value="Upload" name="Upload" >Upload</button> <progress id="prog1"></progress>
and the js and ashx:
$("#clicker").live('click', function (e) { e.preventDefault(); UploadVideo("fu1", ""); }); function UploadVideo(elm, url) { var xhr = new XMLHttpRequest(); var fd = new FormData(); fd.append("fu1", document.getElementById("fu1").files[0]); xhr.addEventListener("progress", ProcessVideo, false); xhr.open("POST", "Handler.ashx"); xhr.send(fd); } function ProcessVideo(evt) { if (evt.lengthComputable) { var prog = document.getElementById("prog1"); prog.max = evt.total; prog.value = evt.loaded; } } public void ProcessRequest (HttpContext context) { var file = context.Request.Files["fu1"]; var savePath = HttpContext.Current.Server.MapPath("~/teees/" + file.FileName); file.SaveAs(savePath); context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); }
this works fine but the progress bar doesn't move its stuck at zero then jumps to 100 when the upload is finished, what is the problem ? thanks
Contributor
7066 Points
1381 Posts
Dec 26, 2012 04:23 AM|LINK
You can use AsyncFileUpload :-
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AsyncFileUpload/AsyncFileUpload.aspx
Participant
1131 Points
251 Posts
Dec 26, 2012 11:39 AM|LINK
http://www.aspsnippets.com/Articles/Select-and-Upload-Multiple-Files-Gmail-Style-using-JQuery-and-ASP.Net.aspx
http://forums.asp.net/t/1107392.aspx/1
http://blueimp.github.com/jQuery-File-Upload/
bladde_89
Member
140 Points
147 Posts
asp.net video upload with progress bar
Dec 25, 2012 07:36 PM|LINK
I am trying to implement a video upload with a progress bar using an XMLhttprequest() and a html5 progress element like this:
<input type="file" name="fileUpload1" id="fu1" /> <button type="button" id="clicker" value="Upload" name="Upload" >Upload</button> <progress id="prog1"></progress>and the js and ashx:
$("#clicker").live('click', function (e) { e.preventDefault(); UploadVideo("fu1", ""); }); function UploadVideo(elm, url) { var xhr = new XMLHttpRequest(); var fd = new FormData(); fd.append("fu1", document.getElementById("fu1").files[0]); xhr.addEventListener("progress", ProcessVideo, false); xhr.open("POST", "Handler.ashx"); xhr.send(fd); } function ProcessVideo(evt) { if (evt.lengthComputable) { var prog = document.getElementById("prog1"); prog.max = evt.total; prog.value = evt.loaded; } } public void ProcessRequest (HttpContext context) { var file = context.Request.Files["fu1"]; var savePath = HttpContext.Current.Server.MapPath("~/teees/" + file.FileName); file.SaveAs(savePath); context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); }this works fine but the progress bar doesn't move its stuck at zero then jumps to 100 when the upload is finished, what is the problem ?
thanks
sameer_khanj...
Contributor
7066 Points
1381 Posts
Re: asp.net video upload with progress bar
Dec 26, 2012 04:23 AM|LINK
You can use AsyncFileUpload :-
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AsyncFileUpload/AsyncFileUpload.aspx
sameer.khanjit@gmail.com
View Blog
Click "Mark as Answer" on the post that helped you.
manjuby
Participant
1131 Points
251 Posts
Re: asp.net video upload with progress bar
Dec 26, 2012 11:39 AM|LINK
http://www.aspsnippets.com/Articles/Select-and-Upload-Multiple-Files-Gmail-Style-using-JQuery-and-ASP.Net.aspx
http://forums.asp.net/t/1107392.aspx/1
http://blueimp.github.com/jQuery-File-Upload/