文档章节

bootstrap-wysiwyg整合ajaxFileUpload实现图片实时上传刷新

Acce1erator
 Acce1erator
发布于 2015/12/15 18:15
字数 1357
阅读 8.1K
收藏 224

行业解决方案、产品招募中!想赚钱就来传!>>>

笔者最近由于项目需求,要实现一个前端文本编辑框,附带图片上传实时查看的功能。比较了网上的几款插件,首先是百度的UEitor,笔者发现该框架过于庞大,一个小框架引入如此多的文件并不是我想看到的;其次是jQuery的easyUI,虽然个人版的是免费的,但是项目属于公司业务,似乎用商业版的框架并不妥。考虑到笔者项目的前端主要就是在bootstrap的基础上构建起来的,我最终选用了bootstrap-wysiwyg插件,它非常的精简,轻巧而且扩展性强。

引入bootstrap-wysiwyg并且实现文本编辑功能十分的便捷,但是,我注意到,图片上传是用fileapi实现的。对于大多数网站,虽然用FileApi实现无上传预览用户体验非常好,但是真正存入数据库的时候,我们还是希望能够存储图片的在服务器的静态路径,而并非字符串化的图片。简而言之,我们需要对bootstrap-wysiwyg(以下简称WY)做稍许改写。

首先我们来观察下页面上图片控件,其它的控件略过,查一下源码,很容易发现如下代码:

<div class="btn-group">
	<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn">
	<i class="icon-picture"></i></a>
        <input type="file" data-role="magic-overlay" 
            data-target="#pictureBtn"
	    data-edit="insertImage" />
</div>

做一下说明,data-role,data-target属性是bootstrap中预定义的事件,在这里我们可以理解为布局相关,不用考虑。关键点来了,第三个属性data-edit,bootstrap中并没有这一事件,观察bootstrap-wysiwyg.js,可以发现这样一些代码:

toolbar.find('input[type=file][data-' + options.commandRole + ']')
					.change( ...
					...
commandRole : 'edit',

也就是说,该属性其实是为了方便选择器而实现的,相当于给图片按钮添加了监听器事件。

我们接着研究一下WY图片预览的实现,第一步,就像上面代码展示的一样,监听器捕捉到fileInput的change事件,做出响应,调用insertFiles函数

restoreSelection();
if (this.type === 'file' && this.files && this.files.length > 0) {
	insertFiles(this.files);
}
saveSelection();
his.value = '';

找到insertFiles函数

insertFiles = function (files) {
				editor.focus();
				$.each(files, function (idx, fileInfo) {
					if (/^image\//.test(fileInfo.type)) {
						$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
							execCommand('insertimage', dataUrl);
						}).fail(function (e) {
							options.fileUploadError("file-reader", e);
						});
					} else {
						options.fileUploadError("unsupported-file-type", fileInfo.type);
					}
				});
			}

我们注意到它使用了jQuery的$.Deferred()方法,先调用了一个readFileIntoDataUrl方法,成功之后通过自封装的execCommand方法实现将图片输出到文本框。该图片其实就是一个<img>标签,只不过src属性是用字符串表示的图片。所以我们要做的其实是在监听器触发之后,将文件上传,获得图片的src,再把链接交给之后的execCommand方法。

由于笔者对Deferred并不是特别熟悉,所以还是采用更为通常的callback模式

观察ajaxFileUpload的调用方式:

$.ajaxFileUpload({
				url : ...,
				secureurl : false,
				fileElementId : ...,
				dataType : "json",
				success : function(obj) {
					...
				},
				error : function() {
					...
				}
			});

有两个必选的属性,url和fileElementId,为了保持依赖的正确性,重写ajaxFileUpload是不可取的。但是由于WY的控件是监听器实现的,所以通过函数将参数传过去是不现实的,所以我们需要自己对输入框定义一些属性来达到目的。

在fileInput中添加一些属性

<input type="file" id="pictureInput" name="picture"
					data-role="magic-overlay" data-target="#pictureBtn"
					data-edit="insertImage" action="..." />

id 用作 fileElementId,name属性也是必须的,主要是为了后台取值指名,action是图片需要提交到的url

在bootstrap-wysiwyg.js中定义一个函数名为uploadFileToServer,函数格式如下:

var uploadFileToServer = function(id, action, callback) {
		$.ajaxFileUpload({
			url : action,
			secureurl : false,
			fileElementId : id,
			dataType : 'json',
			success : function(obj) {
				if (obj.status) {
					callback(obj.imgsrc);
				} else
					options.fileUploadError("server-internal-exception",
							obj.message);
			},
			error : function() {
				options.fileUploadErroe("upload-failure", "");
			}
		});

将insertFiles方法作改写如下:

insertFiles = function(files, id, action) {
			editor.focus();
			$.each(files, function(idx, fileInfo) {
				if (/^image\//.test(fileInfo.type)) {
					/*
					 * $.when(readFileIntoDataUrl(fileInfo)).done(function(dataUrl) {
					 * execCommand('insertimage', dataUrl); }).fail(function(e) {
					 * options.fileUploadError("file-reader", e); });
					 */
					uploadFileToServer(id, action, function(src) {
						execCommand('insertimage', src);
					});
				} else {
					options.fileUploadError("unsupported-file-type",
							fileInfo.type);
				}
			});

同时对监听器做出一定的修改,以便拿到必要的属性

toolbar.find('input[type=file][data-' + options.commandRole + ']')
				.change(
					function() {
							restoreSelection();
								if (this.type === 'file' && this.files
										&& this.files.length > 0) {
									insertFiles(this.files, $(this).attr('id'),
											$(this).attr('action'));
								}
								saveSelection();
								this.value = '';
							});

主要是增加了两个参数位置。

如此,改写便完成了,注意,要确保正确执行,请在控件之前引用ajaxFileUpload.js


2016年1月14日 15:07:59更新:

今天在用的时候发现一个问题,即图片只能上传一次的问题,这是ajaxFileUpload.js的问题,解决方案:

ajaxfileupload.js原文第41行:

var newElement = jQuery(oldElement).clone();

改为:

var newElement = jQuery(oldElement).clone(true);

原因是ajaxFileUpload默认复制元素而不复制元素事件导致WY的监听器change失效。

另,附上$.Deferred对象的改写方法:

//原文第6行
var uploadFileToServer = function(id, action) {
		var loader = $.Deferred();
		$.ajaxFileUpload({
			url : action,
			secureurl : false,
			fileElementId : id,
			dataType : 'json',
			success : function(json) {
				if (json.status) {
					loader.resolve(json.imgsrc);
				} else {
					loader.reject('server-internal-exception', json.message);
				}
			},
			error : function() {
				loader.reject('upload-failure', '');
			}
		});
		return loader.promise();
	}
	
	//原文100行附近
	insertFiles = function(files, id, action) {
			editor.focus();
			$.each(files,
					function(index, file) {
						if (/^image\//.test(file.type)) {
							$.when(uploadFileToServer(id, action)).done(
									function(src) {
										execCommand('insertimage', src);
									}).fail(function(e, message) {
								options.fileUploadError(e, message);
							});
						} else {
							options.fileUploadError("unsupported-file-type",
									file.type);
						}
					});


Acce1erator
粉丝 23
博文 25
码字总数 18001
作品 0
朝阳
程序员
私信 提问
加载中
此博客有 17 条评论,请先登录后再查看。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
3.9K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
实时分析系统--istatd

istatd是IMVU公司工程师开发的一款优秀的实时分析系统,能够有效地收集,存储和搜索各种分析指标,类似cacti,Graphite,Zabbix等系统。实际上,istatd修改了Graphite的存储后端,重新实现了...

匿名
2013/02/07
2.8K
1
Promises/A 和 when() 实现--When.js

When.js 是 cujojs 的轻量级的 Promises/A 和 when() 实现,从 wire.js 的异步核心和 cujojs 的 IOC 容器派生而来。包含很多其他有用的 Promiss 相关概念,例如联合多个 promiss、mapping 和...

匿名
2013/02/15
7.4K
0
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
6.9K
1

没有更多内容

加载失败,请刷新页面

加载更多

如何在Android中以像素为单位获取屏幕尺寸 - How to get screen dimensions as pixels in Android

问题: I created some custom elements, and I want to programmatically place them to the upper right corner ( n pixels from the top edge and m pixels from the right edge). 我创建......

javail
36分钟前
7
0
如何在不安装Microsoft Office的情况下用C#创建Excel(.XLS和.XLSX)文件?

问题: 如何在不使用运行代码的计算机上安装Excel的情况下使用C#创建Excel电子表格? 解决方案: 参考一: https://stackoom.com/question/dHZ/如何在不安装Microsoft-Office的情况下用C-创...

技术盛宴
今天
7
0
如何使用pip升级所有Python软件包? - How to upgrade all Python packages with pip?

问题: Is it possible to upgrade all Python packages at one time with pip ? 是否可以通过pip一次升级所有Python软件包? Note : that there is a feature request for this on the off......

法国红酒甜
今天
9
0
活体检测+合成图鉴别面前,人脸“照片活化”黑产攻击一秒被擒

本文作者:y****n 如今,随着人脸技术的日趋成熟,新兴娱乐文化得到了极大的推动,尤其是随着 DeepFake、FaceSwap 等人脸编辑及生成技术的发展,虚拟主播、人脸合成带给人们全新的体验,但同...

百度开发者中心
昨天
12
0
如何在SQL Server中将多行文本合并为单个文本字符串?

问题: Consider a database table holding names, with three rows: 考虑一个包含名称的数据库表,该表具有三行: PeterPaulMary Is there an easy way to turn this into a single str......

富含淀粉
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部