插件名称是ssi-uploader
github:https://github.com/ssbeefeater/ssi-uploader
演示图Demo:链接: https://pan.baidu.com/s/1QK2BrXB8xGZMU_j5rSHyXw 提取码: 6eu4
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带预览可拖拽文件上传代码</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/ssi-uploader.css"/>
</head>
<body>
<div class="zzsc-container">
<div class="container">
<h3>注意:因为演示中没有后台上传程序的支持,点击上传按钮时会返回错误信息!</h3>
<div class="row">
<div class="col-md-12">
<h3>基本演示(支持jpg、gif、txt、png和pdf格式文件)</h3>
<input type="file" multiple id="ssi-upload"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>无预览图效果:</h3>
<input type="file" multiple id="ssi-upload2"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>不带拖放区域:</h3>
<input type="file" multiple id="ssi-upload3"/>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/ssi-uploader.js"></script>
<script type="text/javascript">
$('#ssi-upload').ssi_uploader({url:'#',maxFileSize:6,locale:'zh_CN',allowed:['jpg','gif','txt','png','pdf']});
$('#ssi-upload2').ssi_uploader({url:'#',preview:false,locale:'zh_CN',allowed:['jpg','gif','txt','png','pdf']});
$('#ssi-upload3').ssi_uploader({url:'#',dropZone:false,locale:'zh_CN',allowed:['jpg','gif','txt','png','pdf']});
</script>
</body>
</html>
|