搜索热点


Chapter10——H5中文件的处理

何轩伟 2023-12-18 318 12/18
  1. 知识点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部分解析:

  1. input元素:代码中使用了两个input元素,一个是文件输入(type="file"),用于选择文件;另一个是按钮(type="button"),用于触发文件选择操作。
  2. multiple属性:在文件输入元素中,使用了multiple属性,允许用户一次选择多个文件。
  3. span元素: 用于显示选中的文件列表。

CSS部分解析:

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

JavaScript部分解析:

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

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

实际运用:

Chapter10——H5中文件的处理

- THE END -
Tag:
最后修改:2023年12月18日
0

非特殊说明,本博所有文章均为博主原创。