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

}

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM