百度上传插件WebUploader使用教程

百度上传插件WebUploader使用教程

1、必须引入的文件

<link href="~/Content/WebUploader/webuploader.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.8.2.js"></script>

<script src="~/Content/WebUploader/webuploader.js"></script>

2、页面HTML代码


<div id="uploader" class="wu-example">

    <div class="btns">

        <div id="picker">选择文件</div>

        <button id="ctlBtn" class="btn btn-default" onclick="javascript:uploader.upload();">开始上传</button>

    </div><!--用来存放文件信息-->

    <div id="thelist" class="uploader-list"></div>

</div>

3、初始化配置信息

    var $ = jQuery,

        $list = $('#thelist'),

        $btn = $('#ctlBtn'),

        uploader;

    uploader= WebUploader.create({

        // 选完文件后,是否自动上传。

        auto: false,

        // swf文件路径

        swf: '/Content/WebUploader/Uploader.swf',

        // 文件接收服务端。

        server: '/WebUploader/Uploader',

        // 选择文件的按钮。可选。

        // 内部根据当前运行是创建,可能是input元素,也可能是flash.

        pick: '#picker',

        // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!

        resize: false,

        // 只允许选择图片文件。

        accept: {

            title: 'Images',

            extensions: 'gif,jpg,jpeg,bmp,png',

            mimeTypes: 'image/*'

        },

        // 开起分片上传。

        chunked: true

    });

4、插件常用的事件

//显示用户选择,由于webuploader不处理UI逻辑,所以需要去监听fileQueued事件来实现。

    // 当有文件被添加进队列的时候

    uploader.on('fileQueued', function (file) {

        var $li = $(

            '<div id="' + file.id + '" class="file-item thumbnail">' +

                '<img>' +

                '<div>' + file.name + '</div>' +

            '</div>'

            ),

        $img = $li.find('img');

        // $list为容器jQuery实例

        $list.append($li);

 

        // 创建缩略图

        // 如果为非图片文件,可以不用调用此方法。

        // thumbnailWidth x thumbnailHeight 100 x 100

        uploader.makeThumb(file, function (error, src) {

            if (error) {

                alert("不能预览");

                $img.replaceWith('<span>不能预览</span>');

                return;

            }

            $img.attr('src', src);

        }, 100, 100);

    });

     //文件上传进度

    //文件上传中,Web Uploader会对外派送uploadProgress事件,其中包含文件对象和该文件当前上传度。

    // 文件上传过程中创建进度条实时显示。

    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 role="progressbar" style="width: 0%">' +

                '</div>' +

                '</div>').appendTo($li).find('.progress-bar');

        }

 

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

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

    });

    //文件成功、失败处理

    //文件上传失败会派送uploadError事件,成功则派送uploadSuccess事件。不管成功或者失败,在文件上传完后都会触发uploadComplete事件。

 

    uploader.on('uploadSuccess', function (file, data) {

        $('#' + file.id).find('p.state').text('上传成功');

    });

 

    uploader.on('uploadError', function (file, data) {

        $('#' + file.id).find('p.state').text('上传出错' + data.msg);

    });

 

    uploader.on('uploadComplete', function (file) {

        $( '#'+file.id ).find('.progress').fadeOut();

    });

5、后台采用.NET MVC直接贴代码

public ActionResult Uploader()

        {

            try

            {

                var file = Request.Files["file"];

                var fileSavePath = Server.MapPath("~/Content/images/");

                if (file.ContentLength < 2000000)

                {

                    file.SaveAs(fileSavePath + file.FileName);

                    return Json(new {success = true, msg = "上传成功"});

                }

                else

                {

                    return Json(new {success = false, msg = "仅支持2M以下的图片文件"});

                }

            }

            catch (Exception exception)

            {

                return Json(new {success = false, msg = exception.Message});

            }

        }


回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置

发布时间:2016-03-22 23:48:56

修改时间:2016-03-22 23:48:56

查看次数:339

评论次数:2

TA的文章总数

44