dalong 2016-07-28
出现问题:先上传了一次,后来发现读取完成以后,数据保存没有问题,当再次点击时,没有调用到,页面没什么反应
起初是怀疑页面缓存了,但是尝试在 input上添加了click,并设置了action的时间戳
$("#pictureInput").click(function(event){
$("#pictureInput").attr("action","xxxx?"+event.timeStamp);
alert($("#pictureInput").attr("action"));
});
但是上传完一次之后一样没有反应,并且点击也不走这个方法了,如果只是点击不上传,下次还可以进行点击。
说明问题还是出现在ajaxFileUpload.js中,
网上解决办法:在ajaxFileUpload.js源码中找到:createUploadForm 找到这一段
改为:
此处的 var newElement = $(oldElement).clone(true);
clone() 方法生成被选元素的副本,包含子节点、文本和属性。
$(selector).clone(includeEvents)
includeEvents | 可选。布尔值。规定是否复制元素的所有事件处理。 默认地,副本中不包含事件处理器。 |
默认事件不进行处理,所以设置为true之后事件也进行了克隆。
问题解决
以下转自链接:http://my.oschina.net/u/2541538/blog/545574
bootstrap-wysiwyg整合ajaxFileUpload实现图片实时上传刷新
笔者最近由于项目需求,要实现一个前端文本编辑框,附带图片上传实时查看的功能。比较了网上的几款插件,首先是百度的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); } });
为了美观,把 type="file" 控件隐藏。点击“上传”按钮,click调用隐藏文件控件,再选择文件。查了一遍,好像是ie为了安全控制,文件的必须鼠标点击过后,才能提交。还没有想到其他的方法。。。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。6,error 提交失败自动执行的处理函数。7,data 自定义参数。fileElementId: 'file1',
-- 引入相关的js文件,相对路径 -->. -- 执行上传文件操作的函数 -->. method=uploader', //需要链接到服务器地址。fileElementId:'houseMaps',