多张图片上传的顺序,受到用户使用习惯、插件上传和插件插入页面顺序的影响。

  估计是考虑到上传性能,官方没有提供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控制多张图片上传顺序的更多相关文章

  1. ASP.NET 5探险(3):使用UMEditor并实现图片上传

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天将继续上一篇来讲解百度富文本Web编辑器UEditor或UMEditor的使用. ...

  2. 微信小程序多张图片上传

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...

  3. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

  4. H5单张、多张图片上传

    前言 今天我们聊一聊图片上传,单张Or多张 ,如今,各大图片上传插件数不胜数,例如:Jquery的 verupload.js,jQuery File Upload.Uploadify.jQuery.f ...

  5. nodejs-使用multer实现多张图片上传,express搭建脚手架

    nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...

  6. JavaScript实现多张图片上传功能

    今天闲着没事,把之前的多张图片上传代码整理了下. 页面主要代码: <div class="upBox upBox2"> <div class="d1&q ...

  7. 用原生JS实现多张图片上传及预览功能(兼容IE8)

    最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...

  8. 微信小程序:多张图片上传

    最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...

  9. 基于HTML5的多张图片上传

    图片上传之前也有写过demo,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下 HTML结构: 1 2 3 4 <div class="container&qu ...

随机推荐

  1. [oracle]解决ora-01034 oracle not available

    一般都是数据库连接中断了,按照链接重连即可. https://jingyan.baidu.com/article/5552ef47c73eef518ffbc908.html

  2. LOJ 6281 数列分块入门 5

    简化版题意 给出一个长为n的数列,以及n个操作,操作涉及区间开方(每个数都向下取整),区间求和,保证所有数都为有符号32位正整数. N<=50000 Solution 首先我们先思考: 一个有符 ...

  3. [SHOI2007]善意的投票

    题目描述 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可以投和自己本来 ...

  4. Java复习总结——继承

    访问权限 Java中有三个访问权限修饰符:private.protected以及public,如果不加访问修饰符,表示包级可见. 可以对类或类中的成员(字段以及方法)加上访问修饰符. 类可见表示其他类 ...

  5. Alibaba Java开发手册索引规约学习笔记

    最近一段时间再看阿里巴巴 Java开发手册索引规约,写篇帖子总结一下,索引规约内容如下 为了通用,更为了避免造数据的痛苦,文中所涉及表.数据,均来自于MySQL官网提供的示例库employees,可通 ...

  6. python10--函数的来源,优点,定义,组成,使用(定义,调用)函数的分类,函数的返回值

    一.函数     # *****# 函数:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数# -- 现实中:很多问题要通过一些工具进行处理 => 可以将工具提前生产出 ...

  7. 什么是Annotation

    Annotation 被称为注解,在Java开发中是相当常见的,通过注解,我们可以简化代码提高开发效率.例如Override Annotation,这个应该算是在开发过程中使用最多的注解了.注解(An ...

  8. Linux中errno的含义

    /****************************获取错误代码描述**************/ #include <string.h>#include <errno.h&g ...

  9. 使用原生 python 造轮子搭建博客

    这篇用来 记录一个 从零开始的 博客搭建,希望坚持下去,因为python 开发效率令人发指,所以会原生从零写 ORM ,Web 框架 前提是打好 异步 io 的基础, 使用异步,有一点要谨记,一旦开始 ...

  10. 前端面试题整理—Webpack篇

    1.什么是webpack,与grunt和gulp有啥不同 webpack是一个模块打包工具,在webpack里面一切皆模块 通过loader转换文件,通过plugin注入钩子,最后输出有多个模块组合成 ...