layui之上傳檔案 和 富文本框

本文包括的内容有：

• layui自帶的上傳檔案
• • 上傳檔案所使用的jar包以及js
  • 上傳的html
  • 立即上傳
  • 延遲上傳
• layui自帶的富文本框
• • 富文本框所需要的js 以及 加密内容所需要的jar包和js
  • 前台加密 以及 富文本框
  • 背景解密

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.csdn.net/qq_41099935/article/details/96316966)