Takitooru 发表于 2019-2-28 17:22

一款jquery上传插件带预览可拖拽,支持中文显示。

插件名称是ssi-uploader

github:https://github.com/ssbeefeater/ssi-uploader

演示图Demo:链接: https://pan.baidu.com/s/1QK2BrXB8xGZMU_j5rSHyXw 提取码: 6eu4



<!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>

nnpig 发表于 2019-2-28 17:41

没有上传的后台用不了啊,纯支持。

xiaomingtt 发表于 2019-2-28 19:08

不错,正好需要。不过要是不用jquery,纯JS实现就好了
页: [1]
查看完整版本: 一款jquery上传插件带预览可拖拽,支持中文显示。