实现前端文件上传

文件上传控件

HTML

<div class="form-group m-form__group row">
    <label class="col-lg-3 col-form-label"> 图片1 </label>
    <div class="col-lg-6">
        <div>
            <input id="image1" name="image1" type="text" class="form-control m-input" placeholder="图片1"/>
        </div>

        <div id="m-dropzone-one" class="m-dropzone dropzone" action="/upload">
            <div class="m-dropzone__msg dz-message needsclick">
                <h3 class="m-dropzone__msg-title">
                    拖拽文件到这里或点击上传
                </h3>
                <span class="m-dropzone__msg-desc">
                    仅支持图片
                </span>
            </div>
        </div>
    </div>
</div>

<div class="form-group m-form__group row">
    <label class="col-lg-3 col-form-label"> 图片2 </label>
    <div class="col-lg-6">
        <div>
            <input id="image2" name="image2" type="text" class="form-control m-input" placeholder="图片2"/>
        </div>

        <div id="m-dropzone-two" class="m-dropzone dropzone" action="/upload">
            <div class="m-dropzone__msg dz-message needsclick">
                <h3 class="m-dropzone__msg-title">
                    拖拽文件到这里或点击上传
                </h3>
                <span class="m-dropzone__msg-desc">
                    仅支持图片
                </span>
            </div>
        </div>
    </div>
</div>

<div class="form-group m-form__group row">
    <label class="col-lg-3 col-form-label"> 图片3 </label>
    <div class="col-lg-6">
        <div>
            <input id="image3" name="image3" type="text" class="form-control m-input" placeholder="图片3"/>
        </div>

        <div id="m-dropzone-three" class="m-dropzone dropzone" action="/upload">
            <div class="m-dropzone__msg dz-message needsclick">
                <h3 class="m-dropzone__msg-title">
                    拖拽文件到这里或点击上传
                </h3>
                <span class="m-dropzone__msg-desc">
                    仅支持图片
                </span>
            </div>
        </div>
    </div>
</div>

JS 调用

/**
 * 初始化上传组件
 */
function initDropzone() {
    // mDropzoneOne 为元素 ID
    Dropzone.options.mDropzoneOne = {
        // 后台文件上传参数名
        paramName: "uploadFile",
        // 最大上传文件数
        maxFiles: 1,
        // 最大上传文件尺寸（MB）
        maxFilesize: 10,
        // 增加删除链接
        addRemoveLinks: true,
        // 指定上传文件类型
        acceptedFiles: "image/*",
        // 文件类型验证处理
        accept: function (file, done) {
            if (file.name == "justinbieber.jpg") {
                done("Naha, you don't.");
            } else {
                done();
            }
        },
        // 文件上传成功处理
        success: function (file, imageInfo) {
            $("#image1").val(imageInfo.url);
        }
    };

    Dropzone.options.mDropzoneTwo = {
        // 后台文件上传参数名
        paramName: "uploadFile",
        // 最大上传文件数
        maxFiles: 1,
        // 最大上传文件尺寸（MB）
        maxFilesize: 10,
        // 增加删除链接
        addRemoveLinks: true,
        // 指定上传文件类型
        acceptedFiles: "image/*",
        // 文件类型验证处理
        accept: function (file, done) {
            if (file.name == "justinbieber.jpg") {
                done("Naha, you don't.");
            } else {
                done();
            }
        },
        // 文件上传成功处理
        success: function (file, imageInfo) {
            $("#image2").val(imageInfo.url);
        }
    };

    Dropzone.options.mDropzoneThree = {
        // 后台文件上传参数名
        paramName: "uploadFile",
        // 最大上传文件数
        maxFiles: 1,
        // 最大上传文件尺寸（MB）
        maxFilesize: 10,
        // 增加删除链接
        addRemoveLinks: true,
        // 指定上传文件类型
        acceptedFiles: "image/*",
        // 文件类型验证处理
        accept: function (file, done) {
            if (file.name == "justinbieber.jpg") {
                done("Naha, you don't.");
            } else {
                done();
            }
        },
        // 文件上传成功处理
        success: function (file, imageInfo) {
            $("#image3").val(imageInfo.url);
        }
    };
}

富文本控件

需要使用 wangEditor3 插件

HTML

<div class="form-group m-form__group row">
    <label class="col-lg-3 col-form-label"> 文章详情 </label>
    <div class="col-lg-6">
        <div id="articleDesc">
            <p>在此处输入内容</p>
        </div>
        <textarea id="articleDescText" name="articleDesc" style="width:100%; height:200px; display: none;"></textarea>
    </div>
</div>

JS 调用

/**
 * 初始化富文本控件
 */
function initEditor() {
    var editor = new window.wangEditor("#articleDesc");

    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/upload';

    // 后台文件上传参数名
    editor.customConfig.uploadFileName = 'wangEditorH5File';

    // 监控变化，同步更新到 textarea
    var articleDescText = $('#articleDescText');
    editor.customConfig.onchange = function (html) {
        articleDescText.val(html);
    };

    editor.create();

    // 初始化 textarea 的值
    // articleDescText.val(editor.txt.html());
}