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 里封装了 销毁的方法， 关闭模态框的时候，执行销毁操作。

下载链接：

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

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