码迷,mamicode.com
首页 > Web开发 > 详细

百度 WebUploader 简单入门示例

时间:2015-10-23 11:33:35      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:

 首先一定要引入: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;
        }
    }

}

 技术分享

 

百度 WebUploader 简单入门示例

标签:

原文地址:http://www.cnblogs.com/wangjunwei/p/4903932.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!