zoukankan      html  css  js  c++  java
  • 百度 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;
            }
        }
    
    }

     

  • 相关阅读:
    Lodop简短问答客户反馈篇 及排查步骤 及注册相关
    Win10图片打不开文件系统错误2147416359解决方法
    Lodop中特殊符号¥打印设计和预览不同
    LODOP安装参数 及静默安装
    LODOP打印安装到win的特殊字体
    Lodop打印设计(PRINT_DESIGN)介绍
    Lodop打印设计里的 打印项对齐
    System.out.println与System.err.println的区别(输出顺序!!!)
    享元模式
    Java中关于HashMap的元素遍历的顺序问题
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/4903932.html
Copyright © 2011-2022 走看看