WebUploader asp.net 多文件上传

最新推荐文章于 2024-04-19 19:24:46 发布

zuoluo11

最新推荐文章于 2024-04-19 19:24:46 发布

阅读量9.1k

点赞数 1

分类专栏：文件上传文章标签： asp.net Web Uploader 多文件上传

文件上传专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上传组件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({

                // 不压缩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

<%@ 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

zuoluo11

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
WebUploader asp.net 多文件上传

上传组件Web Uploader官网上的demo是一个php的对于像我一样菜鸟还是无法使用，所以在网上找了一些现有的资源进行了整合，做了一个demo留着查询方便。此demo是asp.net的，并非MVC。1、首先是前台页面 UploadDemo.aspx，选择多个文件开始上传。 // 文件上传
复制链接

扫一扫