CDN高性能图片缓存服务器（西安易淘电子商务有限公司<a href="http://www.xayitao.com" target="_blank">xayitao.com</a>）
<script src="/lib/jquery/dist/jquery.js"></script>

<link href="/Content/webuploader.css" rel="stylesheet" />
<script src="/Scripts/webuploader.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" />

        <div id="fileResultContent"></div>
    </div>
</div>

<script>
    var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
    var GUID = WebUploader.Base.guid();//一个GUID
    $(function () {
        var $ = jQuery;
        var $list = $('#thelist');
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: false,
            // swf文件路径
            swf: 'https://localhost:53746/Content/Uploader.swf',

            // 文件接收服务端。
            server: 'https://localhost:53746/FileChunk/Upload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            chunked: true,//开始分片上传
            chunkSize: 2048000,//每一片的大小
            formData: {
                guid: GUID, //自定义参数，待会儿解释
                storeid:"67f8b9f003008a05e22cbb4d",
                category:"user"
            },

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            $list.append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            //debugger;
            $('#' + file.id).find('p.state').text('已上传');
            $.post('FileChunk/Merge', { 
                guid: GUID,
                fileName: file.name,
                storeid:"67f8b9f003008a05e22cbb4d",
                category:"user"
            }, function (data) {
                console.log(data);
                $("#fileResultContent").html(JSON.stringify(data));
                $("#uploader .state").html("上传成功...");
            });
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        //所有文件上传完毕
        uploader.on("uploadFinished", function () {
            //提交表单

        });
        //开始上传
        $("#ctlBtn").click(function () {
            uploader.upload();

        });

    });
</script>



<form id="files-form" action="#" method="POST" enctype="multipart/form-data">
    <input type="file" name="files" id="files" multiple="multiple" />
    <input name="apiKey" type="hidden" value="48DFD0EE-61A2-4CB5-B1D6-33E917A83202">
    <input name="category" type="hidden" value="face">
    <button type="submit">提交</button>
</form>

<div id="content"></div>
<div id="resultContent"></div>

<div id="imgs" style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIUlEQVQYV2NkYGCQBGJ08BxdgHGIKMTiF0wPgjwz2BUCADTeBYguWvyCAAAAAElFTkSuQmCC) repeat}">
    <p>----------------原图--------------------</p>
    <img src="" id="rawimg">
    <p id="rawhtml"></p>
    <p>模式一</p>
    <p id="modepad"></p>
    <img src="" id="modepadimg">

    <p>模式二</p>
    <p id="modemax"></p>
    <img src="" id="modemaximg">

    <p>模式三</p>
    <p id="modecrop"></p>
    <img src="" id="modecropimg">

    <p>模式四</p>
    <p id="modecropcustomer"></p>
    <img src="" id="modecropcustomerimg">

    <p>模式五</p>
    <p id="modesepia"></p>
    <img src="" id="modesepiaimg">

    <p>模式六</p>
    <p id="modesrotate"></p>
    <img src="" id="modesrotateimg">

    <p>模式七</p>
    <p id="modeheight"></p>
    <img src="" id="modeheightimg">

    <p>webp格式</p>
    <p id="webp"></p>
    <img src="" id="webpimg">

    <p>水印格式</p>
    <p id="watermark"></p>
    <img src="" id="watermarkimg">

    <p>其它模式</p>
    <p id="modeothers">
    </p>

</div>

<script>
    $("#imgs").hide();
    var inputElement = document.getElementById("files");
    inputElement.addEventListener("change", handleFiles, false);

    function handleFiles() {
        var fileList = this.files;
        $("#content").html("");
        var dd = document.getElementById('content');
        for (var i = 0; i < fileList.length; i++) {
            dd.innerHTML += fileList[i].name + "<br>";
        }
    }

    String.prototype.format = function (args) {
        var result = this;
        if (arguments.length > 0) {
            if (arguments.length == 1 && typeof (args) == "object") {
                for (var key in args) {
                    if (args[key] !== undefined) {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            }
            else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] !== undefined) {
                        //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题
                        var reg2 = new RegExp("({)" + i + "(})", "g");
                        result = result.replace(reg2, arguments[i]);
                    }
                }
            }
        }
        return result;
    };

    $(document).ready(function () {
        $("#files-form").submit(function () {
            //获取防伪标记
            var token = $('input[name=__RequestVerificationToken]').val();
            var headers = {};
            headers["__RequestVerificationToken"] = token;
            var url = "https://localhost:53746";
            var fileObj = document.getElementById("files").files;
            var params = new FormData();
            params.append("apiKey", "48DFD0EE-61A2-4CB5-B1D6-33E917A83202");
            // params.append("category", "public");
            // params.append("storeid", "67f8b9f003008a05e22cbb4d");
            for (var i = 0; i < fileObj.length; i++) {
                params.append("file" + i, fileObj[i]);
            }
            $.ajax({
                type: "POST",
                url: url + "/upload/index",
                data: params,
                contentType: false,//必须false才会自动加上正确的Content-Type
                processData: false,//必须false才会避开jQuery对 formdata 的默认处理 ，XMLHttpRequest会对 formdata 进行正确的处理
                headers: headers,
                success: function (result) {
                    $("#resultContent").html(JSON.stringify(result));
                    if (result.code) {

                        var raw = url + result.raw;

                        $("#rawimg").attr("src", raw);
                        $("#rawhtml").html(raw);

                        $("#modepadimg").attr("src", raw + "?w=170&h=170&mode=pad");
                        $("#modepad").html(raw + "?w=170&h=170&mode=pad");

                        $("#modemaximg").attr("src", raw + "?w=170&h=170&mode=max");
                        $("#modemax").html(raw + "?w=170&h=170&mode=max");

                        $("#modecropimg").attr("src", raw + "?w=170&h=170&mode=crop");
                        $("#modecrop").html(raw + "?w=170&h=170&mode=crop");

                        $("#modecropcustomerimg").attr("src", raw + "?crop=300,400,600,500");
                        $("#modecropcustomer").html(raw + "?crop=300,400,600,500");

                        $("#modesepiaimg").attr("src", raw + "?h=200&s.sepia=true");
                        $("#modesepia").html(raw + "?h=200&s.sepia=true");

                        $("#modesrotateimg").attr("src", raw + "?srotate=90&height=200");
                        $("#modesrotate").html(raw + "?srotate=90&height=200");

                        $("#modeheightimg").attr("src", raw + "?height=150");
                        $("#modeheight").html(raw + "?height=150");

                        $("#webpimg").attr("src", raw + "?w=450&format=webp");
                        $("#webp").html(raw + "?w=450&format=webp");

                        $("#watermarkimg").attr("src", raw + "?w=450&watermark=imazen");
                        $("#watermark").html(raw + "?w=450&watermark=imazen");

                        $("#modeothers").html("");
                        $("#modeothers").append(raw + "?w=170" + "<br/><br/>");

                        $("#imgs").show();
                    }
                    else
                    {
                        $("#resultContent").html(JSON.stringify(result));
                    }
                },
                error: function () {
                    $("#resultContent").html("返回异常");
                }
            });
            return false;
        });
    });
</script>