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;
            }
        }
    
    }

     

  • 相关阅读:
    OO ALV-单击事件,双击事件,添加自定义按钮事件(EVENT)实例
    SWM0-Excel模板上载以及模板下载程序
    linux ubuntu安装Jupyter Notebook打开运行. ipynb文件
    主机ping不通ubuntu虚拟机的解决方法
    解决word中使用mathtype编辑的公式和正文不在一行的问题
    fis3实现前端网页实时刷新(自动刷新)
    解决代理服务器导致不能上网问题
    python常用函数总结
    使用python写机器学习算法遇到的问题
    windows---Apache环境搭建
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/4903932.html
Copyright © 2011-2022 走看看