迅睿cms在线留言表单如何能够上传文件

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

准备工作：

1、开发者需要在cms后台创建文件字段，例如在表单自定义字段里面去新建一个File类型的字段，例如客户需要的字段是word

记住这个文件字段的名称是：word，id是：50

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[word]"/> // 这里是用于提交给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=50";
        // 接收上传文件的后台地址，50是上面的字段id号
        var form = new FormData();
        form.append("author", "模板巴巴");  // 可以增加表单数据
        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=50";
        // 接收上传文件的后台地址，50是上面的字段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=50";
        // 接收上传文件的后台地址，50是上面的字段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>

效果如下： //提示：上面示例只是针对文件上传，其他字段和留言表单字段功能相同，可自行配置。也可配合AI实现更多功能，如搞不定，可付费让模板巴巴技术人员来处理。

代码示例：

迅睿后台表单系统导入数据：

{"id":"1","name":"在线投稿","table":"tougao","setting":{"web":"1","post_add":["1"],"seo":{"title":"{title}{join}{formname}{join}{SITE_NAME}","keywords":"","description":""},"icon":"","dev":"0","rt_text":"","rt_text2":"","rt_url":"","is_hide_search_bar":"0","list_field":{"author":{"use":"1","name":"作者","width":"","func":""},"email":{"use":"1","name":"联系邮箱","width":"","func":""},"title":{"use":"1","name":"主题","width":"0","func":"title"},"tel":{"use":"1","name":"联系电话","width":"","func":""},"qikan":{"use":"1","name":"投稿期刊","width":"","func":""},"zishu":{"use":"1","name":"论文字数","width":"","func":""},"word":{"use":"1","name":"文档上传","width":"","func":""},"uid":{"name":"账号","width":"100","func":"uid"},"inputtime":{"use":"1","name":"录入时间","width":"160","func":"datetime"},"id":{"name":"Id","width":"","func":""},"inputip":{"use":"1","name":"客户端IP","width":"","func":""},"displayorder":{"name":"排列值","width":"","func":""}},"notice":{"is_send":"0","username":""},"notice_type":"0","notice_mail":""},"field":[{"id":"46","name":"投稿期刊","fieldname":"qikan","fieldtype":"Text","relatedid":"1","relatedname":"form-1","isedit":"0","ismain":"1","issystem":"0","ismember":"1","issearch":"0","disabled":"0","setting":"{\"option\":{\"fieldtype\":\"\",\"fieldlength\":\"\",\"value\":\"\",\"width\":\"\",\"css\":\"\"},\"validate\":{\"xss\":\"1\",\"required\":\"1\",\"pattern\":\"\",\"errortips\":\"\",\"check\":\"\",\"filter\":\"\",\"tips\":\"\",\"formattr\":\"\"},\"is_right\":\"0\"}","displayorder":"1"},{"id":"45","name":"作者","fieldname":"author","fieldtype":"Text","relatedid":"1","relatedname":"form-1","isedit":"1","ismain":"1","issystem":"1","ismember":"1","issearch":"1","disabled":"0","setting":"{\"is_right\":1,\"option\":{\"width\":200,\"fieldtype\":\"VARCHAR\",\"fieldlength\":\"255\"},\"validate\":{\"xss\":1}}","displayorder":"2"},{"id":"47","name":"联系邮箱","fieldname":"email","fieldtype":"Text","relatedid":"1","relatedname":"form-1","isedit":"0","ismain":"1","issystem":"0","ismember":"1","issearch":"0","disabled":"0","setting":"{\"option\":{\"fieldtype\":\"\",\"fieldlength\":\"\",\"value\":\"\",\"width\":\"\",\"css\":\"\"},\"validate\":{\"xss\":\"1\",\"required\":\"1\",\"pattern\":\"\",\"errortips\":\"\",\"check\":\"\",\"filter\":\"\",\"tips\":\"\",\"formattr\":\"\"},\"is_right\":\"0\"}","displayorder":"3"},{"id":"48","name":"联系电话","fieldname":"tel","fieldtype":"Text","relatedid":"1","relatedname":"form-1","isedit":"0","ismain":"1","issystem":"0","ismember":"1","issearch":"0","disabled":"0","setting":"{\"option\":{\"fieldtype\":\"\",\"fieldlength\":\"\",\"value\":\"\",\"width\":\"\",\"css\":\"\"},\"validate\":{\"xss\":\"1\",\"required\":\"1\",\"pattern\":\"\",\"errortips\":\"\",\"check\":\"\",\"filter\":\"\",\"tips\":\"\",\"formattr\":\"\"},\"is_right\":\"0\"}","displayorder":"4"},{"id":"44","name":"论文标题","fieldname":"title","fieldtype":"Text","relatedid":"1","relatedname":"form-1","isedit":"1","ismain":"1","issystem":"1","ismember":"1","issearch":"0","disabled":"0","setting":"{\"option\":{\"fieldtype\":\"VARCHAR\",\"fieldlength\":\"255\",\"value\":\"\",\"width\":\"300\",\"css\":\"\"},\"validate\":{\"xss\":\"1\",\"required\":\"1\",\"pattern\":\"\",\"errortips\":\"\",\"check\":\"\",\"filter\":\"\",\"tips\":\"\",\"formattr\":\"\"},\"is_right\":\"0\"}","displayorder":"5"},{"id":"49","name":"论文字数","fieldname":"zishu","fieldtype":"Text","relatedid":"1","relatedname":"form-1","isedit":"0","ismain":"1","issystem":"0","ismember":"1","issearch":"0","disabled":"0","setting":"{\"option\":{\"fieldtype\":\"\",\"fieldlength\":\"\",\"value\":\"\",\"width\":\"\",\"css\":\"\"},\"validate\":{\"xss\":\"1\",\"required\":\"1\",\"pattern\":\"\",\"errortips\":\"\",\"check\":\"\",\"filter\":\"\",\"tips\":\"\",\"formattr\":\"\"},\"is_right\":\"0\"}","displayorder":"6"},{"id":"50","name":"文档上传","fieldname":"word","fieldtype":"File","relatedid":"1","relatedname":"form-1","isedit":"0","ismain":"1","issystem":"0","ismember":"1","issearch":"0","disabled":"0","setting":"{\"option\":{\"fieldtype\":\"\",\"fieldlength\":\"\",\"input\":\"1\",\"ext\":\"docx,doc,pdf\",\"size\":\"5\",\"attachment\":\"0\",\"image_reduce\":\"\",\"is_ext_tips\":\"0\",\"css\":\"\"},\"validate\":{\"xss\":\"1\",\"required\":\"1\",\"pattern\":\"\",\"errortips\":\"\",\"check\":\"\",\"filter\":\"\",\"tips\":\"\",\"formattr\":\"\"},\"is_right\":\"0\"}","displayorder":"7"}],"sql":"DROP TABLE IF EXISTS `{table}`;\nCREATE TABLE IF NOT EXISTS `{table}` (\n  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,\n  `uid` int(10) unsigned DEFAULT '0' COMMENT '录入者uid',\n  `author` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '录入者账号',\n  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '主题',\n  `inputip` varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '录入者ip',\n  `inputtime` int(10) unsigned NOT NULL COMMENT '录入时间',\n  `status` tinyint(1) DEFAULT NULL COMMENT '状态值',\n  `displayorder` int(10) NOT NULL DEFAULT '0' COMMENT '排序值',\n  `tableid` smallint(5) unsigned NOT NULL COMMENT '附表id',\n  `qikan` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '投稿期刊',\n  `email` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '联系邮箱',\n  `tel` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '联系电话',\n  `zishu` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '论文字数',\n  `word` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '文档上传',\n  PRIMARY KEY (`id`),\n  KEY `uid` (`uid`),\n  KEY `status` (`status`),\n  KEY `inputtime` (`inputtime`),\n  KEY `displayorder` (`displayorder`)\n) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='在线投稿表单表';\nDROP TABLE IF EXISTS `{table}_data_0`;\nCREATE TABLE IF NOT EXISTS `{table}_data_0` (\n  `id` int(10) unsigned NOT NULL,\n  `uid` int(10) unsigned DEFAULT '0' COMMENT '录入者uid',\n  UNIQUE KEY `id` (`id`),\n  KEY `uid` (`uid`)\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='在线投稿表单附表';\n"}

前端示例代码，自行研究

    <style>
      
        /* 右侧投稿表单区域 */
        .form-right {
            flex: 1;
            padding: 20px 30px;
            min-width: 0; /* 解决flex子元素内容溢出不换行bug */
        }
        .form-right h2 {
            font-size: 24px;
            margin-bottom: 24px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .form-item {
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap:12px;
        }
        .form-item label {
            width: 110px;
            min-width:110px;
            font-size: 16px;
        }
        .form-item input[type="text"],
        .form-item input[type="email"] {
            flex: 1;
            height: 42px;
            padding: 0 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 15px;
            min-width: 0;
        }
        .star {
            color: #f00;
        }
        .upload-box {
            display: flex;
            align-items: center;
            gap:12px;
        }
        .file-btn {
            border:1px solid #4096ff;
            color:#4096ff;
            padding:8px 28px;
            border-radius:20px;
            cursor:pointer;
            white-space: nowrap;
        }
        .tip-text {
            margin:6px 0 16px 122px;
            font-size:14px;
            color:#666;
            line-height:1.6;
        }
        .submit-btn {
            margin-left: 122px;
            background: #3488e8;
            color:#fff;
            border:none;
            width:220px;
            height:46px;
            font-size:17px;
            border-radius:4px;
            cursor:pointer;
        }

        /*===== 自适应断点优化 先处理小电脑窗口，再处理手机 =====*/
        /* 窄屏电脑窗口：左右布局保留，缩小内边距 */
        @media (max-width:992px) and (min-width:769px) {
            .form-right {
                padding: 16px 20px;
            }

            .form-item label {
                width: 100px;
                min-width:100px;
            }
            .tip-text {
                margin-left:112px;
            }
            .submit-btn {
                margin-left:112px;
            }
        }

        /* 移动端768px以下：上下布局 */
        @media (max-width:768px) {

            .form-right {
                padding:16px;
            }
            .form-item {
                flex-direction: column;
                align-items: flex-start;
                gap:6px;
            }
            .form-item label {
                width:100%;
                min-width:unset;
            }
            .form-item input {
                width:100%;
            }
            .tip-text {
                margin-left:0;
            }
            .submit-btn {
                margin-left:0;
                width:100%;
            }
        }
        
        
        .custom-file-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #2563eb;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}
.custom-file-btn:hover {
    background: #1d4ed8;
}
    </style>

    <div class="container-wrap">
        <!-- 右侧表单 -->
        <div class="form-right">
                <script type="text/javascript">var is_mobile_cms = '{IS_MOBILE}';</script>
    <script src="{LANG_PATH}lang.js" type="text/javascript"></script>
    <script src="{THEME_PATH}assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="{THEME_PATH}assets/js/cms.js" type="text/javascript"></script>
{php extract(dr_get_form_post_value('tougao'))}
<form action="{$post_url}&is_show_msg=1"  method="post" name="myform" id="myform">
    
    <h2>在线投稿</h2>
    <div class="form-item">
        <label><span class="star">*</span>投稿期刊:</label>
        <input type="text" placeholder="请填写投稿期刊" name="data[qikan]">
    </div>
    
    <div class="form-item">
        <label><span class="star">*</span>作者:</label>
        <input type="text" name="data[author]" placeholder="请填写作者">
    </div>
    <div class="form-item">
        <label><span class="star">*</span>邮箱:</label>
        <input type="email" name="data[email]" placeholder="请填写邮箱">
    </div>
    <div class="form-item">
        <label><span class="star">*</span>联系电话:</label>
        <input type="text" name="data[tel]" placeholder="请填写真实联系方式">
    </div>
    <div class="form-item">
        <label><span class="star">*</span>论文标题:</label>
        <input type="text"  name="data[title]" placeholder="请填写论文标题">
    </div>
    <div class="form-item">
        <label><span class="star">*</span>论文字数:</label>
        <input type="text" placeholder="不计空格字符数 5000起发"  name="data[zishu]">
    </div>
    <div class="form-item">
        <label><span class="star">*</span>文档上传:</label>
        <div class="upload-box">
            <!-- 自定义上传按钮样式，隐藏原生文件input -->
            <label class="custom-file-btn">
               上传
                <input id="file" type="file" name="file" onchange="UpladFile()" style="display:none"/>
            </label>
            <input id="dr_file" type="hidden" value="" name="data[word]"/>
            <div id="show_file" style="margin-top:8px;"></div>
        </div>
    </div>
    <div class="tip-text">
        (格式：pdf,doc,docx5M以内，字符：5000字符以上)
    </div>
    <button class="submit-btn">提交</button>
    
</form>


<script type="text/javascript">
function UpladFile() {
    var fileObj = document.getElementById('file').files[0];
    if (!fileObj) {
        return false;
    }
    $('#show_file').html('正在上传...');
    var FileController = "/index.php?s=api&c=file&token={dr_get_csrf_token()}&m=upload&fid=50";
    var form = new FormData();
    form.append("author", "模板巴巴");
    form.append("file_data", fileObj);
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.onload = function () {
        try{
            var json = JSON.parse(xhr.responseText);
            if (json.code) {
                $('#dr_file').val(json.id);
                $('#show_file').html('<span style="color:green">✅ 文件已就绪</span>');
                alert("文件上传成功！");
            } else {
                $('#show_file').html('<span style="color:red">❌ 上传失败：'+json.msg+'</span>');
            }
        }catch(e){
            $('#show_file').html('<span style="color:red">❌ 服务器返回异常</span>');
        }
        console.log(json);
    }
    xhr.onerror = function(){
        $('#show_file').html('<span style="color:red">❌ 网络错误，上传失败</span>');
    }
    xhr.send(form);
}
</script>


        </div>
    </div>

阅读全文

常见问题

购买网站模板包含哪些内容？你们可以提供哪些建站服务？

购买模板交付完整商用源码，附赠图文安装教程，享有模板基础功能免费咨询。同时我们可提供一站式建站增值服务：代安装部署、页面个性化修改、功能二次开发、服务器环境调试、域名解析指导、站点维护等，以上增值服务均单独收费，可按需选购。

零基础不懂代码，买到模板能直接上线网站吗？

模板源码完整，自备域名与服务器即可搭建。您可参照教程自行部署；如果不想动手，可选择我们付费代搭建服务，技术人员全程操作，直接交付可访问成品网站。

模板支持根据我的行业需求做改版定制吗？

支持个性化定制！可进行 LOGO 替换、配色调整、栏目增减、页面重构、新增功能开发等。所有修改定制属于增值服务，根据需求评估报价，单独收费，有需求可发送方案咨询客服。

模板购买之后售后保障如何？服务器、备案相关问题可以协助处理吗？

购买模板永久提供基础功能咨询；服务器故障、网站长期维护、协助备案、环境配置等均为付费增值服务。我们提供全套建站配套技术支持，一站式解决建站上下游难题，不用多方找人对接。

模板购买后不想要了，可以申请退款吗？

模板属于数字化源码产品，文件一经发出、下载获取后，不支持无理由退款。若是我方原因出现源码缺失、文件损坏且无法修复，经核实后可协商处理；下单前可联系客服预览演示站点，确认功能、样式再购买，避免不必要纠纷。

原文链接：https://www.mubanbaba.com/307.html，转载请注明出处。

仿站开发 · 模板改版 · 网站运维

评论0

在线客服

升级VIP

繁简切换

返回顶部

站点提示