百度 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 @ 2015-10-23 11:28  高山-景行  阅读(3390)  评论(0)  编辑  收藏  举报