百度 WebUploader 简单入门示例

 首先一定要引入：jquery.js 然后是webuploader的一个 css和还一个js 三个必须引用。

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link href="webuploader-0.1.5/webuploader.css" rel="stylesheet" />
    <script src="webuploader-0.1.5/webuploader.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var uploader = WebUploader.create({

                // swf文件路径
                swf: 'webuploader-0.1.5/Uploader.swf',

                // 文件接收服务端。
                server: 'webuploader.ashx?Method=Upload',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',
                fileVal: "files",   //指明参数名称，后台也用这个参数接收文件

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                auto :true 
            });
            //文件开始上传之前出发
            uploader.on('uploadStart', function (file) {
                
                uploader.option('server', 'webuploader.ashx?Method=Upload1');

            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                //上传成功后
                //$('#' + file.id).addClass('upload-state-done');
            });

            //开始上传
            $("#ctlBtn").click(function () {
                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>
复制代码

后台接收：webuploader.ashx

复制代码
<%@ WebHandler Language="C#" Class="webuploader" %>

using System;
using System.Web;
using System.Reflection;

public class webuploader : IHttpHandler {

    private HttpContext Context = HttpContext.Current;
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string method = context.Request["Method"].ToString();
        MethodInfo methodInfo = this.GetType().GetMethod(method);//利用反射 获取方法
        string result = methodInfo.Invoke(this, null).ToString();//执行获取到的方法
        context.Response.Write(result);
    }
    public string Upload()
    {
        string strJson = "";

        HttpPostedFile file = Context.Request.Files["files"];//接受上传的文件
        

        return strJson;
    }
    public string Upload1()
    {
        string strJson = "";

        HttpPostedFile file = Context.Request.Files["files"];//接受上传的文件


        return strJson;
    }
    public bool IsReusable {
        get {
            return false;
        }
    }

}
复制代码

 

 


如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。
posted @   高山-景行  阅读(3399)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
历史上的今天：
2013-10-23 asp.net web.config配置节说明（转发）
点击右上角即可分享
微信分享提示
AI IDE Trae