cupload怎么保存图片_原生js的图片上传插件cupload

30f0397fca834102eab8a71d07d50d09.png

5b4b944461607cc871b1911f9854541f.png

插件描述:支持图片预览、像素限制、大小限制、多图上传、更新模式下页面初始化加载图片

更新时间:2020-09-25 00:23:49

更新说明:添加  删除时,同时删除服务器图片的功能,文档提供php实例。添加参数Url参数更新 {

ele: "#cupload", // 实例化的DOM对象,必需

name: "image", // 图片input的name名,非必需,默认为image

num: 1, // 可上传图片的数量,非必需,默认为1

url: "./upload.php", // 异步上传url,非必需,无默认值

deleteUrl: "./delete.php", // 删除url,删除时同时删除服务器图片,不写不删,非必需,无默认值

width: 148, // 预览框的宽,单位为px,非必需,默认为148

height: 148, // 预览框的高,单位为px,非必需,默认为148

minSize: 1024, // 图片大小最小限制,单位为KB,非必需,无默认值

maxSize: 2048, // 图片大小最大限制,单位为KB,非必需,无默认值

limitedSize: 2048, // 图片大小要求,单位为KB,非必需,无默认值

minWidth: 100, // 图片宽度最小限制,单位为px,非必需,无默认值

minHeight: 100, // 图片高度最小限制,单位为px,非必需,无默认值

maxWidth: 2000, // 图片宽度最大限制,单位为px,非必需,无默认值

maxHeight: 2000, // 图片高度最大限制,单位为px,非必需,无默认值

limitedWidth: 800, // 图片宽度要求,单位为px,非必需,无默认值

limitedHeight: 800, // 图片高度要求,单位为px,非必需,无默认值

data: ["1.png", "2.jpg"], // 编辑模式下初始显示的图片路径,非必需,无默认值

}

更新时间:2020/9/8 下午3:56:56

更新说明:

1. 优化部分细节

2. 添加了Form表单提交的示例(需要在php环境下运行)

3. 新增图片排序功能

更新时间:2020-09-05 17:11:02

更新说明:

1. 添加多图选择,可同时选择多张图片添加到html

2. 添加异步上传,新增url参数,用户添加图片后,可立即上传图片到url接口,并将接口返回的路径显示在html上。文档提供php实例

参数更新:{

ele: "#cupload", // 实例化的DOM对象id,必需

name: "image", // 图片input的name名,非必需,默认为image

num: 1, // 可上传图片的数量,非必需,默认为1

url: './upload.php' //异步上传接口,非必需,无默认值。请保证接口的正确性

width: 148, // 预览框的宽,单位为px,非必需,默认为148

height: 148, // 预览框的高,单位为px,非必需,默认为148

minSize: 1024, // 图片大小最小限制,单位为KB,非必需,无默认值

maxSize: 2048, // 图片大小最大限制,单位为KB,非必需,无默认值

limitedSize: 2048, // 图片大小要求,单位为KB,非必需,无默认值

minWidth: 100, // 图片宽度最小限制,单位为px,非必需,无默认值

minHeight: 100, // 图片高度最小限制,单位为px,非必需,无默认值

maxWidth: 2000, // 图片宽度最大限制,单位为px,非必需,无默认值

maxHeight: 2000, // 图片高度最大限制,单位为px,非必需,无默认值

limitedWidth: 800, // 图片宽度要求,单位为px,非必需,无默认值

limitedHeight: 800, // 图片高度要求,单位为px,非必需,无默认值

data: ["1.png", "2.jpg"], // 编辑模式下初始显示的图片路径,非必需,无默认值

}

更新时间:2020-08-31 22:07:23

更新说明:

1. 修复部分bug

2. 添加放大预览功能

3. 介绍:该方法将图片转为base64格式存到了input中,用户只要使用普通form表单直接提交即可,其中 name参数可以设置提交的input的name值,后台接收form表单的参数后,该图片数据格式为数组,只要循环将base64数据转为图片存到本地即可。

更新时间:2020-01-11 00:24:17

使用方法

引入js:

在需要的位置添加html:

实例化cupload对象:

var cuploadCreate = new Cupload({

ele: '#cupload-create',

num: 3,

});

var cuploadUpdate = new Cupload({

ele: '#cupload-update',

num: 3,

data: ["static/image/1.png", "static/image/2.png", "static/image/3.png"],

});

可选参数

为方便比较和计算,部分参数为number型,已设置默认单位,不可再带单位。{

ele: "#cupload", // 实例化的DOM对象id,必需,默认为cupload

name: "image", // 图片input的name名,非必需,默认为image

num: 1, // 可上传图片的数量,非必需,默认为1

width: 148, // 预览框的宽,单位为px,非必需,默认为148

height: 148, // 预览框的高,单位为px,非必需,默认为148

minSize: 1024, // 图片大小最小限制,单位为KB,非必需,无默认值

maxSize: 2048, // 图片大小最大限制,单位为KB,非必需,无默认值

limitedSize: 2048, // 图片大小要求,单位为KB,非必需,无默认值

minWidth: 100, // 图片宽度最小限制,单位为px,非必需,无默认值

minHeight: 100, // 图片高度最小限制,单位为px,非必需,无默认值

maxWidth: 2000, // 图片宽度最大限制,单位为px,非必需,无默认值

maxHeight: 2000, // 图片高度最大限制,单位为px,非必需,无默认值

limitedWidth: 800, // 图片宽度要求,单位为px,非必需,无默认值

limitedHeight: 800, // 图片高度要求,单位为px,非必需,无默认值

data: ["1.png", "2.jpg"], // 编辑模式下初始显示的图片路径,非必需,无默认值

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql 半同步_mysql 主从同步 与 半同步

mysql主从同步复制定义主从同步使得数据可以从一个数据库服务器复制到其他服务器上,在复制数据时,一个服务器充当主服务器(master),其余的服务器充当从服务器(slave)。通过配置文件,可以指定复制所有的数据库,某个数据…

mysql内存数据库性能_Mysql内存表配置及性能测试

centos7 mysql数据库安装和配可以参考一下文章,基本照做就可以了(我选的方法二):http://www.cnblogs.com/starof/p/4680083.html说到内存表,首先有两个概念简单区分下:1.临时表;2.内存表;临时表与内存表的区…

mysql字符集排序规则_MySQL原理 - 字符集与排序规则

任何计算机存储数据,都需要字符集,因为计算机存储的数据其实都是二进制编码,将一个个字符,映射到对应的二进制编码的这个映射就是字符编码(字符集)。这些字符如何排序呢?决定字符排序的规则就是排序规则。查看内置字符…

mysql服务器默认操作字符集,如何在mysql中找到默认服务器字符集?

Using MySQL on FreeBSD 8.2. How do I find out the default server character set? Is there some command I can run or file I can check?UPDATEActually I want to know how to find both the default server character set and the current server character set.解决方…

mysql异常修复_MySQL错误修复:Table xx is marked as crashed and last (automatic?) repair failed...

问题一 Table xx is marked as crashed and last (automatic?) repair failed有开发找到我,说数据库坏了,连不上数据库,看了下 MySQL 的错误日志,报错如下:Error: Table ./db_name/table_name is marked as crashed a…

mysql 改变表的类型吗_mysql中修改表类型所带来的问题探讨

对于MySQL数据库,如果你要使用事务以及行级锁就必须使用INNODB引擎。如果你要使用全文索引,那必须使用myisam,那如何修改修改MySQL的引擎为INNODB呢,下面介绍一个修改方法。对于MySQL数据库,如果你要使用事务以及行级锁就必须使用…

mysql 字符串 截取字母_MySQL字符串函数:字符串截取

MySQL 字符串截取函数:left(), right(), substring(), substring_index()。还有 mid(), substr()。其中,mid(), substr() 等价于 substring() 函数,substring() 的功能非常强大和灵活。1. 字符串截取:left(str, length)mysql> …

建立学生选课表 mysql 语句_学生选课数据库SQL语句45道练习题整理及mysql常用函数(20161019)...

学生选课数据库SQL语句45道练习题:一、 设有一数据库,包括四个表:学生表(Student)、课程表(Course)、成绩表(Score)以及教师信息表(Teacher)。四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表(一)~表(四)…

java mysql jsp分页代码_JAVA/JSP学习系列之六(MySQL翻页例子)

JAVA/JSP学习系列之六(MySQL翻页例子)更新时间:2006年10月13日 00:00:00 作者:一、运行前准备下载了mysql的jdbc驱动(一个jar文件)并加载在CLASSPATH(方法见《JAVA/JSP学习系列之一(JDK安装) 》)(如果找不到,请从本站下载)建一个MySQL数据库…

mysql内置含糊_mySQL入门04 内置函数

【欢迎关注,点赞,收藏,私信交流】字符串函数查看字符的ascii码值ascii(str),str是空串时返回0select ascii(a);查看ascii码值对应的字符char(数字)select char(97);拼接字符串concat(str1,str2...)select concat(12,34,ab);包含字…

mysql与citespace_CiteSpace与MySQL数据库的连接-科学网—博客.PDF

CiteSpace与MySQL数据库的连接-科学网—博客.PDFCiteSpace与MySQL数据库的连接1,2 3李杰 ,陈超美1.上海海事大学海洋科学与工程学院2.上海海事大学科技情报研究所3. Drexel University- College of Computing and InformaticsCiteSpace科技文本挖掘及可视化知识分享…

gcn代码pytorch_GCN的简单实现(pytorch)

import torch import torch.nn as nn import torch.nn.functional as Fimport networkx as nxdef normalize(A , symmetricTrue):# A AIA A torch.eye(A.size(0))# 所有节点的度d A.sum(1)if symmetric:#D D^-1/2D torch.diag(torch.pow(d , -0.5))return D.mm(A).mm(D)e…

mysql的check语言_check在SQL语句中的意思是什么?

展开全部在SQL中 CHECK 的意思:约束CHECK 约束用于限制列中的值的范围。如果对单个列定义 CHECK 约束,那么32313133353236313431303231363533e58685e5aeb931333365646261该列只允许特定的值。如果对一个表定义 CHECK 约束,那么此约束会在特定…

当电压放大电路的开路增益和输出电阻固定后_放大器的设计基础

放大器是电子电路(尤其是模拟电路)中的主要构件之一,使用放大器,它们会提高信号电平。放大器是一个术语,用于描述增加输入信号强度的电路。放大器广泛用于从音频应用到射频应用的各个领域中。但是,对于所有放大器,无论…

mysql数据库 auto_increment_mysql数据库 auto_increment

MySQL内核月报 2014.09-MySQL 捉虫动态auto_increment背景:Innodb引擎使用B_tree结构保存表数据,这样就需要一个唯一键表示每一行记录(比如二级索引记录引用)。Innodb表定义中处理主键的逻辑是:1.如果表定义了主键,就使用主键唯一…

javascript 嵌入python_通过Python将区块链数据嵌入Javascript,这是正确的方法吗?

你说得对。此页面是使用JavaScript异步填充的,因此BeautifulSoup和类似的工具将无法看到您试图获取的特定内容。但是,如果您记录浏览器的网络流量,您可以看到一些(XHR)httpget请求被发送到restapi,restapi以JSON形式提供其结果。这个JSON恰好包含您要查找的信息。它实际上会向不…

linux 嵌入式 快照_Linux 系统之Systemd

标签:子贡问为仁。子曰:“工欲善其事,必先利其器。居是邦也,事其大夫之贤者,友其士之仁者。”——孔子(春秋)《论语卫灵公》【工欲善其事,必先利其器】掌握一门技术,知道其发展历程是非常重要的…

mysql php 乱码问题_解决php与mysql中文乱码问题

感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编两巴掌来看看吧!MysqL对中文的支持程度还是很有限的,尤其是新手,但凡出现乱码问题,就会头大。乱码问题1:用PHPmyAdmin操作MysqL数据库汉字显示正常&…

mysql xdevapi_MySql Connector/C++8简介

MySql Connector/C8是一个用于连接MySQL服务器的C应用程序。Connector/C8可用于访问实现文档存储的 MySQL服务器,或者使用SQL查询以传统方式访问。它支持使用XDevAPI开发C 应用程序,或使用XDevAPI for C开发纯C应用程序,同时Connector/C8还支…

mysql随机选择记录表_Mysql表中取随机记录

RAND()是Mysql中的取随机数函数,该函数返回一个float型数值v,v的值为0 例如: mysql> SELECT RAND(); -> 0.9233482386203 mysql> SELECT RAND(20); -> 0.15888261251047 mysql> SELECT RAND(20); -> 0.15888261251047 mysq…