我上一个版本用的是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实现带有进度条的多文件上传功能,并结合百度的WebUploader与ueditor编辑器进行配置,以提供用户友好的上传体验。 首先,我们来了解Java在文件上传中的角色。Java作为一个后端开发语言,...
此外,开发者还尝试了其他方法,比如注释掉请求头的设置和进度更新的代码,恢复使用原始的WebUploader上传代码,结果发现异步上传也能成功,且进度更新功能仍然有效。 总的来说,解决UEditor上传图片跨域问题的关键...
在单独使用ueditor上传图片时,需要考虑安全问题,如防止非法上传和过大文件导致服务器压力。可以通过限制文件类型、大小,以及使用服务器端验证来实现安全控制。 7. **优化与性能**: 为了提高用户体验,可以...
【标题】"ueditor上传图片配置"涉及到的是在SpringBoot框架下集成并配置ueditor,以便实现用户在编辑器中上传图片的功能。ueditor是一款流行的富文本编辑器,它提供了丰富的在线编辑功能,包括文字编辑、图片上传、...
**Ueditor 图片上传与回显配置详解** Ueditor 是一款功能强大的富文本编辑器,广泛应用于各种内容管理系统中。在使用 Ueditor 进行文本编辑时,图片上传、回显以及在线管理功能是非常关键的。本文将详细介绍如何...
如果上述方法仍然无法解决问题,那么可能是由于Ueditor编辑器本身的版本问题导致的。这时,可以尝试更换Ueditor编辑器版本来解决问题。 1. **备份现有文件**:在替换之前,请先备份现有的ueditor文件夹和相关jar包...
以上就是解决Vue使用UEditor上传图片服务配置问题的基本步骤。记得在实际应用中,根据项目需求调整配置,并确保后端接口能够正确处理图片上传请求。通过Vue-UEditor组件,你可以在Vue项目中轻松集成并定制UEditor,...
1、内含两个文件:①、UEditorDemo.rar ②、UEdtior的简单使用.doc;...5、最后一点是提示:如果要把UEditor使用在struts中,要重写web.xml中所有过滤.jsp或者.*的过滤器,不然上传图片和文件会失败。
本篇文章将深入探讨如何解决ueditor上传图片时的跨域问题以及如何自定义图片上传插件。 首先,我们要理解什么是跨域(CORS)。跨域是指一个域下的文档或脚本尝试请求另一个域下的资源时,如果两个域不相同,则...
Spring+Vue整合UEditor富文本实现图片附件上传的方法 Spring+Vue整合UEditor富文本实现图片附件上传的方法是指将UEditor富文本编辑器集成到Spring和Vue项目中,以实现图片附件上传的功能。下面将详细介绍这个方法...
Ueditor1.4.3 独立上传图片使用方法,自从Ueditor1升级后监听事件失效的解决办法
三、UEditor的问题解决 在使用UEditor的过程中,可能会遇到一些问题。例如,在web-INF文件下的lib文件中,可能会存在jar包的重复导入。这时,需要删除重复导入的jar包,保留高版本的jar包。否则,可能会导致项目...
在使用富文本编辑器ueditor与Struts2框架结合进行图片上传时,常常会遇到一些问题,这些问题可能涉及文件过滤、文件类型限制、文件大小控制、上传路径设置等多个方面。以下是一些解决这些问题的关键知识点: 1. **...
在"使用UEditor上传单张或多张图片的简易接口.rar"这个压缩包中,提供了PHP开发者的相关接口,使得用户能够方便地实现通过UEditor在网页上上传图片。 首先,`index.php`是主入口文件,通常包含了UEditor的初始化...
ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传ueditor跨域图片上传
本文将详细介绍如何自定义Ueditor的图片上传接口以及解决单图片上传的跨域问题。 首先,理解什么是跨域。在浏览器的安全策略中,同一源策略规定,一个网页上的脚本只能访问与该网页同源(协议、域名、端口都相同)...
在使用UEditor这款强大的富文本编辑器时,可能会遇到上传图片时报错“未找到上传数据”的问题。这个错误通常是因为服务器端的配置不正确或与客户端的交互存在误解导致的。UEditor是一款由百度开发的JavaScript富文本...
解压缩后,将其放入项目的适当目录,例如在 `/resources/ueditor` 目录下。 2. **引入所需文件**:确保引入了ueditor所需的CSS和JavaScript文件,并注意调整它们在项目中的路径,以便浏览器能够正确加载。 3. **...
1. **百度UEditor使用日志.doc**:这份文档可能记录了UEditor在实际使用过程中的操作步骤、遇到的问题、解决方法以及优化建议,对于理解UEditor的工作原理和调试问题有极大帮助。 2. **ueditor1_4_3-utf8-jsp.zip**...