网站首页 > 开源技术 正文
在程序开发中，难免遇到有多图上传的需求，如果自己写吧，是可以完成的，但可能会影响项目的进度，也可能没那么完美，今天给大家介绍一个实用的多文件上传插件webuploader，可以实现多图上传、大文件分片上传等。
现看看效果图吧：
demo可以去我的百度网盘下载，链接：https://pan.baidu.com/s/1i5IR7oh 密码：5rlh
实现过程是非常简单的，按照以下代码即可完成：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery多张图片批量上传插件</title>
<script src="./js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="./css/webuploader.css">
<link rel="stylesheet" type="text/css" href="./css/diyUpload.css">
<script type="text/javascript" src="./js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="./js/diyUpload.js"></script>
</head>
<style>
*{ margin:0; padding:0;}
#box{ margin:50px auto; width:540px; background:#FF9}
#demo{ margin:50px auto; width:540px; background:#CF9}
</style>
<body>
<div id="box">
<div id="test" ></div>
</div>
<div id="demo">
<div id="as" ></div>
</div>
</body>
<script type="text/javascript">
/*
* 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
* 其他参数同WebUploader
*/
$('#test').diyUpload({
url:'./fileupload.php',
success:function( data ) {
console.info( data );
},
error:function( err ) {
console.info( err );
}
});
$('#as').diyUpload({
url:'./fileupload.php',
success:function( data ) {
console.info( data );
},
error:function( err ) {
console.info( err );
},
buttonText : '选择文件',
chunked:true,
// 分片大小
chunkSize:512 * 1024,
//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}
});
</script>
</html>
猜你喜欢
- 2024-10-20 项目实训及课程设计指导——Web表示层典型功能实现的应用实例
- 2024-10-20 前端开发中常用的JS插件大集合（前端插件是什么意思）
- 2024-10-20 JavaScript—异步提交表单的6种方式
- 2024-10-20 公司员工工作日志办公系统+vue（员工工作日志模板）
- 2024-10-20 springboot:实现文件上传下载实时进度条功能【附带源码】
- 2024-10-20 Web开发者必备，有点酷的文件上传库!——Bootstrap-Fileinput
- 2024-10-20 图片MD5秒传、分片上传和断点续传
- 2024-10-20 一文看懂Ajax，学习前端开发的同学不可错过
- 2024-10-20 Spring Boot实现大文件的分片上传功能?
- 2024-10-20 Solarwinds Serv-U中的XSS漏洞(CVE-2021-32604)
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论，来添加一个吧(●'◡'●)