WebUploader图片上传实例

webuploader-1.1.5 图片上传实例

本插件基于 webuploader插件 进行了封装，提供了三种常用视图，并对常用上传功能进行了JS封装，视图，样式，业务逻辑都已封装（JS），可以直接引入使用。

主要提供了两个版本：

版本1（模态框上传） ： 支持拖拽，支持粘贴，支持模态框，支持预览，支持断点，支持删除，旋转

版本2 （简单上传）： 简单上传，支持预览

效果：

使用说明

1. 模态框上传步骤：

直接引入 _view.html里代码即可，所需要的所有代码，已写在了 _view.html代码里

以下是思路：

一、： 引入资源

    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../vendors/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
    <link href="../vendors/pnotify/dist/pnotify.custom.min.css" rel="stylesheet" />
    <script src="../vendors/jquery/dist/jquery.min.js"></script>


    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../vendors/webuploader-0.1.5/webuploader.min.js"></script>
    <script src="../vendors/pnotify/dist/pnotify.custom.min.js"></script>
    <script src="../vendors/webuploader-0.1.5/upload.js"></script>

二、初始化

1. 视图 和 初始化脚本实例 已放置在 _view.html 中。

<!--模态框 单独模块-->
<div id="imgModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 900px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">上传图片</h4>
            </div>
            <div class="modal-body model-scroll" style="max-height: 500px;">
                <!--上传图片start-->
                <div id="wrapper">
                    <div id="container">
                        <div id="uploader">
                            <div class="queueList">
                                <div id="dndArea" class="placeholder">
                                    <div id="filePicker"></div>
                                    <p>或将照片拖到这里，并支持截图粘贴功能</p>
                                </div>
                            </div>
                            <div class="statusBar" style="display: none;">
                                <div class="progress">
                                    <span class="text">0%</span>
                                    <span class="percentage"></span>
                                </div>
                                <div class="info"></div>
                                <div class="btns">
                                    <div id="filePicker2"></div>
                                    <div class="uploadBtn">开始上传</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--上传图片end-->
            </div>
        </div>
    </div>
</div>
<button id="openUpload" type="button" class="btn btn-primary" data-toggle="modal" data-target="#imgModal">上传图片</button>

2. JS 思路就是初始化上传方法。

我已封装好的上传方法，需要提供回调方法的参数；并监听模态框，实例的代码即可。

<script>
    $(function () {
        var callback = function (response) {
            if (response.Status == 200) {
                new PNotify({ title: "成功！", text: response.Message, type: 'success' });// 此处使用了Pnotify 插件== alert
            } else {
                new PNotify({ title: "失败！", text: response.Message, type: 'error' });
            }
        };


        //打开模态框-初始化图片插件
        $('#imgModal').on('shown.bs.modal', function () {
            _init_upload(callback);
        });
        //关闭模态框-销毁对象         
        $('#imgModal').on('hidden.bs.modal', function () {
            if (typeof (uploader) != "undefined") {
                uploader._destroy();
            }
        });
    });
</script>

简单按钮上传

这一种比较简单，可以直接使用 _view_simple.html,而后执行 _init_simpleUpload方法即可。

一、： 引入资源

<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../vendors/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="../vendors/pnotify/dist/pnotify.custom.min.css" rel="stylesheet" />
<link href="../vendors/webuploader-0.1.5/style_simple.css" rel="stylesheet" />
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../vendors/webuploader-0.1.5/webuploader.min.js"></script>
<script src="../vendors/pnotify/dist/pnotify.custom.min.js"></script>
<script src="upload_simple.js"></script>

<!--_view_simple.html html 代码-->

二、视图代码

<!--简单模块-->
<div class="container form-horizontal">
    <div class="row form-group">
        <label class="control-label  col-lg-3 col-md-3">图片地址</label>
        <div class="col-lg-5 col-md-6">
            <input class="form-control" name="askImage" id="askImage" disabled="disabled" style="max-width:100%;" />
        </div>
        <div id="uploadImg">上传图片</div>
        @*<button type="button" class="btn btn-primary">上传图片</button>*@
    </div>
    <div id="fileList" class="uploader-list  wu-example"></div>
</div>

三、 初始化上传方法

<script>
    $(function () {
        //Test
        _init_simpleUpload();//初始化上传方法
    })
</script>

注意事项

1. 在使用模态框上传的时候，有一个特别需要注意的地方 ： 打开模态框 ，上传按钮无法点击的情况，再次打开，按钮可点了

解决方案：

webuploader 初始化必须要在 按钮处于显示状态才能完成初始化。 所以，我们打开模态框的时候，再去初始化 webuploader， 为了防止重复初始化，我在 upload.js 里封装了 销毁的方法， 关闭模态框的时候，执行销毁操作。

下载链接：

C# Demo 下载链接 ： https://github.com/wangyushuai/WebUploader-Demos.git
java demo 下载链接： https://github.com/wangyushuai/demo_ssm.git
csdn下载链接： http://download.csdn.net/download/shuai_wy/10163529

在DEMO 里,实际上我写了 三个 DEMO ，除了上面的两种，还提供了一种 直接上传的DEMO