急!ASP.NET+Ajax实现视频文件上传带进度条

急!ASP.NET+Ajax实现视频文件上传带进度条,第1张

我建议用flash的吧,现在有两个比较强大的,一个是swfupload另一个是uploadify,两者都是任何语言都可以使用的,提供了接口,两种我都用了,虽然刚开始研究有些吃力,但研究好了,你会发现,你的最终选择会是这两个,网上的垃圾确实很多。希望可以帮到你。

如果你是用这种方式上传的话,确实没有好方法。

因为 XML>

我没记错的话如果触发的后台文件打印消息那么就等于响应完成ajax,

所以ajax应该只有未发送 响应超时 完成响应并取得结果

以上是个人不全面的看法实际偏差应该不大

想要获取进度的话应该是载入这部分代码比较合适

首先需要一个表单来让用户选择要上传的文件。

1 <form id="form_upload" action="/upload" method="POST">

2 <input type="file" name="picture" id="picture" />

3 <input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>

4 <input type="hidden" id="id" name="id" value=""/>

5 <input id="form_submit_button" class="tp-button" type="submit" value="Submit" />

6 </form>

这里增加了两个隐藏的输入框,第一个是 ‘X-Progress-ID’,代表上传 ID,这样我们才能够在服务器端支持并发的上传请求。稍后我们会看到,服务器是如何处理这个值的。

然后还有一个隐藏输入框 ‘id’,在我们的例子里代表菜品的编号。

我们将使用 Ajax 来发送 POST 请求,这样表单便可以很好地集成在现代的网络界面中,同时包含一个进度条。我们打算使用 jQuery Form plugin 来实现这一点。

函数 ajaxSubmit() 将会帮我们搞定一切。

为上传 ID 生成一个随机字串,并用它设置输入框的值。

需要指定一个用于上传请求的 URL 和两个回调函数:一个在请求前调用,另一个在请求完成后调用。

1 $('#X-Progress-ID')val('random string');

2 var options = {

3 dataType: 'xml',

4 url: '/uploadX-Progress-ID='+$('#X-Progress-ID')val(),

5 beforeSubmit: showRequest,

6 success: showResponse

7 }

8 $('#form_upload')ajaxSubmit(options);

showRequest 回调函数只需要像下面这么简单就行了:

1 function showRequest(formData, jqForm, options) {

2 // do something with formData

3 return True;

4 }

在 showResponse 函数中,我们需要处理响应,并对它进行 *** 作。在我的例子里,我处理了服务器返回的带有状态值的 xml。

1 function showResponse(response) {

2 // do something with response

3 }

用户按下提交的时候,我们希望显示一个进度条,因此可以使用下面的 JS 代码,向表单添加进度条。progressBar() 方法是 jQuery progress bar plugin 的一部分。

1 $('#form_upload')find('#form_submit_input')append('<span id="uploadprogressbar"></span<');

2 $('#form_upload')find('#uploadprogressbar')progressBar();

现在我们需要添加一个每隔几秒运行一次的函数,来从服务器获取上传进度,并相应地更新进度条。

为此,我们使用 setInterval() 向服务器发出一个 GET 请求,获取 JSON 格式的进度值。我们向服务器传送上传 ID。当返回 null 值的时候,就可以知道上传已经结束。

01 function startProgressBarUpdate(upload_id) {

02 $("#uploadprogressbar")fadeIn();

03 if(g_progress_intv != 0)

04 clearInterval(g_progress_intv);

05 g_progress_intv = setInterval(function() {

06 $getJSON("/get_upload_progressX-Progress-ID="

07 + upload_id, function(data) {

08 if (data == null) {

09 $("#uploadprogressbar")progressBar(100);

10 clearInterval(g_progress_intv);

11 g_progress_intv = 0;

12 return;

13 }

14 var percentage = Mathfloor(100 parseInt(datauploaded) / parseInt(datalength));

15 $("#uploadprogressbar")progressBar(percentage);

16 });

以上就是关于急!ASP.NET+Ajax实现视频文件上传带进度条全部的内容,包括:急!ASP.NET+Ajax实现视频文件上传带进度条、jquery ajax xhr监听上传进度显示不准确,求解、用ajax获得后台处理进度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9772664.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存