点击input唤起Flmngr选文件后回填URL的代码定制方案

直接替换原有代码即可运行，实现点击text类型输入框唤起文件管理器、选中文件后自动将URL填入对应输入框的交互。

完整可运行代码 #

HTML部分 #

<h1 class="h5 mb-3">Flmngr文件管理器：点击输入框选择文件</h1>

<!-- 文件地址输入框，完全匹配你需要的调用格式 -->
<div style="margin: 20px 0; display: flex; align-items: center; gap: 10px;">
  <label>文件地址：</label>
  <input 
    type="text" 
    name="field_name" 
    id="field_name" 
    value="https://fm.n1ed.com/files/book.png" 
    onclick="BrowseServer('field_name');"
    style="width: 400px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;"
    readonly
  >
</div>

<div id="loading" style="font-size:12px; color:#666;">文件管理器加载中...</div>

<!-- 可选：选中文件预览区域 -->
<h2 class="h5 mt-5">选中文件预览</h2>
<div id="images" style="margin-top:10px;">
  暂未选择文件
</div>

<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/imgpen.js"></script>

CSS部分 #

body {
  padding: 20px;
  background-color: #F4F4F4;
  font-family: system-ui, -apple-system, sans-serif;
}

#images .image {
  border: 1px solid #DDD;
  box-shadow: 5px 5px 0 0 #DDD;
  background-color: white;
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  margin: 0 25px 25px 0;
}

#images .image img {
  max-height: 350px;
  border: 1px solid #DDD;
}

#images .image p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
  word-break: break-all;
}

JS部分 #

// 全局选文件方法，和输入框onclick调用逻辑对齐
let currentInputId = null;
function BrowseServer(inputId) {
  if (!window.flmngr) {
    alert("文件管理器尚未加载完成，请稍后再试");
    return;
  }
  currentInputId = inputId;
  openFlmngrPicker();
}

// Flmngr SDK加载完成回调
window.onFlmngrAndImgPenLoaded = function() {
  const elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);
}

// 唤起文件管理器
function openFlmngrPicker() {
  let flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files'
  });
  flmngr.pickFiles({
    isMultiple: false,
    // 如需支持所有文件类型，删除下方acceptExtensions配置即可
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
    onFinish: function(files) {
      fillValueAndPreview(files);
    }
  });
}

// 填充输入框+渲染预览
function fillValueAndPreview(files) {
  const selectedFile = files[0];
  // 填充URL到对应输入框
  if (currentInputId) {
    const targetInput = document.getElementById(currentInputId);
    if (targetInput) targetInput.value = selectedFile.url;
  }

  // 以下为预览区域渲染逻辑，不需要可直接删除
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";
  
  let elContainer = document.createElement("div");
  elContainer.className = "image";
  elImages.appendChild(elContainer);   

  let elImg = document.createElement("img");
  elImg.src = selectedFile.url;
  elImg.alt = "选中的文件";
  elContainer.appendChild(elImg);

  let elUrlText = document.createElement("p");
  elUrlText.textContent = selectedFile.url;
  elContainer.appendChild(elUrlText);
}

关键配置说明 #

• 输入框默认加了readonly属性禁止手动输入，需要支持手动修改直接删除该属性即可
• 支持多输入框复用：新增输入框时只需设置唯一ID，给onclick绑定BrowseServer('你的输入框ID')就能复用同一套选文件逻辑
• 默认仅支持选择图片格式，如需选择任意类型文件，删除pickFiles方法内的acceptExtensions配置即可
• 不需要文件预览功能的话，直接删除fillValueAndPreview函数中渲染预览区域的代码段即可

内容的提问来源于stack exchange，提问作者Marcelo