百度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——文件分片上传与跨域请求处理
目录 前言 开始 测试 跨域 小结 @ 前言 在之前整理完一套简单的后台基础工程后,因为业务需要鼓捣了文件上传跟下载,整理完后就迫不及待的想分享出来,希望有用到文件相关操作的朋友可以得到些帮助. 开始 ...
随机推荐
- Spark调优 | Spark Streaming 调优
Spark调优 | Spark Streaming 调优 1.数据序列化 2.广播大变量 3.数据处理和接收时的并行度 4.设置合理的批处理间隔 5.内存优化 5.1 内存管理 5.2优化策略 5.3 ...
- chrome标签记录——关于各类性能优化
概述 详情 概述 平时经常浏览各大博客,总感觉要学习和需要学习的内容太多太多,而自己的个人能力还不足够写出一些好的文章出来,就只能通过学习他人的东西不断提升自己的实力,然后就会记录收藏各种优秀的博客资 ...
- CSAPP_AttackLab实验报告
目录 屏幕截图 考察内容 各题答案 level1 level2 level3 level4 level5 解题思路 level1 任务 思路 level2 任务 思路 level3 任务 思路 lev ...
- 【uva 177】Paper Folding（算法效率--模拟）
P.S.模拟真の难打,我花了近乎三小时!o(≧口≦)o 模拟题真的要思路清晰!分块调试. 题意:著名的折纸问题:给你一张很大的纸,对折以后再对折,再对折--每次对折都是从右往左折,因此在折了很多次以后 ...
- Codeforces Round #697 (Div. 3) F. Unusual Matrix (思维,数学）
题意:给你一个矩阵\(a\)和\(b\),你可以对\(a\)的任意一行或任意一列的所有元素xor\(1\)任意次,问最终是否能够得到\(b\). 题解:由\(a\ xor\ b=c\),可得:\(a\ ...
- Codeforces Round #666 (Div. 2) C. Multiples of Length (构造,贪心)
题意:有一个长度为\(n\)的序列,可以操作\(3\)次,每次选取一段区间,然后区间的元素加减区间长度的倍数,\(3\)次操作后使得序列所有元素为\(0\),问具体操作情况. 题解:假如我们能选择一整 ...
- Python 分析热卖年货，今年春节大家都在送啥？
今年不知道有多少小伙伴留在原地过年,虽然今年过年不能回老家,但这个年也得过,也得买年货,给家人长辈送礼.于是我出于好奇心的想法利用爬虫获取某宝数据,并结合 Python 数据分析和第三方可视化平台来分 ...
- 计算文件MD5
计算文件MD5 def get_md5(file_path): md5 = None if os.path.exists(file_path): f = open(file_path, 'rb') m ...
- Linux运维博客大全
系统 U盘安装Linux详细步骤_hanxh7的博客-CSDN博客_u盘安装linux 使用U盘安装linux系统 - lwenhao - OSCHINA 各厂商服务器存储默认管理口登录信息(默认IP ...
- woj1013 Barcelet 字符串 woj1014 Doraemon's Flashlight 几何
title: woj1013 Barcelet 字符串 date: 2020-03-18 18:00:00 categories: acm tags: [acm,字符串,woj] 字符串,字典序. 1 ...