首页
商城

享当家物联网智慧消防预警系统

真物联网系统,IOT通讯技术，源码交付，独立部署，NB硬件。智慧消防源码系统，独家出品！

0件已售 68,000.00

抖音营销引流神器（八爪鱼）安卓手机可用，VIP年卡

扫码下载安装“八爪鱼”软件

1件已售 198.00

违禁词数据文本（非常全面）

这次分享的偏向更多的涉政字词，文本信息中含涉政人物、政治事件、宗教、反动分裂，以及恐怖主义等违规信息，希望对做站的朋友有帮助。把关键词导入到火车头或者其他采集软件中进行过滤，节省内容审核成本，提高效率

2件已售 1.00

采集规则，某民百科全站数据采集规则【数据10w+】

一个比较优质的综合百科类数据采集，可以做问答类型，数据有10w+，供大家学习参考。

1件已售 8.00

小魔推-抖音爆店码/爆客码，扫码自动转发视频

魔推是一款短视频智能生成工具，可将素材库中的视频自动拼接成多条不重复的短视频，在用户参与扫码后就可以自定义实现发布，从而在短视频平台上进行传播。它可以适用于餐饮、茶饮、美妆、酒店、娱乐、景区、教育培训

0件已售 249.00
源码系统
建站助手
- 建站软件
- 建站教程
福利资源
技术教程
- 视频教程
  - 抖音微信
  - 其他教程
- SEO教程
- Pbootcms
- dedecms
- 易优CMS
- 迅睿CMS
- discuz
- 帝国CMS
网友分享
- 网站源码
- 实用软件
开通VIP

当前位置：技术教程 > 迅睿CMS > 迅睿CMS-开发文档-前端自定义上传文件方式

迅睿CMS-开发文档-前端自定义上传文件方式

时间：2023-08-14 09:51 浏览：0 评论：0

本教程用于掌握前端上传文件的提交过程，开发者可以利用本教程的逻辑，开发出各种形式的文件上传组件和界面风格样式。

准备工作：

1、开发者需要在cms后台创建文件字段，例如在表单自定义字段里面去新建一个File类型的字段，名字我们随便命名为aa

${xunruicms_img_title}$

记住这个文件字段的名称是：aa，id是：418.

2、在表单提交页面的form体内部，去做上传的动作，示例代码如下：

<script src="{THEME_PATH}assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<input id="file" type="file" name="file"/> // 这里是html自带的表单上传
<input id="dr_file" type="hidden" value="" name="data[aa]"/> // 这里是用于提交给cms的数据，存储的文件id号
<button type="button" onclick=UpladFile()">上传文件</button> // 这是上传按钮
<button type="button" onclick=UpladFile_jquery()">JQ方式上传</button> // 这是上传按钮
<label id="show_file"></label> // 这是显示上传信息的

<script type="text/javascript">

function UpladFile() {
        $('#show_file').html('正在上传...');
        var fileObj = document.getElementById('file').files[0]; // 获取文件对象
        var FileController = "/index.php?s=api&c=file&token={dr_get_csrf_token()}&m=upload&fid=418";
        // 接收上传文件的后台地址，418是上面的字段id号
        var form = new FormData();
        form.append("author", "xunruicms");  // 可以增加表单数据
        form.append("file_data", fileObj); // 文件对象
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
            var json = JSON.parse(xhr.responseText);
            if (json.code) {
                alert('上传成功');
                $('#dr_file').val(json.id); // 把上传成功的文件id赋值给表单控件
                $('#show_file').html('上传成功：'+json.info.url); // 返回文件的url
            } else {
                alert('上传失败：'+json.msg);
                $('#show_file').html('上传失败：'+json.msg);
            }
            console.log(json);
        }
        xhr.send(form);
    }

// jquery方式的函数
function UpladFile_jquery() {
        $('#show_file').html('正在上传...');
        var fileObj = document.getElementById('file').files[0]; // 获取文件对象
        var FileController = "/index.php?s=api&c=file&token={dr_get_csrf_token()}&m=upload&fid=418";
        // 接收上传文件的后台地址，418是上面的字段id号
        var form = new FormData();
        form.append("author", "xunruicms");  // 可以增加表单数据
        form.append("file_data", fileObj); // 文件对象

var FileController = "/index.php?s=api&c=file&token={dr_get_csrf_token()}&m=upload&fid=91";
        // 接收上传文件的后台地址，418是上面的字段id号
         $.ajax({
            url:FileController,
            type: "POST",//方法类型
            cache : false,//
            processData: false,
            contentType: false,
            dataType:"json",
            data: form,
            success: function(data){
                if (json.code) {
                        alert('上传成功');
                        $('#dr_file').val(json.id); // 把上传成功的文件id赋值给表单控件
                        $('#show_file').html('上传成功：'+json.info.url); // 返回文件的url
                    } else {
                        alert('上传失败：'+json.msg);
                        $('#show_file').html('上传失败：'+json.msg);
                    }
                    console.log(json);
            },error:function(){
                alert("请求失败!");
            }
        });
    }
</script>

效果如下：

${xunruicms_img_title}$

CMS前端自定义上传文件方式上传文件文件上传控件前端上传 PHP开源cms系统迅睿CMS系统

1. 本站所有资源来源于用户上传或网络，仅作为参考研究使用，如有侵权请邮件联系站长！
2. 本站积分货币获取途径以及用途的解读，想在本站混的好，请务必认真阅读！
3. 本站强烈打击盗版/破解等有损他人权益和违法作为，请各位会员支持正版！
4. 迅睿CMS > 迅睿CMS-开发文档-前端自定义上传文件方式

收藏（0）打赏（0）生成海报

ailiulangzhe Array

分享到：

选择大于努力，思路决定出路，观念决定命运，梦想照亮人生！

目前为止共有 8884 位优秀的站长加入！

会员
特惠