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>
注意事项
- 在使用模态框上传的时候,有一个特别需要注意的地方 : 打开模态框 ,上传按钮无法点击的情况,再次打开,按钮可点了
解决方案:
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