我上一个版本用的是ueditor1.3.6,自从1.4.2版以后,“前端上传模块统一改用webuploader”,ueditor在多图上传一直考虑漏掉了图片顺序的问题。
我的网站在用户上传图片文章的时候,使用多图上传,点确认后,编辑框内的图片顺序是乱的。
看webuploader的问题在于多线程上传,ueditor对“uploadSuccess”的处理是上传成功一张,就加入到数组中,这样如果图片上传完成顺序是乱的,最终加入文本框的顺序也乱了。
我这里修改了一下js,供大家参考,希望ueditor能改进这个问题:
vim dialogs/image/image.js
716 uploader.on('uploadSuccess', function (file, ret) {
717 var $file = $('#' + file.id);
718 try {
719 var responseText = (ret._raw || ret),
720 json = utils.str2json(responseText);
721 if (json.state == 'SUCCESS') {
722 _this.imageList[$file.index()] = json; // 按选择好的文件列表顺序存储
723 $file.append('');
724 } else {
725 $file.find('.error').text(json.state).show();
726 }
727 } catch (e) {
728 $file.find('.error').text(lang.errorServerUpload).show();
729 }
730 });
vim dialogs/attachment/attachment.js
500 uploader.on('uploadSuccess', function (file, ret) {
501 var $file = $('#' + file.id);
502 try {
503 var responseText = (ret._raw || ret),
504 json = utils.str2json(responseText);
505 if (json.state == 'SUCCESS') {
506 _this.fileList[$file.index()] = json;
507 $file.append('');
508 } else {
509 $file.find('.error').text(json.state).show();
510 }
511 } catch (e) {
512 $file.find('.error').text(lang.errorServerUpload).show();
513 }
514 });
vim dialogs/video/video.js
729 uploader.on('uploadSuccess', function (file, ret) {
730 var $file = $('#' + file.id);
731 try {
732 var responseText = (ret._raw || ret),
733 json = utils.str2json(responseText);
734 if (json.state == 'SUCCESS') {
735 uploadVideoList[$file.index()] = {
736 'url': json.url,
737 'type': json.type,
738 'original':json.original
739 };
740 $file.append('');
741 } else {
742 $file.find('.error').text(json.state).show();
743 }
744 } catch (e) {
745 $file.find('.error').text(lang.errorServerUpload).show();
746 }
747 });
如上,都使用了$file.index()作为数组下标,可以保证图片上传后顺序是按照用户选择图片以后,加入到预览窗口的顺序。
另外说一下:windows里选择图片用shift的时候连选,如果一开始选择1.jpg,然后按住shift选择10.jpg,结果这个10.jpg会在第一个,1~9.jpg反而在后面;需要先选择10.jpg,按住shift再选择1.jpg,这样图片顺序是1~10.jpg没错。有人能告诉原因和解决方法么?难道只能倒着连选?
相关推荐
java带进度条的多文件上传 支持html5和flash ueditor 配置正确 可以使用 上传使用的是百度的webuploader
基于springboot完整的实现了ueditor前后台的代码,只要你稍微了解一点ueditor就可以了,下来后直接导入开发工具中运行就行了
1、内含两个文件:①、UEditorDemo.rar ②、UEdtior的简单使用.doc;...5、最后一点是提示:如果要把UEditor使用在struts中,要重写web.xml中所有过滤.jsp或者.*的过滤器,不然上传图片和文件会失败。
前天我项目中要用到文本编辑,然后看大家都在使用ueditor ,就下载并配置了下,发现一些问题。如图片无法显示、图片上传后插入文本中无法显示、 在线管理中的图片无法显示等问题。发现网上的资料都不完整,现整理了...
真正解决百度编辑器UEditor上传图片跨域问题 真正解决百度编辑器UEditor上传图片跨域问题 真正解决百度编辑器UEditor上传图片跨域问题
前后端分离 解决ueditor上传图片时的跨域问题 自定义图片上传插件,文件服务器与富文本可以单独部署
Ueditor1.4.3 独立上传图片使用方法,自从Ueditor1升级后监听事件失效的解决办法
ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传
百度富文本框(Ueditor)自定义图片上传接口,并解决单图片上传的跨域问题,Ueditor官方说不支持跨域上传,我想说呵呵o(* ̄︶ ̄*)o
在html中放置编辑器,隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏.
百度Ueditor使用方法
百度ueditor上传图片超范围后有两个问题,一是编辑器里图片显示不完整,二是添加图片后的网页在显示时也会超出网页不好看。想让它自适应100%,网上的方案能解决第一个问题,基本没有第二个问题的方案,经过多次测试...
关于ueditor的基本配置、以及图片上传、文件上传的配置方法,附图
1、UEditor 百度富文本编辑器完整版 .Net实例 已解决上传图片问题。 2、内附完整demo实例,附带txt讲解说明及UEditor常见问题解决方案。 3、已经调试好的百度文本编辑器实例,用户体验不错,具备很多人性化的功能,...
使用UEditor上传单张或多张图片的简易接口,适合php开发者
百度控件ueditor图片上传到远程服务器解决方案 一、搭建ueditor环境 二、修改源码 三、重新编译源码 四、使用说明
基于SSM简单使用ueditor编辑框文本、图片上传功能,基础
ueditor包含使用方法
网上搜索后,发现有人也遇到此问题,并且对ueditor的源码进行编辑,实现了上传到项目外的指定目录下,但是不够灵活,只要使用了该jar包后,只能上传其他目录,本身到项目路径的又不支持了。我们项目的文件存放位置,...
editor(通用所有文本编辑器) struts2图片上传问题解决办法