Chapter10——H5中文件的处理

知识点1：图片拖动到浏览器

在HTML中，超链接图片通常会直接打开，但我们可以通过拖拽的方式将图片保存到浏览器中。这可以通过JavaScript的drag和drop事件来实现。

在代码段1中，我们选取了一个段落元素，并为它添加了dragstart、dragover和drop事件处理函数。当用户开始拖动该段落时，dragstart事件被触发；当用户将元素拖过浏览器窗口时，dragover事件被触发；当用户放下元素时，drop事件被触发。在drop事件处理函数中，我们获取了用户拖动的文件，并用FileReader读取了文件的内容。最后，我们将读取到的文件内容设置为img元素的src属性，从而在页面上显示图片。

代码段1：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
width: 400px;
height: 600px;
background: #EEEEEE;
margin: auto;
display: table;
}
#container > p {
display: table-cell;
}
#container > p > img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="container">
<p>段落1</p>
</div>
 
</body>
<script>
let p = document.querySelector("#container>p");
p.ondragstart = p.ondragover = event => {
event.preventDefault();
}
p.ondrop = event => {
event.preventDefault();
let file = event.dataTransfer.files[0];
if (!/image\/\w+/.test(file.type)) {
return;
}
let fr = new FileReader();
fr.readAsDataURL(file);
 
fr.onload = (event)=> {
p.innerHTML = "";
let img = document.createElement("img");
img.src = fr.result;
p.appendChild(img);
}
}
</script>
</html>

在这段代码中，我们通过监听拖拽事件，实现了将图片从浏览器拖动到指定的元素中。具体来说，我们使用了ondragstart、ondragover和ondrop事件。

Chapter10——H5中文件的处理

知识点2：使用download属性来下载可解析文件

在HTML中，浏览器通常会将可以直接解析的文件（如文本、图片等）直接展示出来，而不是提示用户下载。然而，如果你想让浏览器提示用户下载文件而不是直接展示，你可以使用download属性，download属性是H5中新增的属性，告诉浏览器该链接应该被视为下载而不是导航到链接的URL。

例如当你想下载而不是打开a.jpg图片


<a href="a.jpg" download>jpg</a>

加上该属性后，点击jpg超链接就会下载而不是直接打开图片。

知识点3：文件上传与显示文件的名称

代码段2：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=file]{
display: none;
}
</style>
</head>
<body>
<input type="file" multiple>
<input type="button" value="打开文件">
<span></span>
 
<script>
let file_btn=document.querySelector("input[type=file]");
file_btn.addEventListener("change",(event)=>{
btn_open.nextElementSibling.innerHTML="";
for(let i=0;i<event.target.files.length;i++){
btn_open.nextElementSibling.innerHTML+=event.target.files[i].name+"<br/>";
}
});
 
 
let btn_open=document.querySelector("input[type=button]");
 
btn_open.addEventListener("click",(event)=>{
let e=document.createEvent("MouseEvents");
// e.initEvent("click",true,true);
e.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
file_btn.dispatchEvent(e);
})
</script>
</body>
</html>

HTML部分解析：

input元素：代码中使用了两个input元素，一个是文件输入（type="file"），用于选择文件；另一个是按钮（type="button"），用于触发文件选择操作。
multiple属性：在文件输入元素中，使用了multiple属性，允许用户一次选择多个文件。
span元素: 用于显示选中的文件列表。

CSS部分解析：

display: none：通过CSS样式，将文件输入元素设置为不可见，即隐藏。

JavaScript部分解析：

addEventListener：使用addEventListener方法为input元素添加事件监听器，用于处理用户的选择和点击操作。
event对象：在事件处理函数中，通过event对象获取了事件的相关信息，如触发事件的元素、事件类型等。
files属性：通过target.files获取用户选择的文件列表。
createElement和innerHTML：使用createElement创建新的元素，并使用innerHTML设置元素的文本内容。
createEvent和dispatchEvent：使用createEvent方法创建新的鼠标事件，并使用dispatchEvent方法将事件派发到目标元素（submit）上，模拟用户的点击操作。

这段代码通过HTML、CSS和JavaScript的结合，实现了文件的上传和显示功能。通过隐藏文件输入元素，使用JavaScript模拟点击操作，实现了用户选择文件的功能。同时，通过事件监听和模拟DOM操作，将选中的文件名称显示在页面上。这个系统对于理解文件上传和事件处理机制具有一定的参考价值。

实际运用：

Chapter10——H5中文件的处理