要让按钮显示文件/图像的值,可以使用JavaScript来实现。下面是一种常见的实现方式:
<button id="uploadButton">上传文件</button>
<input type="text" id="fileValue" readonly>
var uploadButton = document.getElementById("uploadButton");
var fileValue = document.getElementById("fileValue");
uploadButton.addEventListener("click", function() {
// 打开文件选择对话框
var fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.accept = "image/*"; // 只接受图像文件
fileInput.addEventListener("change", function(event) {
// 获取选择的文件
var file = event.target.files[0];
// 显示文件名或图像预览
fileValue.value = file.name; // 显示文件名
// 如果要显示图像预览,可以使用以下代码
// var reader = new FileReader();
// reader.onload = function(e) {
// fileValue.src = e.target.result;
// };
// reader.readAsDataURL(file);
});
fileInput.click();
});
以上代码实现了以下功能:
fileValue
元素的类型改为<img>
。这是一个简单的示例,你可以根据具体需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云