<!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#实现文件分片上传思路的更多相关文章

  1. 百度Webuploader 大文件分片上传(.net接收)

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  2. 百度Webuploader 大文件分片上传（.net接收）

    前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片上传的帖子,参考之后,踏出了第一步.此文记录我这次实践的点滴,仅 ...

  3. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

  4. Vue2.0结合webuploader实现文件分片上传

    Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...

  5. asp.net 文件分片上传

    最近在研究文件上传,里面的门道还是挺多的,网上大多数文章比较杂乱,代码都是片段,对于新手小白来说难度较高,所以在此详细写一下今天看到的一个demo,关于文件分片上传的. <!DOCTYPE ht ...

  6. plupload 大文件分片上传与PHP分片合并探索

    最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没 ...

  7. 利用blob对象实现大文件分片上传

    首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...

  8. Node + js实现大文件分片上传基本原理及实践(一)

    _ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...

  9. net core WebApi——文件分片上传与跨域请求处理

    目录 前言 开始 测试 跨域 小结 @ 前言 在之前整理完一套简单的后台基础工程后,因为业务需要鼓捣了文件上传跟下载,整理完后就迫不及待的想分享出来,希望有用到文件相关操作的朋友可以得到些帮助. 开始 ...

随机推荐

  1. python----类，面向对象（封装、继承、多态）（属性，方法）

    什么是对象? 对象是内存中专门用来存储数据的一块区域 对象中可以存放各种数据(数字.代码等) 对象由三部分组成(1,对象标识(id)2,对象类型(type)3,对象的值(value)) 面向对象编程是 ...

  2. 设计模式（六）——建造者模式（源码StringBuilder分析）

    建造者模式 1 盖房项目需求 1) 需要建房子:这一过程为打桩.砌墙.封顶 2) 房子有各种各样的,比如普通房,高楼,别墅,各种房子的过程虽然一样,但是要求不要相同的. 3) 请编写程序,完成需求. ...

  3. docker（2）CentOS 7安装docker环境

    前言 前面一篇学了mac安装docker,这篇来学习在linux上安装docker 环境准备 Docker支持以下的CentOS版本,目前,CentOS 仅发行版本中的内核支持 Docker. Doc ...

  4. 牛客挑战赛33 C 艾伦的立体机动装置（几何）

    思路: 我们需要枚举展开多少条边 然后把上底面的点放到和下底面一个平面 然后算两点之间的距离 注意判断直线与线段是否有交点 #include <bits/stdc++.h> using n ...

  5. 2019牛客暑期多校训练营（第四场）D-triples I

    >传送门< 题意:求最少需要多少个3的倍数按位或后可以得到数字a 思路:利用3的倍数对应的二进制数的性质来先选出一个x,然后根据数字a再配一个y出来 首先,我们都知道十进制中,任意一个数只 ...

  6. 2019牛客暑期多校训练营（第十场）F.Popping Balloons(线段树)

    题意:现在给你n个点 现在让你横着划三条线间距为r 然后竖着划三条线间距同样为r 现在让你求经过最多的点数 思路:我们首先建一棵关于y区间的线段树 然后枚举x轴 每次更新重叠的点 然后再更新回去 找一 ...

  7. Codeforces Round #672 (Div. 2 B. Rock and Lever (位运算)

    题意:给你一组数,求有多少对\((i,j)\),使得\(a_{i}\)&\(a_{j}\ge a_{i}\ xor\ a_{j}\). 题解:对于任意两个数的二进制来说,他们的最高位要么相同要 ...

  8. Codeforces Round #644 (Div. 3) D. Buying Shovels (数学)

    题意:商店里有\(k\)个包裹,第\(i\)个包裹中含有\(i\)个物品,现在想要买\(n\)物品,你可以选择某一个包裹购买任意次,使得物品数刚好等于\(n\),求最少的购买次数. 题解:首先,假如\ ...

  9. leetcode 2 两数相加 考虑溢出

    先用int存了结果然后出错,int溢出了. 真是憨批嗷. 不用考虑保存结果,直接一位一位计算就行. 感觉被描述误导了. /** * Definition for singly-linked list. ...

  10. 计算机网络基础篇-ppp协议

    所谓的PPP协议是点对点协议,是目前使用最广泛的数据链路层的协议.大部分用户使用电话线拨号入网的,从用户计算机到ISP的链路所使用的数据链路层协议就是PPP协议. 首先介绍下拨号入网的过程.因特网服务 ...