UMeditor控制多张图片上传顺序
多张图片上传的顺序,受到用户使用习惯、插件上传和插件插入页面顺序的影响。
估计是考虑到上传性能,官方没有提供UMeditor控制展示顺序的配置。在上传过程中,用户点击拖动的第一张图片,将作为文件数组中的第一张图片。上传过程中是按照文件的倒序进行的。由于网络和文件大小的原因,会造成各个文件上传所消耗的时间各不一样。从而服务器响应的时间有所不同。UMeditor插入图片的节点也会不同。
同时,我还发现,及时服务器顺序响应,UMeditor插入图片也不是按时间先后来的。
由此,为了达到控制顺序的效果。首先,需要用户在做批量上传的时候,点击第一张图片拖动到上传区域。其次,需要修改两处代码。
1. 取消文件的倒序上传方式,改为顺序上传;
2. 缓存上传结果,当完成上传的时候,一起插入到页面。
不足:其中一个文件存在异常时,不会插入已经上传的图片。
var me = this, orderLen, orderFileObject = [];
- var me = this, orderLen, orderFileObject = [];
- me.setOpt('pasteImageEnabled', true);
- me.setOpt('dropFileEnabled', true);
- var sendAndInsertImage = function (file, editor) {
- //模拟数据
- var fd = new FormData();
- fd.append(editor.options.imageFieldName || 'upfile', file, file.name || ('blob.' + file.type.substr('image/'.length)));
- fd.append('type', 'ajax');
- var xhr = new XMLHttpRequest();
- xhr.open("post", me.options.imageUrl, true);
- xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
- xhr.addEventListener('load', function (e) {
- try {
- var json = eval('('+e.target.response+')'),
- link = json.url,
- picLink = me.options.imagePath + link;
- // editor.execCommand('insertimage', {
- // src: picLink,
- // _src: picLink
- // });
- // 缓存数据
- orderFileObject.push(
- {
- src: picLink,
- _src: picLink
- }
- );
- // 当上传完毕时,插入图片
- if (orderFileObject.length === orderLen) {
- editor.execCommand('insertimage', orderFileObject);
- }
- } catch (er) {
- }
- });
- xhr.send(fd);
- };
- if (window.FormData && window.FileReader) {
- var autoUploadHandler = function (e) {
- var hasImg = false,
- items;
- //获取粘贴板文件列表或者拖放文件列表
- items = e.type == 'paste' ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent);
- if (items) {
- var len = items.length, i = 0,
- file;
- // 初始化数据
- orderLen = len;
- orderFileObject = [];
- while (i < len) {
- file = items[i++];
- if (file.getAsFile) file = file.getAsFile();
- if (file && file.size > 0 && /image\/\w+/i.test(file.type)) {
- sendAndInsertImage(file, me);
- hasImg = true;
- }
- }
- if (hasImg) return false;
- }
- };
UMeditor控制多张图片上传顺序的更多相关文章
- ASP.NET 5探险(3):使用UMEditor并实现图片上传
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天将继续上一篇来讲解百度富文本Web编辑器UEditor或UMEditor的使用. ...
- 微信小程序多张图片上传
微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
- H5单张、多张图片上传
前言 今天我们聊一聊图片上传,单张Or多张 ,如今,各大图片上传插件数不胜数,例如:Jquery的 verupload.js,jQuery File Upload.Uploadify.jQuery.f ...
- nodejs-使用multer实现多张图片上传,express搭建脚手架
nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...
- JavaScript实现多张图片上传功能
今天闲着没事,把之前的多张图片上传代码整理了下. 页面主要代码: <div class="upBox upBox2"> <div class="d1&q ...
- 用原生JS实现多张图片上传及预览功能(兼容IE8)
最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...
- 微信小程序:多张图片上传
最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...
- 基于HTML5的多张图片上传
图片上传之前也有写过demo,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下 HTML结构: 1 2 3 4 <div class="container&qu ...
随机推荐
- BZOJ2339[HNOI2011]卡农——递推+组合数
题目链接: [HNOI2011]卡农 题目要求从$S=\{1,2,3……n\}$中选出$m$个子集满足以下三个条件: 1.不能选空集 2.不能选相同的两个子集 3.每种元素出现次数必须为偶数次 我们考 ...
- Golang 介绍与安装
1.介绍与安装 Golang 是什么 Go 亦称为 Golang(按照 Rob Pike 说法,语言叫做 Go,Golang 只是官方网站的网址),是由谷歌开发的一个开源的编译型的静态语言. Gola ...
- os与sys模块
os 1.os.pardir #获取当前目录的父目录字符串名:('..') 2.os.mkdir('dirname') #创建单级目录:相当于shell中mkdir dirname 3.os.make ...
- 题解:LOJ540游戏
题目描述 小L计划进行n场游戏,每场游戏使用一张地图,小 L 会同时使用三辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 A.B.C 表示.地图是一张无向简单图(没有重边或自环),每次 ...
- PEP8 - Python编码规范
PEP8 - Python编码规范 PEP8 规范 官方文档:https://www.python.org/dev/peps/pep-0008/ PEP8 规范 中文翻译:http://www.cnb ...
- Java 8 特性 —— 默认方法和静态方法
Java 8 新增了接口的默认方法.简单说,默认方法就是接口可以有实现方法,而且不需要实现类去实现其方法.我们只需在方法名前面加个 default 关键字即可实现默认方法. 为什么要有这个特性?之前的 ...
- CF 1145 (愚人节比赛)
D题 题目就是让你找出题面中拼错的单词,拼错的字母组合成一句话就是正确的题面. two plus xor of third and min elements #include<bits/stdc ...
- python 内置函数详解
懒得写了 参考1:https://www.cnblogs.com/xiao1/p/5856890.html 参考2:https://www.runoob.com/python/python-buil ...
- netty的简单的应用例子
一.简单的聊天室程序 public class ChatClient { public static void main(String[] args) throws InterruptedExcept ...
- Mysql 根据一个表数据更新另外一个表
方法一: update 更新表 set 字段 = (select 参考数据 from 参考表 where 参考表.id = 更新表.id); update table_2 m set m.colum ...