WebUploader asp.net 多文件上传

来源：互联网发布：winzip mac 6 注册码编辑：程序博客网时间：2024/06/05 19:11

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

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

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

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

[html] view plain copy
<%@ 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({  
  
                // 不压缩image  
                resize: 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

[csharp] view plain copy
<%@ 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

阅读全文

0 0