WebUploader asp.net 多文件上传

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

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

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

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

[html]  view plain  copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadDemo.aspx.cs" Inherits="UploadDemo" %>  
  2.   
  3. >  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  8.     <title>title>  
  9.     <script src="UploadResource/jquery-1.7.1.min.js">script>  
  10.     <link href="UploadResource/webuploader.css" rel="stylesheet" />  
  11.     <script src="UploadResource/webuploader.js">script>  
  12.     <script type="text/javascript">  
  13.   
  14.         // 文件上传  
  15.         jQuery(function () {  
  16.             var $ = jQuery,  
  17.                 $list = $('#thelist'),  
  18.                 $btn = $('#ctlBtn'),  
  19.                 state = 'pending',  
  20.                 uploader;  
  21.   
  22.             uploader = WebUploader.create({  
  23.   
  24.                 // 不压缩image  
  25.                 resize: false,  
  26.   
  27.                 // swf文件路径  
  28.                 swf: 'UploadResource/Uploader.swf',  
  29.   
  30.                 // 文件接收服务端。  
  31.                 server: 'UploadHandler.ashx',  
  32.   
  33.                 // 选择文件的按钮。可选。  
  34.                 // 内部根据当前运行是创建,可能是input元素,也可能是flash.  
  35.                 pick: '#picker'  
  36.             });  
  37.   
  38.             // 当有文件添加进来的时候  
  39.             uploader.on('fileQueued', function (file) {  
  40.                 $list.append('<div id="' + file.id + '" class="item">' +  
  41.                     '<h4 class="info">' + file.name + 'h4>' +  
  42.                     '<p class="state">等待上传...p>' +  
  43.                 'div>');  
  44.             });  
  45.   
  46.             // 文件上传过程中创建进度条实时显示。  
  47.             uploader.on('uploadProgress', function (file, percentage) {  
  48.                 var $li = $('#' + file.id),  
  49.                     $percent = $li.find('.progress .progress-bar');  
  50.   
  51.                 // 避免重复创建  
  52.                 if (!$percent.length) {  
  53.                     $percent = $('<div class="progress progress-striped active">' +  
  54.                       '<div class="progress-bar" role="progressbar" style="width: 0%">' +  
  55.                       'div>' +  
  56.                     'div>').appendTo($li).find('.progress-bar');  
  57.                 }  
  58.   
  59.                 $li.find('p.state').text('上传中');  
  60.   
  61.                 $percent.css('width', percentage * 100 + '%');  
  62.             });  
  63.   
  64.             uploader.on('uploadSuccess', function (file) {  
  65.                 $('#' + file.id).find('p.state').text('已上传');  
  66.             });  
  67.   
  68.             uploader.on('uploadError', function (file) {  
  69.                 $('#' + file.id).find('p.state').text('上传出错');  
  70.             });  
  71.   
  72.             uploader.on('uploadComplete', function (file) {  
  73.                 $('#' + file.id).find('.progress').fadeOut();  
  74.             });  
  75.   
  76.             uploader.on('all', function (type) {  
  77.                 if (type === 'startUpload') {  
  78.                     state = 'uploading';  
  79.                 } else if (type === 'stopUpload') {  
  80.                     state = 'paused';  
  81.                 } else if (type === 'uploadFinished') {  
  82.                     state = 'done';  
  83.                 }  
  84.   
  85.                 if (state === 'uploading') {  
  86.                     $btn.text('暂停上传');  
  87.                 } else {  
  88.                     $btn.text('开始上传');  
  89.                 }  
  90.             });  
  91.   
  92.             $btn.on('click', function () {  
  93.                 if (state === 'uploading') {  
  94.                     uploader.stop();  
  95.                 } else {  
  96.                     uploader.upload();  
  97.                 }  
  98.             });  
  99.         });  
  100.     script>  
  101. head>  
  102. <body>  
  103.     <div id="uploader" class="wu-example">  
  104.         <div id="thelist" class="uploader-list">div>  
  105.         <div class="btns">  
  106.             <div id="picker">选择文件div>  
  107.             <button id="ctlBtn" class="btn btn-default">开始上传button>  
  108.   
  109.         div>  
  110.     div>  
  111. body>  
  112. html>  

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

UploadHandler.ashx
[csharp]  view plain  copy
  1. <%@ WebHandler Language="C#" Class="UploadHandler" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5.   
  6. public class UploadHandler : IHttpHandler {  
  7.       
  8.     public void ProcessRequest (HttpContext context) {  
  9.         context.Response.ContentType = "text/plain";  
  10.         context.Response.ContentEncoding = System.Text.Encoding.UTF8;  
  11.         if (context.Request["REQUEST_METHOD"] == "OPTIONS")  
  12.         {  
  13.             context.Response.End();  
  14.         }  
  15.         SaveFile();  
  16.     }  
  17.     private void SaveFile()  
  18.     {  
  19.         string basePath = "./NewFolder1/";  
  20.         string name;  
  21.         basePath = System.Web.HttpContext.Current.Server.MapPath(basePath);  
  22.         HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;  
  23.         if (!System.IO.Directory.Exists(basePath))  
  24.         {  
  25.             System.IO.Directory.CreateDirectory(basePath);  
  26.         }  
  27.         var suffix = files[0].ContentType.Split('/');  
  28.         //获取文件格式  
  29.         //var _suffix = suffix[1].Equals("jpeg", StringComparison.CurrentCultureIgnoreCase) ? "" : suffix[1];  
  30.         var _suffix=suffix[1];  
  31.         var _temp = System.Web.HttpContext.Current.Request["name"];  
  32.         //如果不修改文件名,则创建随机文件名  
  33.         if (!string.IsNullOrEmpty(_temp))  
  34.         {  
  35.             name = _temp;  
  36.         }  
  37.         else  
  38.         {  
  39.             Random rand = new Random(24 * (int)DateTime.Now.Ticks);  
  40.             name = rand.Next() + "." + _suffix;  
  41.         }  
  42.         //文件保存  
  43.         var full = basePath + name;  
  44.         files[0].SaveAs(full);  
  45.         var _result = "{\"jsonrpc\" : \"2.0\", \"result\" : null, \"id\" : \"" + name + "\"}";  
  46.         System.Web.HttpContext.Current.Response.Write(_result);  
  47.   
  48.   
  49.     }  
  50.   
  51.     public bool IsReusable {  
  52.         get {  
  53.             return false;  
  54.         }  
  55.     }  
  56.   
  57. }  
OK 。
demo 下载链接:http://pan.baidu.com/s/1eRjPzKe

你可能感兴趣的:(jQuery)