tp5-实现资料下载&后台文件上传DOX/PDF/DOCX

后台上传：

 后台代码：

   <dl>
        <label class="item-label" for="my-file-input">文件: </label>
        <a href="{$info.file_url}">{$info.file_name}</a>
        <input type="hidden" name="file_name" value="{$info.file_name}">
        <input type="hidden" name="file_url" value="{$info.file_url}">
        <input type="hidden" name="file_size" value="{$info.file_size}">
        <input type="file" id="my-file-input">
        
    </dl>

前台处理：

     <script>
        document.querySelector('#my-file-input').addEventListener('change', function (event) {
            var file = event.target.files[0];
            console.log(file);

            document.querySelector('[name="file_name"]').value = file.name;
            document.querySelector('[name="file_size"]').value = file.size;

            if (!document.querySelector("#title").value) {
                // '688566 xxx 2020-06-10  xxx.pdf'
                var arr = file.name.split(/[ .]+/).reverse();
                var date = arr[2];
                if (/\d{4}-\d{2}-\d{2}/.test(date)) {
                    document.querySelector("#title").value = arr[1];
                    document.querySelector("#publish_date").value = arr[2];
                }
            }

            var formdata = new FormData();
            formdata.append('file', file);
            fetch('/Admin/File/upload', {
                method: 'POST',
                body: formdata,
            }).then(function (r) {
                return r.json();
            }).then(function (j) {
                console.log(j);
                document.querySelector('[name="file_url"]').value = j.path;
            }).catch(function (error) {
                console.log(error);
                alert(error);
            })
        });
    </script>

数据表：

CREATE TABLE `o_product` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `file_name` text,
  `file_url` text,
  `file_size` int(11) DEFAULT NULL,
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='文件传输';

页面效果：

 点击按钮后出现效果：

 出现以上效果 必须引入 以下线上链接：

    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/2.7.0/umd/popper.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/tippy.js/6.2.7/tippy.umd.min.js"></script>

    <script>
        tippy('[data-tippy-content]', {});
    </script>