UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

原生js的图片上传插件cupload

所属分类：输入-上传

 30524  234  查看评论 (61)
分享到微信朋友圈
X
原生js的图片上传插件cupload ie兼容12
 查看演示  website  立即下载

更新时间：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：

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

在需要的位置添加html：

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

实例化cupload对象：

<script type="text/javascript">
    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"],
    });
</script>

可选参数

为方便比较和计算,部分参数为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"], // 编辑模式下初始显示的图片路径,非必需,无默认值
}
相关插件-上传
查看更多

手机端实现多图片上传预览

 HTML+CSS+原生JS实现手机端实现多图片上传，选中图片后，可以点击放大（有一定的注释，在PC，ipad，IOS和安卓上都测试过）
  上传
 33488  313

图片预览上传插件bootstrap-fileinput.js

 bootstrapfileinput预览上传图片并使用FmData上传，上传url根据实际情况填写
  上传
 84526  493

zyupload四种不同的上传PHP版

 PHP支持拖拽和裁剪的一款上传插件：zyupload。在js里面可以自定义高度和宽度，类型，远程上传地址等。
  上传
 90942  400

jquery头像上传剪裁插件cropper

 cropper是一款使用简单且功能强大的图片剪裁jQuery插件
  上传
 116013  746

讨论这个项目（61）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?? 0
    2023/2/27 21:25:08
    大佬求助，我把这个放进SSM框架里为什么后台接收的数据是null啊qwq,就在div外加了个form和提交按钮，controller用request.getparameter和request.getParameterValues都获取不到数据😥 回复
    流星无名 1
    2022/3/25 18:08:56

    放在表单中，未上传图片，加一下data:判断，数组：[有图]，没图为空！
    Cupload 控件不错！
    js:       

    //未上传图片
var img = "{$edit.img}";
var imgFile = '';
if (img) {
    imgFile = [img];
}
//Cupload上传图片
var upload_img = new Cupload({
    ele: '#upload_img',
    name: "image",
    url: "{:url('admin/upload')}",
    data: imgFile
});
    回复
    OpenHair 0
    2021/7/28 16:08:55
    手机端不能上传(选中)多张图片啊 回复
    . 0
    2021/1/12 8:53:35
    base64怎么转普通图片 回复
    孙中原 0
    2020/11/8 22:50:41
    还有，为毛从服务器地址传到前端的图片，再次保存，服务器无法解码啊。。。 你这来回来去的地址格式能不能统一了啊
        孙中原0
        2020/11/8 23:00:22
        我var_dump看可以下传过去的POST， 我找到问题了， 你这个，从本机上传的图片，到服务器就加密， 我从服务器直接赋值给 data: 的图片路径， 我再保存，你是没有base64加密的。 太奇葩了
        研究员1
        2020/11/9 8:43:14
        第一次上传的图片是base64的，你可以通过图片上传的方法保存到本地。服务器本地图片上传是上传的路径，这样就避免一张图片上传两次的问题了。你可以通过正则匹配上传的数据，是否为data/image开头，从而使用不同的方法保存
        孙中原1
        2020/11/9 18:16:38
        谢谢解答，最后也是我自己嚼劲脑汁这么干的， 符合正则的解码保存，不符合正则的直接保存路径即可。 其实我想的是， 前端展示出来用户上传的图片后，用户删改以后，点保存修改， 我后台的算法，是先将用户先前储存的图片路径一次性清空。 然后再重新 into 图片路径。 等于现在比以前多了一个else{}。 还有一个问题，就是前端图片展示出来以后， 从后端展示出来的图片，小放大镜放到图片上是会显示服务器文件夹路径的，这样很不安全， 我建议干脆都弄成 base64加密好了。 最最主要的， 的ajax功能不行啊，您再看看，功能是好功能，但是我试了半天也不行。
        孙中原0
        2020/11/9 18:17:47
        DE!!LE!1TE!! 按钮不管用，请再仔细检查下代码
        研究员0
        2020/11/10 8:30:14
        你加我qq42279115 聊吧
    回复
    孙中原 0
    2020/11/8 22:16:16
    ajax 单删图片 也不行啊，什么玩意儿啊
        研究员1
        2020/11/9 8:45:06
        这个只提供了一个简单的方法，提供一个思路，你可以自己测试修改
    回复
    孙中原 0
    2020/11/8 20:41:58
    大哥， 您那个 data: []，[] 我想从数据库提取图片数组然后显示到页面上， 您这个php后台怎么写啊， while（）{
    里面怎么写，才能够从后端把图片显示出来
    }
    回复
    孙中原 0
    2020/11/5 23:40:29
    哥，我刚废了一天劲搞定了你老版本的图片上传问题，你就出更新了， 不过，你这个参数， 我把 宽高调整成180px, ie,edge和safari就都不显示预览图了。 兼容性再调整一下啊。 难道默认只能用 148px * 148px吗。 我把border取消，貌似也不能正常显示了。咋回事啊
        研究员0
        2020/11/6 16:04:12
        😥我一直用的谷歌浏览器，没这问题，其他浏览器没试过
    回复
    研究员 0
    2020/9/25 8:35:50
    删除的参数是Url,不知道为啥没显示
        研究员0
        2020/9/25 8:43:22
        dele😡te
    回复
    -爱别离 0
    2020/9/4 14:58:34
    请求 怎么获取图片呀
        研究员0
        2020/9/4 16:09:00
        详细说一下
        -爱别离0
        2020/9/4 16:43:09
        1. 比如我现在选择了几个图片 我现在要提交表单 怎么获取这个准备上传的图片
        2. 处了图片 怎么上传PDF等文件 同样提交的时候怎么获取
        研究员0
        2020/9/4 16:55:42
        请看更新说明-3，这个图片上传是和form表单同步上传的，没有添加异步上传，只要设置好name参数，后台可正常接收到base64字符串，base64转存图片可百度。

        没有考虑文件上传，估计跑不通
        -爱别离0
        2020/9/4 17:01:33
        cuploadCreate.imageArr 可以获取到base64 但是没有解决同一组图片多次上传问题
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复