WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。

      对此官方也给出了很多版本的demo，但是demo里没有自己所想的那种需求，所以自己只好结合前后台去实现那种需求。

      现在需要向数据库中添加一条记录，在这条记录中，有图片路径这个字段，存放上传图片的路径，但此条记录是允许存放多条图片路径的，理论上按照数据库的三范式，此表与图片路径表会产生一个多对多的关系，所以需要在此关系上，另建第三表和图片路径表，自己为了节省麻烦和难度，就直接想在一个字段中存放多条路径。

     所以这样，需求很明确了，在上传的时候通过一些处理来实现！

    demo里js代码：

 <script>
        var BASE_URL = 'js/plugins/webuploader/Content/btsui';
        var uploader;
        var countup = 0;
        var x = 0;
        $(function () {
   
            // 初始化Web Uploader
            uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: false,

                // swf文件路径
                swf: BASE_URL + '/js/Uploader.swf',

                // 文件接收服务端。
                server: '你的后台处理图片上传地址',

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

                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img id="yimg">' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $('#yimg');

               
                // $list为容器jQuery实例
                $('#fileList').append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    alert(src);
                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
            uploader.on('uploadSuccess', function (file) {
                x++;
                if (x >= countup) {
                    $.post(
                    '后台添加记录地址',//请求地址
                     { msg: $('#ccomment').val() },//参数
                   function (msg) {
                       if (msg == 'ok') {
                           layer.msg('提交成功，感谢你的支持！', {
                               time: 5000 //5s后自动关闭

                           });
                           $('#ccomment').val("");
                       }
                   }
                );
                }
                  $('#' + file.id).text('已上传');
            });
            uploader.on('uploadError', function (file) {
                $('#' + file.id).text('上传出错');
            });
            uploader.on('uploadComplete', function (file) {
                $('#fileList').empty();
              
            });

        })
      

        function AddSuggest() {
            if ($('#ccomment').val() == "") {
                layer.msg('反馈建议正文是必填字段！', {
                    time: 5000,//5s后自动关闭
                    btn: ['明白了', '知道了']
                });
            }
            else {
                countup = $('#fileList').children().length;
                if (countup > 3) {
                    layer.msg('最多上传三张！', {
                        time: 5000,//5s后自动关闭
                        btn: ['明白了', '知道了']
                    });
                }
                else if (countup == 0) {
                    $.post(
                                       '后台添加记录地址',//请求地址
                     { msg: $('#ccomment').val() },//参数
                   function (msg) {
                       if (msg == 'ok') {
                           layer.msg('提交成功，感谢你的支持！', {
                               time: 5000 //5s后自动关闭

                           });
                           $('#ccomment').val("");
                       }
                   }
                );
                }
                else {
                    uploader.upload();

                }
            }
           
        }
     
    </script>

     c#后台代码：

    Session["Upimgsggest"]存放上传图片路径，多张图以”，“隔开存入，目的是从数据库取得时候以”，“分隔去取每条图片路径，另外存入session目的，是等待图片所有图片上传成功并存入session后，再去向数据库中添加记录中其他字段值，这样就达到了预想的需求了！

 HttpPostedFileBase msgImage = Request.Files["file"];
            string[] accept=new string[]{".gif",".jpg",".jpeg",".bmp",".png"};
            if (accept.Contains(Path.GetExtension(msgImage.FileName)))
            {
                string filename = Guid.NewGuid() + Path.GetExtension(msgImage.FileName);
                msgImage.SaveAs(Server.MapPath("~/图片存放路径" + filename));
                if (Session["Upimgsggest"] == null)
                {
                    Session["Upimgsggest"] = "~/图片存放路径" + filename;
                }
                else
                {
                    Session["Upimgsggest"] = Session["Upimgsggest"] + ",~/图片存放路径" + filename;
                }
                return Content("ok");
            }
            return Content("ok");

发表吐槽