如何: HTML / jQuery -文件上载(图像)预览名称+文件
回答:
HTML / jQuery 文件上传预览名称+文件的功能可以通过以下步骤实现:
<input type="file">
标签来实现。可以添加一个 <input type="text">
标签用于显示文件名。<form id="uploadForm">
<input type="file" id="fileInput">
<input type="text" id="fileNameInput" readonly>
<button type="submit">上传</button>
</form>
$('#fileInput').change(function() {
var fileName = $(this).val().split('\\').pop();
$('#fileNameInput').val(fileName);
});
$('#uploadForm').submit(function(e) {
e.preventDefault();
var formData = new FormData();
formData.append('file', $('#fileInput')[0].files[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 文件上传成功的处理逻辑
},
error: function(xhr, status, error) {
// 文件上传失败的处理逻辑
}
});
});
这是一个简单的 HTML / jQuery 文件上传预览名称+文件的实现方法。根据具体的需求,可以进一步扩展和优化。在腾讯云的云计算服务中,可以使用 COS(对象存储)来存储上传的文件,具体可以参考腾讯云 COS 的文档和产品介绍。
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云