网站内容管理系统 上传word(前端上传文件上传组件和界面风格样式的提交过程教程 )

　　网站内容管理系统 上传word(前端上传文件上传组件和界面风格样式的提交过程教程

)

　　本教程用于掌握前端上传文件的提交流程。开发者可以使用本教程的逻辑来开发各种文件上传组件和界面样式。

　　准备好工作了：

　　1、 开发者需要在cms的后台创建一个文件字段，例如在表单自定义字段中创建一个文件类型字段，我们将其命名为aa。

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

　　2、 在表单提交页面的表单正文中，做上传动作。示例代码如下：

 // 这里是html自带的表单上传

 // 这里是用于提交给cms的数据，存储的文件id号

上传文件 // 这是上传按钮

 // 这是显示上传信息的

    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);

    }

　　效果如下：