使用FormBuilder上传文件时如何自定义按钮的文字

Question

使用FormBuilder上传文件时如何自定义按钮的文字：
代码：

<div class="form-group" id="is_planning-box" style="display: none;">
        <label class="control-label col-xs-12 col-sm-2">是否涉及planning:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpicker('row[is_planning]', [1=>'是', 2=>'否'], $row.is_planning, ['title' => '请选择', 'id'=>'c-is_planning'])}
            {:Form::uploads('row[planning_image]', $row.planning_image, ['readonly' => true, 'autocomplete' => 'off'], [], false)}
        </div>
</div>

页面展示：

Answer 1

引自免费微信小程序：皆我百晓生

要自定义FormBuilder上传文件按钮的文字，您可以使用HTML和JavaScript结合<button>标签来实现。以下是修改后的代码示例：

HTML部分：

<form enctype="multipart/form-data" action="{{ route('uploadFile') }}" method="POST">
    @csrf

    <div class="form-group">
        <label for="file-input">选择文件:</label>
        <input type="file" name="file" id="file-input" accept=".xlsx">
    </div>

    <button type="submit">提交文件</button>
</form>

JS部分（注意：这里省略了验证逻辑）：

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    const fileInput = document.getElementById('file-input');
    if (fileInput.files.length === 0) {
        alert('请至少选择一个文件！');
        return;
    }
    // 假设您的服务器处理上传文件的方法
    fetch('/your-server-api/upload', {
        method: 'POST',
        body: new FormData(form),
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
});

在上述代码中，我们首先创建了一个表单元素，并设置了其enctype属性为multipart/form-data，以便支持文件上传。

然后，我们在表单中的<button>标签上添加了type="submit"属性，以便触发表单的提交操作。

接着，在表单的onsubmit事件处理器中，我们获取到文件输入框的值，并检查它是否为空。如果为空，则弹出警告提示并返回。

之后，我们通过fetch API向服务器发送POST请求，其中包含表单数据和必要的HTTP头信息（例如Content-Type）。在实际应用中，您可能需要根据实际情况调整这个API地址。

如果您需要更详细的解释，包括服务器端处理文件上传的具体步骤以及如何处理错误情况，请告诉我。