webuploader上传文件插件
2014-08-06 13:54
417 查看
在珍立拍论坛中发表说说,可以发表文字和图片说说,在发表图片说说时希望可以同时上传多张图片,于是就使用了webuploader插件。
使用该插件可以在上传图片前预览图片,可限制单个文件大小和单次上传图片个数,支持文件多选,类型过滤,拖拽,图片粘贴。
在页面需要的位置添加代码:
<div id="container" >
<div id="uploader" >
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将照片拖到这里,单次最多可选9张,单个文件大小不超过2M</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>
<script src="/Javascript/webuploader/upjquery.js" type="text/javascript"></script>
<script type="text/javascript" src="/Javascript/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/Javascript/webuploader/upload.js"></script>
加载css文件:
<link rel="stylesheet" type="text/css" href="/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="/css/uploadstyle.css" />
在页面加载完成后就实例化uploader(在uploader.js中)
// 实例化
uploader = WebUploader.create({
pick: { //选择图片按钮
id: '#filePicker',
label: '点击选择图片'
},
formData: { //上传图片时附带的参数
uid: 123
},
dnd: '#dndArea', //指定可拖拽的容器
paste: '#uploader', //监听粘贴事件的容器
swf: './Uploader.swf', //swf
chunked: false, //是否分片上传
chunkSize: 512 * 1024, //分片大小
server: '/Gagbbs/uploadfile', //上传文件服务端
accept: { //允许的文件类型
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
disableGlobalDnd: true, // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
fileNumLimit: 9, //上传文件个数
fileSizeLimit: 200 * 1024 * 1024, // 200 M 上传文件总大小
fileSingleSizeLimit: 2 * 1024 * 1024 // 2 M 单个文件大小
});
在发表图片说说时,图片需要对应的说说的ID,所以上传图片前先要对发帖表插入一条新的说说数据并返回对应的ID作为图片的附带参数一起上传到服务端:
要在uploader执行图片上传之前插入一段代码:
$upload.on('click', function() {
if ( $(this).hasClass( 'disabled' ) ) {
return false;
}
if ( state === 'ready' ) {
var cont=$("#printcont").val();
$.ajax({ //插入一条新的说说数据并返回ID
type: "POST",
url: "/Gagbbs/printinfo",
data:"cont="+cont,
success: function(msg){
var ms=eval('('+msg+')');
var id=ms["PostingID"];
//给上传的图片添加附带参数
uploader.options.formData.pid = id;
//上传图片
uploader.upload();
}
});
} else if ( state === 'paused' ) {
uploader.upload();
} else if ( state === 'uploading' ) {
uploader.stop();
}
});
服务端/Gagbbs/uploadfile返回json数据,uploader根据uploadAccept事件判断服务端的返回结果
uploader.on( 'uploadAccept', function( file, response ) {
if ( response.code==1 ) {
// 通过return false来告诉组件,此文件上传有错。
return false;
}
});
所用到的相关swf,js以及css文件下载地址:
http://pan.baidu.com/s/1gdf5cI3
使用该插件可以在上传图片前预览图片,可限制单个文件大小和单次上传图片个数,支持文件多选,类型过滤,拖拽,图片粘贴。
在页面需要的位置添加代码:
<div id="container" >
<div id="uploader" >
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将照片拖到这里,单次最多可选9张,单个文件大小不超过2M</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>
<script src="/Javascript/webuploader/upjquery.js" type="text/javascript"></script>
<script type="text/javascript" src="/Javascript/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/Javascript/webuploader/upload.js"></script>
加载css文件:
<link rel="stylesheet" type="text/css" href="/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="/css/uploadstyle.css" />
在页面加载完成后就实例化uploader(在uploader.js中)
// 实例化
uploader = WebUploader.create({
pick: { //选择图片按钮
id: '#filePicker',
label: '点击选择图片'
},
formData: { //上传图片时附带的参数
uid: 123
},
dnd: '#dndArea', //指定可拖拽的容器
paste: '#uploader', //监听粘贴事件的容器
swf: './Uploader.swf', //swf
chunked: false, //是否分片上传
chunkSize: 512 * 1024, //分片大小
server: '/Gagbbs/uploadfile', //上传文件服务端
accept: { //允许的文件类型
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
disableGlobalDnd: true, // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
fileNumLimit: 9, //上传文件个数
fileSizeLimit: 200 * 1024 * 1024, // 200 M 上传文件总大小
fileSingleSizeLimit: 2 * 1024 * 1024 // 2 M 单个文件大小
});
在发表图片说说时,图片需要对应的说说的ID,所以上传图片前先要对发帖表插入一条新的说说数据并返回对应的ID作为图片的附带参数一起上传到服务端:
要在uploader执行图片上传之前插入一段代码:
$upload.on('click', function() {
if ( $(this).hasClass( 'disabled' ) ) {
return false;
}
if ( state === 'ready' ) {
var cont=$("#printcont").val();
$.ajax({ //插入一条新的说说数据并返回ID
type: "POST",
url: "/Gagbbs/printinfo",
data:"cont="+cont,
success: function(msg){
var ms=eval('('+msg+')');
var id=ms["PostingID"];
//给上传的图片添加附带参数
uploader.options.formData.pid = id;
//上传图片
uploader.upload();
}
});
} else if ( state === 'paused' ) {
uploader.upload();
} else if ( state === 'uploading' ) {
uploader.stop();
}
});
服务端/Gagbbs/uploadfile返回json数据,uploader根据uploadAccept事件判断服务端的返回结果
uploader.on( 'uploadAccept', function( file, response ) {
if ( response.code==1 ) {
// 通过return false来告诉组件,此文件上传有错。
return false;
}
});
所用到的相关swf,js以及css文件下载地址:
http://pan.baidu.com/s/1gdf5cI3
相关文章推荐
- Java中使用WebUploader插件上传大文件单文件和多文件的方法小结
- 快速掌握jQuery插件WebUploader文件上传
- WebUploader 上传插件选择上传文件按钮无效问题
- 前端常用插件使用文档 以及demo之上传文件 web uploader 常见
- Baidu WebFE(FEX)团队开发 的 文件上传插件 WebUploader
- [记录]好用的文件上传插件webuploader
- 使用百度webuploader插件进行多文件类型分片上传实例
- 百度WebUploader插件上传文件
- 文件上传插件web uploader
- php结合web uploader插件实现分片上传文件
- Web Uploader文件上传插件使用详解
- Thinkphp拖拽上传文件-使用webuploader插件(自己改动了一些地方)——分片上传
- 功能强大的文件上传插件带上传进度-WebUploader
- Web Uploader文件上传插件
- jQuery插件WebUploader实现文件上传
- 使用百度webuploader插件进行多文件类型分片上传实例
- 基于WebUploader的文件上传插件
- 优秀的前端上传文件插件 web uploader
- 文件上传插件WebUploader的使用
- 文件上传插件WebUploader的使用