最近在项目中用到了百度的文件图片上传插件WebUploader。分享给大家
需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader
【WebUploader文件图片上传插件的使用】
// 初始化Web Uploader***上传图片
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// 文件接收服务端地址，自动生成缩略图需要后端完成。
server: '/common/uploadFile?imageZip=1',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#sendimg',
fileNumLimit: 5,
//allowMagnify: false,
// 只允许选择图片文件。
accept:{
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'' +
'
文章图片
×');
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('').appendTo( $li );
}$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
$(".cimg").click(function(){
$(this).prev("img").remove();
$(this).remove();
})
});
}推荐阅读
- 针对 jQuery 的优化方法有哪些
- javascript|关于input的change事件触发多次发解决
- jquery Colorbox 传值
- Jquery 操作 Frame示例
- 代码记录|jquery获取select框的值、单选框的值、textarea的值、获取input框的值
- jQuery Infinite Ajax Scroll(ias) 分页插件介绍
- jQuery|jQuery 基础教程目录
- jquery.ui.droppable中文文档
- JS|Swiper插件的简单使用
- jquery|总结jQuery/js常用方法