<link rel="stylesheet" type="text/css" href="/res/webupload/css/webuploader.css"/> <script type="text/javascript" src="/res/webupload/js/webuploader.js"></script>
<li class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis"></i> <div class="layui-timeline-content layui-text"> <h3 class="layui-timeline-title">上传数据</h3> <div class="time-line-box"> <p>上传csv类型文件</p> <p>可通过wps、office等程序,将excel文件另存为csv文件。</p> <div id="picker"><i class="layui-icon" style="margin-right: 5px"></i>选择文件</div> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="progress progress-striped " id="pros1" style="background-color: #888;display: none"> <div class="progress-bar" role="progressbar" style="width: 0%;background-color: #009688;height: 10px"> </div> </div> </div> </div> </li> <li class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis"></i> <div class="layui-timeline-content layui-text"> <h3 class="layui-timeline-title">保存数据</h3> <div class="time-line-box"> <div class="progress progress-striped " id="pros2" style="background-color: #888;display: none"> <div class="progress-bar" role="progressbar" style="width: 0%;background-color: #009688;height: 10px"> </div> </div> </div> </div> </li>
var uploader = WebUploader.create({ // swf文件路径 swf: '/webupload/js/Uploader.swf', // 文件接收服务端。(设置文件上传目录) server: '/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker', // 开起分片上传。 chunked: true, sendAsBinary: true, accept: { title: '仅支持CSV文件', extensions: 'csv', }, auto: true, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false }); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { var $list = $('#thelist'); $list.append('<div id="' + file.id + '" class="item">' + '<h4 class="info">' + '文件名称: ' + file.name + '</h4>' + '<p class="state">上传状态: 等待上传...</p>' + '</div>'); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { $('#pros1').show(); console.log(parseInt(percentage * 100) + '%'); var pros = parseInt(percentage * 100) + '%'; $('#pros1').find('.progress-bar').css('width', pros); var $li = $('#' + file.id); $li.find('p.state').text('上传中...'); }); uploader.on('uploadSuccess', function (file, response) { $('#' + file.id).find('p.state').text('上传成功'); console.log(response); $.post("{:url('Daoru/import_csv')}", { name: response.name}, function (res) { }); var pros_time = setInterval(function () { $.post("{:url('Daoru/get_cur')}", { name: response.name}, function (res) { $('#pros2').show(); var pros = parseInt(res.msg) + '%'; $('#pros2').find('.progress-bar').css('width', pros); console.log(res.msg); if (res.code == 1 && res.msg == 100) { clearInterval(pros_time); } }); }, 1000); }); uploader.on('uploadError', function (file) { $('#' + file.id).find('p.state').text('上传出错'); }); uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); });
<?php /** * Created by PhpStorm. * User: admin * Date: 2018/4/18 * Time: 15:52 */ namespace app\admin\controller; //防止可能出现的乱码 setlocale(LC_ALL, 'zh_CN'); set_time_limit(0); ini_set("memory_limit", "-1"); use think\Db; use think\Exception; /** * 导入测试 * HYF * Class Daoru * @package app\admin\controller */ class Daoru extends Common { /** * 初始化 * HYF * Home constructor. */ public function __construct() { parent