50-(JQuery的Ajax)自定义修改input file选择文件按钮名

七色的天空

已于 2023-10-26 23:44:15 修改

阅读量347

点赞数

分类专栏： 05_JQuery 文章标签： jquery 前端 javascript ajax

于 2023-10-26 23:43:18 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/134063508

版权

05_JQuery 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>上传图片</title>
</head>
<style>
	input[type="file"] {
		display: none;
	}
</style>
<body>
	<img src="" id="image">

	<div>
		<!-- 用一个按钮间接触发type:file元素 -->
		<input type="button" value="自定义的按钮名" onclick="$('.upload-file').click();" />
		<!-- 如果type:file的值发生了改变,即files数组发生了改变或从无到有 -->
		<!-- 就触发input name:filename 的value值的改变 -->
		<input type="file" id="upload-file" name="file" accept="image/*" class="upload-file" onchange="$('input[name=\'fileName\']').val(this.files[0].name);">
		<input name="fileName" readonly />
	</div>

	<button id="save">保存</button>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>

	<script type="text/javascript">
		$(".upload-file").text = '自定义';
		// http://124.223.98.197:9098/api/file-service/upload 
		$("#save").click(() => {
			var uploadFile = document.querySelector('#upload-file');
			console.log(uploadFile.files)
			if (uploadFile.files.length === 1) {
				// 拿到上传的文件: uploadFile.files[0]
				var formData = new FormData();
				// FormData 对象的使用
				// 1.用一些键值对来模拟一系列的表单控件,也就是把form中所有的表单元素的name与value组装成一个 queryString
				// 2. 异步上传二进制文件
				// data: formData/ new FormData(('#fileForm')[0]) 这个参数值必须是一个dom对象,而非jQuery对象,通过FormData将文件转成二进制数据
				formData.append('file', uploadFile.files[0]);
				$.ajax({
					url: 'http://124.223.98.197:9098/api/file-service/upload',
					type: 'POST',
					contentType: false, // 必须 false, 告诉jQuery不要去设置Content-Type 请求头
					processData: false, // 必须的,告诉jQuery不要去处理发送的数据
					headers: {
						'token': 'aa8df434eca6eaa7500ffe5b5b5cf27c'
						// 'content-type': false,
						// processData: false
					},
					data: formData,
					success: (res) => {
						if (res.code === 0) {
							$("#image").attr('src', res.fileUrl);
						}
					}
				});
			} else {
				alert("文件上传不正确");
			}
		});
	</script>
</body>
</html>

上述运行结果：

<input type="file"> accept元素的accept属性用于指定允许用户选择的文件类型。你可以通过设置不同的值来限制用户只能选择特定类型的文件。

accept属性可以接受多种不同的值：

文件后缀名：你可以指定一个或多个文件后缀名，以点号 (.) 开头。例如，accept=".jpg, .png"只允许选择JPEG和PNG格式的文件。
MIME 类型：你可以指定一个或多个MIME类型，以/分隔。MIME类型是一种标识文件类型的方式，常见的包括image/jpeg（JPEG图像）、image/png（PNG图像）等。例如，accept= "image/jpeg, image/png"只允许选择JPEG和PNG格式的图像文件。
其他：除了文件后缀名和MIME类型之外，accept还支持其他一些值，如以下示例所示：
audio/*：音频文件
video/*：视频文件
image/*：图像文件
.doc, .docx, .application/msword, .application/vnd ,.openxmlformats-officedocument, .wordprocessingml, .document：支持Microsoft Word文档