文档章节

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

Acce1erator
 Acce1erator
发布于 2015/12/15 18:15
字数 1357
阅读 6909
收藏 227
点赞 18
评论 17

笔者最近由于项目需求,要实现一个前端文本编辑框,附带图片上传实时查看的功能。比较了网上的几款插件,首先是百度的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
粉丝 21
博文 25
码字总数 18001
作品 0
朝阳
程序员
加载中

评论(17)

妳微笑時好美灬
妳微笑時好美灬

引用来自“feiyu1993”的评论

makr

引用来自“MartinBock”的评论

mark
mark
limodou
limodou
支持
单行道
单行道
mark一下
ShadowRunning
ShadowRunning
mark
TerryZ
TerryZ
mark一下
Acce1erator
Acce1erator

引用来自“OSC首席键客”的评论

本地预览用file api,上传存储又不是上传那个编码了得base64字符串,怎么会存图片字符串到呢?
因为你提交用到了jQuery的$.html()方法,会把图片以html的形式提交过去
烟璃悠
烟璃悠
mark
三笠阿克曼
三笠阿克曼
mark

引用来自“feiyu1993”的评论

makr

引用来自“简-文”的评论

mark
OURLINK
焦虑的程序猿
焦虑的程序猿
makr
.Net MVC 用 ajaxfileupload 上传图片

导入js cshtml 主要是type="file"的input ,特别注意,它的name="file", 后台接收写的样式一定也要是file js 注意: UploadImage(HttpPostedFileBase file){} 里面的file 一定要是前台 name="fi...

donald121 ⋅ 06/07 ⋅ 0

bootstrap-wysiwyg如何上传图片到服务端

想使用bootstrap-wysiwyg实现图文混合文章的上传,文章内容可以直接上传div中的内容,我想请问使用bootstrap-wysiwyg中的插入图片后图片显示在了文章里,请问怎么将其上传?...

yukjin ⋅ 2014/08/28 ⋅ 5

ASP.NET 使用js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)

在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.” 但是有点长,会显...

我不会抽烟 ⋅ 2014/09/05 ⋅ 0

10个免费的javascript富文本编辑器(jQuery and non-jQuery)

祝愿园子里的朋友圣诞节快乐。 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascript富文本编辑器使我们添...

老鸟的空间 ⋅ 2014/07/05 ⋅ 1

php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例

博客已转移到:http://blog.phpue.com/Article/index/id/13.html 这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的。用的还不熟练,所以今天就用a...

3147972 ⋅ 2014/03/17 ⋅ 0

Jcrop 整合 FileAPI 图像裁剪上传

Jcrop是一款优秀的jQuery插件,可以非常方便地实现图像裁剪,而且功能十分的强大。 一般的情况下,图像裁剪的实现要经过两次图像上传,第一次将图片上传到后台,后台返回一个链接,通过这个链...

Acce1erator ⋅ 2015/12/28 ⋅ 0

jfinal和ajaxfileupload.js结合的问题

ajaxfileupload.js明明实现是异步上传文件,但是为什么每次我发完请求之后,页面就会自己刷新呢? 下面是我的相关代码 页面 接口测试 图片对比测试 上传图片

ForestDan ⋅ 2016/04/28 ⋅ 0

基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序、APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML文档的编辑和...

walb呀 ⋅ 2017/12/04 ⋅ 0

给ajaxfileupload上传文件时增加一些参数

ajaxfileupload是一个jquery的文件上传插件,可以利用ajax无刷新上传文件到服务器。其实现原理为:利用js动态创建一个表单,并提交。但默认情况下,该插件只能上传一个文件,且不能携带其它参...

王虫虫 ⋅ 2016/09/10 ⋅ 0

Spring Jackson AjaxFileUpload 没有执行回调函数的解决办法

在使用Spring MVC+Jackson与AjaxFileUpload进行图片上传并返回图片地址时,图片上传没有问题,但是ajaxfileupload的success回调并没有执行,找了半天没找到原因,firebug显示response的json也...

方绍伟 ⋅ 2013/10/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JAVA RMI

什么是JAVA RMI Java RMI (Remote Method Invocation) 远程方法调用,能够让客户端像使用本地调用一样调用服务端 Java 虚拟机中的对象方法。RMI 是面向对象语言领域对 RPC (Remote Proced...

saulc ⋅ 15分钟前 ⋅ 0

Linux系统工程狮养成记

如今的社会,随着时代的发展,出现了很多职业,像电子类,计算机类的专业,出现了各种各样的工程师,有算法工程师,java工程师,前端工程师,后台工程师,Linux工程师,运维工程师等等,不同...

linux-tao ⋅ 25分钟前 ⋅ 0

进入编辑模式 vim命令模式 vim实践

1.

oschina130111 ⋅ 25分钟前 ⋅ 0

mysql用户管理、常用sql语句、mysql数据库备份恢复

1. mysql用户管理 mysql默认有一个root超级管理员账户,实际工作环境中不可能每个人都用此root权限,防止误操作、误删除,可以给单独的用户进行授权。 Mysql创建用户以及授权: grant all on...

laoba ⋅ 26分钟前 ⋅ 0

类型后面三个点(String...)和数组(String[])的区别

类型后面三个点(String…),是从Java 5开始,Java语言对方法参数支持一种新写法,叫可变长度参数列表,其语法就是类型后跟…,表示此处接受的参数为0到多个Object类型的对象,或者是一个Obj...

流氓兔- ⋅ 32分钟前 ⋅ 0

JEPLUS表格组件之表格合并——JEPLUS软件快速开发平台

JEPLUS表格组件之表格合并 我们在列表配置时会遇见这样的一种情况,需要对个人的数据进行统一化,对一些数据进行归类,这样展示出来美观又直观,在这篇笔记中我来给大家介绍下如何配置出来专...

JEPLUS ⋅ 33分钟前 ⋅ 0

golang 并发中全局唯一操作

package main// go 携程共享 数据// 加锁解锁操作// 同步锁import ("sync""fmt")// 创建Once结构var once = sync.Once{}func computed(data *int, lock *sync.Mut...

304158 ⋅ 34分钟前 ⋅ 0

Mobx入门之二:asynchronous actions

这一节主要看mobx怎么实现asynchronous actions 1 要实现的demo功能 输入地名,查询天气,利用openweathermap api 2 思想 observable观察数据:location地点、temperature温度 observer响应式...

pengqinmm ⋅ 36分钟前 ⋅ 0

【2018.0620学习笔记】【linux高级知识 13.4-13.6】

13.4 mysql用户管理 创建用户并授权: grant all on *.* to '用户名'@'ip' identified by '密码' //all是操作权限,*.*是库.表,指定格式是'用户名'@'localhost'才能用socket登录本地 gra...

lgsxp ⋅ 57分钟前 ⋅ 0

Java强弱引用示例

package jdk;import java.lang.ref.PhantomReference;import java.lang.ref.ReferenceQueue;import java.lang.ref.SoftReference;import java.lang.ref.WeakReference;public ......

月下狼 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部