layui之上传文件 和 富文本框

layui自带的上传文件

上传文件所使用的jar包以及js

<script type="text/javascript" src="../../layui.js"></script>

上传的html

页面组件以及对应的标签

	<div class="layui-form-item">
	    <div class="layui-inline" style="width: 50%;">
	          <label class="layui-form-label">其他附件</label>
	          <div class="layui-input-block">
	              <div class="layui-upload-drag" id="attachmentsUpload" style="padding: 20px 30px;"><i class="layui-icon"></i>
	                  <p>点击上传，或将附件拖拽到此处</p>
	                  <p>请将文件打成压缩包上传</p>
	              </div>
	              <span id="attachmentsUploadPre" style="color: #999;"></span>
	              <!--存放文件上传返回的文件id-->
	              <input type="hidden" name="fileId" id="fileId" value="">
	          </div>
	      </div>
	</div>

立即上传

选中文件并点击确认，即刻完成上传操作

	//上传附件
    upload.render({
 		// attachmentsUpload是上传组件的id
        elem: '#attachmentsUpload',
        url: 'url',
        accept: 'file', //允许上传的文件类型
        // acceptMime: 'file/zip,file/rar',
        choose: function (obj) {
            obj.preview(function (index, file, result) {
                $("#attachmentsUploadPre").html(file.name);
            });
        },
        done: function (res, index, upload) { //上传后的回调
            if (res.success) {
            	// 将上传返回的 id 信息赋值给 fileId 标签
                $('#fileId').val(res.data);
            } else {
                layer.msg(res.msg);
            }
        }
    });

延迟上传

当选中文件并点击确认时，文件并不会被上传至服务器；而是在点击了以 “updateAdd” 为id的按钮以后才将文件上传至服务器。

	//上传附件
    upload.render({
        elem: '#attachmentsUpload',
        url: 'url',
        accept: 'file', //允许上传的文件类型
        auto:false，// 关闭自动上传
        bindAction: '#updateAdd', // 点击该按钮以后上传文件
        // acceptMime: 'file/zip,file/rar',
        choose: function (obj) {
            obj.preview(function (index, file, result) {
                $("#attachmentsUploadPre").html(file.name);
            });
        },
        done: function (res, index, upload) { //上传后的回调
            if (res.success) {
                $('#fileId').val(res.data);
            } else {
                layer.msg(res.msg);
            }
        }
    });

layui自带的富文本框

富文本框所需要的js 以及 加密内容所需要的jar包和js

<script src="../../layui.js"></script>
<script type="text/javascript" src="../../common.js"></script>
<script type="text/javascript" src="../../base64.js"></script>

import cn.util.ParamBase64Utils;

前台加密 以及 富文本框

<textarea id="remark" name="remark" style="display: none;"></textarea>

<script type="text/javascript">
    var layedit, layer, form, $;
    layui.use(['laytpl', 'form', 'layer', 'layedit', 'ax'], function () {
        form = layui.form, layer = layui.layer, layedit = layui.layedit, ax=layer.ax;
        $ = layui.jquery;
        var $ax = layui.ax;
        var index=layedit.build('remark');
        
        //获取用户详情
        $.get('url', function (res) {
            if (res.success) {
                // 富文本框的内容设置
                layedit.setContent(index,res.data.remark,false);
                form.val('versionForm', res.data);
                form.render();
            }
        });
        
        //表单提交事件
        form.on('submit(btnSubmit)', function (data) {
            var yinLoading=layer.load();
            
            // 加密
            var b = new Base64();
            data.field.remark=b.encode(layedit.getContent(index));
            
            var ajax = new $ax('url', function (data) {
                layer.close(yinLoading);
                if (data.success) {
                    layer.msg("提交成功", {icon: 1, time: 1500}, function () {
                        location.reload();
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1500});
                }
            });
            ajax.set(data.field);
            ajax.start();
        });
    });
</script>

后台解密

remark = ParamBase64Utils.decode(remark);

Ps：感谢您的阅读，转载请标明出处(https://blog.youkuaiyun.com/qq_41099935/article/details/96316966)