将UEditor的图片批量上传抠出来单独使用

在Web项目中，经常有这样一个需求，就是对图片的批量上传，利用form表单的file可以实现图片的上传，但是用户体验不好，而且不支持ajax提交，网上也有很多图片上传插件，有基于javascript的，也有基于flash的，但是给我的感觉，要么用户体验不好，要么收费的，那么能不能有一个比较好的方案呢？那就是Ueditor！

UEditor是百度出品的一款富文本编辑器，里面也集成了一个基于Flash的图片上传插件，由于Ueditor是开源的，所以源代码很容易得到，经过我的一番研究，找到了它的图片上传插件的一些猫腻，于是把图片上传插件给独立出来了，形成了一个模块，以后批量图片上传可以直接用。

首先看下UEditor的目录结构：

那么图片上传插件是放到哪里的呢？由于比较分散，所以这部分经验不足，很难找到，可能也是ueditor为了防止滥用吧。请看下图：

把红框内的文件拷贝出来，放到一个新的文件夹下，如图：

把所有文件找到后，接下来就是振奋人心的时候了（编码），当然，javascript代码如何写也是通过研究他的源码实现的，接下来我将源码放出来，各位童鞋只需要使用就行了：

 <script type="text/javascript" src="${ctx }/upload/tangram.js"></script>

<div id="flashContainer"></div>

var flashObj = uploadPic();
function uploadPic(){$("#flashContainer").html("");/*-=-=-=-=-=-=-=全局变量模块-=-=-=-=-=-=-*///flash初始化参数var flashOptions ={createOptions:{id:'flash',url:'${ctx}/upload/image/imageUploader.swf',//这个就是附件里面的FLASHwidth:'510',//容器宽度height:'360',//容器高度errorMessage:'Flash插件初始化错误，请更新您的flashplayer版本！',wmode:'window',ver:'10.0.0',// 初始化的参数就是这些，vars:{width:500,      //width是flash的宽height:350,        //height是flash的高gridWidth:115,  // gridWidth是每一个预览图片所占的宽度，应该为width的整除gridHeight:120,  // gridHeight是每一个预览图片所占的高度，应该为height的整除picWidth:100,    // 单张预览图片的宽度picHeight:100,    // 单张预览图片的高度uploadDataFieldName:'picdata',    // POST请求中图片数据的keypicDescFieldName:'pictitle',    // POST请求中图片描述的keymaxSize:2,                    // 文件的最大体积,单位McompressSize:2,               // 上传前如果图片体积超过该值，会先压缩,单位MmaxNum:20,                        // 最大上传多少个文件backgroundUrl:'',               //背景图片,留空默认listBackgroundUrl:'',           //预览图背景，留空默认buttonUrl:'',                   //按钮背景，留空默认compressSide:1,                //等比压缩的基准，0为按照最长边，1为按照宽度，2为按照高度compressLength:700,                // 能接受的最大边长，超过该值Flash会自动等比压缩url:'',   // 上传处理页面的url地址ext:null,//扩展的参数,json格式fileType:'{"description":"图片(*.jpg,*.jpeg,*.png,*.gif)", "extension":"*.gif;*.jpeg;*.png;*.jpg"}'      //上传文件格式限制},container: 'flashContainer'//flash容器id},selectFileCallback:function(selectFiles){//选择文件时的回调函数selectedImageCount += selectFiles.length;if(selectedImageCount) baidu.g("upload").style.display = "";dialog.buttons[0].setDisabled(true); //初始化时置灰确定按钮 },exceedFileCallback: 'exceedFileCallback',   // 文件超出限制的最大体积时的回调deleteFileCallback: function(delFiles){//删除文件时的回调函数selectedImageCount -= delFiles.length;if (!selectedImageCount) {baidu.g("upload").style.display = "none";dialog.buttons[0].setDisabled(false); //没有选择图片时重新点亮按钮}}, startUploadCallback: 'startUploadCallback',  // 开始上传某个文件时的回调uploadCompleteCallback: 'uploadCompleteCallback',   // 某个文件上传完成的回调uploadErrorCallback: function (data){//console && console.log(data);},  // 某个文件上传失败的回调allCompleteCallback: 'allCompleteCallback'// 全部上传完成时的回调//changeFlashHeight: 'changeFlashHeight'     // 改变Flash的高度，mode==1的时候才有用};return new baidu.flash.imageUploader(flashOptions);};

/***上传图片*/function upload(){flashObj.upload();};/*** 文件大小超出时的回调函数* @param   Object*/function exceedFileCallback(file){// 参数为Object，{index:在多图上传的索引号, name:文件名, size:文件大小}// 其中size单位为Byteconsole.log("文件超出大小限制：");console.log(file.index, file.name, file.size);console.log("===================================");};/*** 开始上传单个文件的回调函数* @param   Object*/function startUploadCallback(file){console.log("开始上传如下文件：");console.log(file.name, file.size);console.log("===================================");};/*** 单个文件上传完成的回调函数* @param   Object/String   服务端返回啥，参数就是啥*/function uploadCompleteCallback(data){//将url保存到用户信息上console.log("上传成功", data);console.log("===================================");};/*** 单个文件上传失败的回调函数* @param  Object/String   服务端返回啥，参数就是啥*/function uploadErrorCallback(data){console.log("上传失败", data);console.log("===================================");};/*** 全部上传完成的回调函数*/function allCompleteCallback(data){alert(data.message);};

最后上传图片调用upload()就可以了，是不是很简单呢！

将UEditor的图片批量上传抠出来单独使用相关推荐

ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程
需要用上插件:axupimgs 插件作者:莫若卿支持版本:5.0.4+ 支持语言:仅中文插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
Android 图片批量上传,移动端图片批量上传问题
一.操作系统 1.ios ios的操作系统: 实现图片批量上传,可以直接使用input type=file 加上multiple 就可以实现,至于有些图片显示有问题可以通过 new FileRead ...
分享一个图片管理程序,图片批量上传,图片管理(有图片)
呵呵,好久没写博客了.今天在此奉上一篇! 关于图片管理,其实做项目很多地方都用到图片管理. 比如:产品图片,新闻图片,作品图片. 现分享一篇关于图片管理的文章,希望大家能用得上. 先来看效果图吧: 上 ...
php图片批量上传插件下载,jQuery的多图片批量上传插件
jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码上传前 ...
JCK Editor 结合jQuery Upload File 增加图片批量上传功能
项目需准备文件: jQuery File Upload 上传插件,下载地址:https://github.com/JennerZhang/jQuery-File-Upload Joomla JFUpl ...
php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...
解决KindEditor无法安装flash插件实现图片批量上传
由于现在无法下载使用flash插件,导致KindEditor有的功能丧失,无法使用,本文主要解决图片无法批量上传的问题. 由于公司项目是混编项目,比较老旧且业务复杂,使用KindEditor的地方较多 ...
jQuery图片批量上传插件
下载地址 jQuery图片批量上传网页插件,可以实现上传图片预览拖拽排序,编辑图片功能支持多个多图上传功能特效. dd:

将UEditor的图片批量上传抠出来单独使用

将UEditor的图片批量上传抠出来单独使用相关推荐

最新文章

热门文章