cupload's Introduction

cupload

基于原生js的图片上传插件

支持多图上传、选择预览、数量限制、像素限制、大小限制、图片删除、放大预览、图片排序、异步上传、编辑初始化图片

下载使用

下载：

git clone https://github.com/cuuuuuirz/cupload.git

使用：

引入js：

<script src="static/js/cupload.js"></script>

在需要的位置添加html：

<div id="cupload"></div>

实例化cupload对象：

<script type="text/javascript">
	var cupload = new Cupload ({
		ele: "#cupload"
	});
</script>

可选参数

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

{
	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"],   // 编辑模式下初始显示的图片路径,非必需,无默认值
}

cupload's People

Stargazers

Watchers

cupload's Issues

请问怎么支持图片批量删除

您好，我现在有个需求：
一个选择框，选了是的时候显示图片上传框
当选了否的时候，需要把已经选上的图片一次性清除掉
请问这个插件可以实现嘛？
如果可以实现的话，怎么实现呢
先谢谢您~

对于编辑初始化时显示的图片，在删除时最好能提供url异步删除系统中保存的图片信息

for (j = 0; j < this.uploadInput.files.length; j++) { var file = this.uploadInput.files[j] if (!file || this.limitedSize(file)) { this.createUploadBox() return false } var reader = new FileReader() var _this = this reader.filename = file.name; reader.onload = function (e) { _this.limitedWidthAndHeight(e.target.result, e.target.filename) } reader.readAsDataURL(file); }
用 reader.filename=file.name作为临时变量存储，然后再reader.onload里用e.target.filename读取。就可以了。

Recommend Projects