change事件
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>示例1：直接通过秘钥进行删除上传文件</h1>
<input type="file" name="upload_file" id="uploadFile" multiple />
<script src="{% static 'js/jquery-3.4.1.min.js' %} "> </script>
<script src="{% static 'js/cos-js-sdk-v5.min.js' %} "> </script>
<script>
var cos;
$(function () {
initCOS();
bindChangeFileInput();
});
function initCOS() {
cos = new COS({
SecretId: 'AKIDFPJSXQEk8PXVL3Tx5zf6MSL0Sf7Qoikg',
SecretKey: 'yiCWfZCXcQxJZlqncKvRu5DKHySg8sMp',
});
}
function bindChangeFileInput() {
$("#uploadFile").change(function () {
// 获取要上传的所有文件对象列表
var files = $(this)[0].files;
$.each(files, function (index, fileObject) {
var fileName = fileObject.name;
// 上传文件
cos.putObject({
Bucket: 'wangyang-1251317460', /* 必须 */
Region: 'ap-chengdu', /* 存储桶所在地域，必须字段 */
Key: fileName, /* 必须 */
StorageClass: 'STANDARD',
Body: fileObject, // 上传文件对象
onProgress: function (progressData) {
console.log("文件上传进度--->",fileName,JSON.stringify(progressData));
}
}, function (err, data) {
console.log(err || data);
});
})
})
}
</script>
</body>
</html>这个是怎么绑定的事情，有点晕。我记得以前的绑定，是有个onclick好像。
$(“#uploadFile”).change(function () 这是怎么绑定的。
在这段代码中，$("#uploadFile").change(function () {...}) 是通过 jQuery 来绑定事件的方式，具体来说，它是绑定了一个 change 事件处理函数到一个文件输入框（<input type="file">）上。
详细分析：
- jQuery的选择器：
$("#uploadFile")这个部分是一个 jQuery 选择器，用于选取页面上id="uploadFile"的元素，即文件输入框<input type="file" id="uploadFile" />。
change事件：change是一种 HTML事件，通常用于表单控件，当控件的值发生变化时触发。对于文件输入框（<input type="file">），当用户选择了文件后，change事件会被触发。- 例如，用户点击了文件输入框，选择了文件后，这时
change事件就会被触发。
- 事件绑定：
$("#uploadFile").change(function () {...})这一行代码的作用是 绑定 一个 事件处理函数（即function () {...}）到#uploadFile这个文件输入框的change事件上。- 当用户选择文件后，
change事件会被触发，从而调用绑定的回调函数。
- 回调函数：
function () {...}是事件触发后执行的函数。当文件输入框的内容发生变化时，回调函数会接收到当前选中的文件。- 代码中的
var files = $(this)[0].files;获取到用户选择的文件列表，接着通过$.each遍历每个文件并上传。
为什么不需要 onclick？
onclick 事件通常是用于处理鼠标点击事件的，例如按钮的点击。对于文件上传的场景，<input type="file"> 标签本身并没有 onclick 事件来处理文件选择。相反，<input type="file"> 元素会触发 change 事件，当用户选择文件后，触发的就是这个事件。因此，在这段代码中，使用 change 事件来处理文件的选择。
代码解释：
javascript复制代码$("#uploadFile").change(function () {
// 获取用户选择的文件列表
var files = $(this)[0].files;
$.each(files, function (index, fileObject) {
var fileName = fileObject.name; // 获取文件名
// 上传文件到 COS（腾讯云对象存储）
cos.putObject({
Bucket: 'wangyang-1251317460', // 存储桶
Region: 'ap-chengdu', // 区域
Key: fileName, // 文件名
StorageClass: 'STANDARD', // 存储类型
Body: fileObject, // 上传的文件对象
onProgress: function (progressData) { // 上传进度回调
console.log("文件上传进度--->", fileName, JSON.stringify(progressData));
}
}, function (err, data) {
console.log(err || data); // 上传结果
});
});
});
总结：
- 事件绑定：
$("#uploadFile").change(function () {...})使用了 jQuery 来为#uploadFile（文件输入框）绑定了change事件。当文件选择发生变化时，回调函数会被触发。 - 回调函数：回调函数处理的是文件选择后的逻辑，包括获取文件列表并上传文件。
- 与
onclick的区别：onclick是鼠标点击事件，而change事件是文件输入框特有的事件，在文件选择发生时触发。
通过这种方式，你不需要使用 onclick 处理文件选择，直接使用 change 事件更符合文件上传的需求。
