上传组件Web Uploader官网上的demo是一个php的

对于像我一样菜鸟还是无法使用，所以在网上找了一些现有的资源进行了整合，做了一个demo留着查询方便。

此demo是asp.net的，并非MVC。

1、首先是前台页面 UploadDemo.aspx，选择多个文件开始上传。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadDemo.aspx.cs" Inherits="UploadDemo" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="UploadResource/jquery-1.7.1.min.js"></script><link href="UploadResource/webuploader.css" rel="stylesheet" /><script src="UploadResource/webuploader.js"></script><script type="text/javascript">// 文件上传jQuery(function () {var $ = jQuery,$list = $('#thelist'),$btn = $('#ctlBtn'),state = 'pending',uploader;uploader = WebUploader.create({// 不压缩imageresize: false,// swf文件路径swf: 'UploadResource/Uploader.swf',// 文件接收服务端。server: 'UploadHandler.ashx',// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#picker'});// 当有文件添加进来的时候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();});uploader.on('all', function (type) {if (type === 'startUpload') {state = 'uploading';} else if (type === 'stopUpload') {state = 'paused';} else if (type === 'uploadFinished') {state = 'done';}if (state === 'uploading') {$btn.text('暂停上传');} else {$btn.text('开始上传');}});$btn.on('click', function () {if (state === 'uploading') {uploader.stop();} else {uploader.upload();}});});</script>
</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>
</body>
</html>

2、后台将文件保存到服务器

UploadHandler.ashx

<%@ WebHandler Language="C#" Class="UploadHandler" %>using System;
using System.Web;public class UploadHandler : IHttpHandler {public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";context.Response.ContentEncoding = System.Text.Encoding.UTF8;if (context.Request["REQUEST_METHOD"] == "OPTIONS"){context.Response.End();}SaveFile();}private void SaveFile(){string basePath = "./NewFolder1/";string name;basePath = System.Web.HttpContext.Current.Server.MapPath(basePath);HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;if (!System.IO.Directory.Exists(basePath)){System.IO.Directory.CreateDirectory(basePath);}var suffix = files[0].ContentType.Split('/');//获取文件格式//var _suffix = suffix[1].Equals("jpeg", StringComparison.CurrentCultureIgnoreCase) ? "" : suffix[1];var _suffix=suffix[1];var _temp = System.Web.HttpContext.Current.Request["name"];//如果不修改文件名，则创建随机文件名if (!string.IsNullOrEmpty(_temp)){name = _temp;}else{Random rand = new Random(24 * (int)DateTime.Now.Ticks);name = rand.Next() + "." + _suffix;}//文件保存var full = basePath + name;files[0].SaveAs(full);var _result = "{\"jsonrpc\" : \"2.0\", \"result\" : null, \"id\" : \"" + name + "\"}";System.Web.HttpContext.Current.Response.Write(_result);}public bool IsReusable {get {return false;}}}

OK 。
demo 下载链接：http://pan.baidu.com/s/1eRjPzKe

Web Uploader

WebUploader asp.net 多文件上传相关推荐

[转载]ASP.NET Core文件上传与下载(多种上传方式)
ASP.NET Core文件上传与下载(多种上传方式) 前言前段时间项目上线,实在太忙,最近终于开始可以研究研究ASP.NET Core了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在整理 ...
ASP.NET中文件上传下载方法集合
asp.net 2008-08-23 21:10:35 阅读0 评论0 字号:大中小订阅 ASP.NET中文件上传下载方法集合文件的上传下载是我们在实际项目开发过程中经常需要用到的技术,这里给 ...
ASP.NET Core文件上传IFormFile于Request.Body的羁绊
前言在上篇文章深入探究ASP.NET Core读取Request.Body的正确方式[1]中我们探讨了很多人在日常开发中经常遇到的也是最基础的问题,那就是关于Request.Body的读取方式问题, ...
ASP.NET Core文件上传与下载(多种上传方式)
前言前段时间项目上线,实在太忙,最近终于开始可以研究研究ASP.NET Core了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在整理吧. ASP.NET Core 2.0 发展到现在,已经 ...
用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能
一.背景最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员 ...
ASP.NET实现文件上传
新建ASP.NET Web应用程序单文件上传效果页面代码 <%@ Page Language="C#" AutoEventWireup="true" ...
[asp常用代码]文件上传代码
调用实例: UploadDemo.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">& ...
Asp.net中文件上传下载的简单实现
1. 文件下载在asp.net中,如果想点击某aspx的url实现文件下载只要在其Page_Load函数实现目标url的重定向即可.用下列代码即可实现. Response.Redirect(&quo ...
Asp.NET大文件上传组件开发总结(二)---提取文件内容
不知地震什么时候结束,为了给老婆小孩守夜,看来还不能睡,那就把第二篇也写了吧,只是不知对大家有没有用哟. 为了提供文件内容,我们需要首先需确定客户请求中发送的有文件内容,然后确定文件内容的位置.这部分 ...

WebUploader asp.net 多文件上传

Web Uploader

Web Uploader

Web Uploader

WebUploader asp.net 多文件上传相关推荐

最新文章

热门文章