百度webuploader_c#实现文件分片上传思路
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="Stylesheet" type="text/css" href="Styles/webuploader.css"/>
<script src="Scripts/jquery-3.3.1.min.js"type="text/javascript"></script>
<script src="Scripts/webuploader.js"type="text/javascript"></script>
<!--<style type="text/css">
#ctlBtn {width:100%!important;height:100%!important;}
</style>-->
<style type="text/css">
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-striped .progress-bar {
background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
background-size: 40px 40px;
}
.progress-bar {
background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff428bca’,endColorstr=’#ff3071a9’,GradientType=0);
}
.progress-bar {
float: left;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
transition: width .6s ease;
</style>
</head>
<body>
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">上传文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
<script type="text/javascript">
$("#ctlBtn").click(function () {
uploader.upload();
});
var $list = $("#thelist"); //这几个初始化全局的百度文档上没说明，好蛋疼。
var $btn = $("#ctlBtn"); //开始上传
var uploader = WebUploader.create({
// swf文件路径
swf:'/js/Uploader.swf',
// 文件接收服务端。
server: 'Handler1.ashx',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已上传');
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace 测试2
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile file = context.Request.Files[0];
String fileName= System.IO.Path.GetFileName(file.FileName);
file.SaveAs(context.Server.MapPath("~/") + fileName);
//context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
百度webuploader_c#实现文件分片上传思路的更多相关文章
- 百度Webuploader 大文件分片上传(.net接收)
版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- 百度Webuploader 大文件分片上传（.net接收）
前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片上传的帖子,参考之后,踏出了第一步.此文记录我这次实践的点滴,仅 ...
- Webuploader 大文件分片上传
百度Webuploader 大文件分片上传(.net接收) 前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...
- Vue2.0结合webuploader实现文件分片上传
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
- asp.net 文件分片上传
最近在研究文件上传,里面的门道还是挺多的,网上大多数文章比较杂乱,代码都是片段,对于新手小白来说难度较高,所以在此详细写一下今天看到的一个demo,关于文件分片上传的. <!DOCTYPE ht ...
- plupload 大文件分片上传与PHP分片合并探索
最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没 ...
- 利用blob对象实现大文件分片上传
首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...
- Node + js实现大文件分片上传基本原理及实践(一)
_ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...
- net core WebApi——文件分片上传与跨域请求处理
目录 前言 开始 测试 跨域 小结 @ 前言 在之前整理完一套简单的后台基础工程后,因为业务需要鼓捣了文件上传跟下载,整理完后就迫不及待的想分享出来,希望有用到文件相关操作的朋友可以得到些帮助. 开始 ...
随机推荐
- Ceph对象存储 S3
ceph对象存储 作为文件系统的磁盘,操作系统不能直接访问对象存储.相反,它只能通过应用程序级别的API访问.ceph是一种分布式对象存储系统,通过ceph对象网关提供对象存储接口,也称为RADOS网 ...
- IP路由__距离矢量路由选择协议
矢量路由选择协议 1.距离矢量路由选择算法发送完整的路由选择表到相邻的路由器,然后,相邻的路由器会将接收到的路由表项与自己原有的路由表进行组合,以完善路由器的路由表. 由于路由器接收到的更新只是来自相 ...
- 【有趣的全彩LED | 编程】用STM32 HAL库让WS2812B为你所动
一.效果展示 观看演示效果:https://www.bilibili.com/video/BV1dv411Y7x3 使用STM32 HAL库编程 PWM+DMA控制输出,CubeMX生成初始工程 实现 ...
- IDLE怎么将主题修改成Darcula样式?
摘要:每个人都有自己心中理想的编辑器主题,我更倾向于Darcula,你们呢? 想必没用过Darcula主题的朋友,会好奇它是何方神圣? 是不是很赏心悦目,代码这冰冷的东西也变得生龙活虎? 我最近在 ...
- 2019牛客暑期多校训练营（第七场）E-Find the median（思维+树状数组+离散化+二分）
>传送门< 题意:给n个操作,每次和 (1e9范围内)即往数组里面插所有 的所有数,求每次操作后的中位数思路:区间离散化然后二分答案,因为小于中位数的数字恰好有个,这显然具有单调性.那么问 ...
- Paths on a Grid POJ - 1942 排列组合
题意: 从左下角移动到右上角.每次只能向上或者向右移动一格.问移动的轨迹形成的右半边图形有多少种 题解: 注意,这个图形就根本不会重复,那就是n*m的图形,向上移动n次,向右移动m次. 从左下角移动到 ...
- java——接口、多态性、对象转型
接口定义: 默认方法: 默认方法的作用: 如果在你的接口已经投入使用了,这个时候你想要在接口里面加一个方法,这个时候如果你加一个抽象方法的话,所有实现类都要改变源代码(因为实现类要把接口中的所有抽象 ...
- Warm up HDU - 4612 树的直径
题意:给出n个点和m条边的无向图,存在重边,问加一条边以后,剩下的桥的数量最少为多少. 题解: 你把这个无向图缩点后会得到一个只由桥来连接的图(可以说这个图中的所有边都是桥,相当于一棵树),然后我们只 ...
- DNS 是什么？如何运作的？
前言 我们在上一篇说到,IP 地址的发明把我们纷乱复杂的网络设备整齐划一地统一在了同一个网络中. 但是类似于 192.168.1.0 这样的地址并不便于人类记忆,于是发明了 域名(Domain Nam ...
- Pod 实现机制
Pod 为了亲密性应用而存在: 两个应用需要通过 127.0.0.1 或者 Socket 通信: 两个应用之间发生文件交互: 两个应用发生频繁的调用 共享网络 Pod 中的所有容器拥有同一个 IP 地 ...