Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

zh-cn: Format /web/api using Prettier (part 5) #14679

Merged
merged 2 commits into from
Jul 29, 2023
Merged

zh-cn: Format /web/api using Prettier (part 5) #14679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c683744
zh-cn: Format /web/api using Prettier (part 5)
queengooborg Jul 28, 2023
9f073dc
add `-nolint` suffix to syntax code block
yin1999 Jul 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/file/type/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ var name = file.type;
## 示例

```html
<input type="file" multiple onchange="showType(this)">
<input type="file" multiple onchange="showType(this)" />
```

```js
Expand Down
24 changes: 14 additions & 10 deletions files/zh-cn/web/api/file/webkitrelativepath/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,20 @@ slug: Web/API/File/webkitRelativePath
### JavaScript

```js
document.getElementById("filepicker").addEventListener("change", function(event) {
let output = document.getElementById("listing");
let files = event.target.files;

for (let i=0; i<files.length; i++) {
let item = document.createElement("li");
item.innerHTML = files[i].webkitRelativePath;
output.appendChild(item);
};
}, false);
document.getElementById("filepicker").addEventListener(
"change",
function (event) {
let output = document.getElementById("listing");
let files = event.target.files;

for (let i = 0; i < files.length; i++) {
let item = document.createElement("li");
item.innerHTML = files[i].webkitRelativePath;
output.appendChild(item);
}
},
false,
);
```

### 结果
Expand Down
3 changes: 2 additions & 1 deletion files/zh-cn/web/api/file_and_directory_entries_api/firefox_support/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ slug: Web/API/File_and_Directory_Entries_API/Firefox_support
为了确保你的代码可以在 Chrome 和其他浏览器上运行，你可以包括如下代码：

```js
var FileSystemDirectoryEntry = window.FileSystemDirectoryEntry || window.DirectoryEntry;
var FileSystemDirectoryEntry =
window.FileSystemDirectoryEntry || window.DirectoryEntry;
var FileSystemEntry = window.FileSystemEntry || window.Entry;
```

Expand Down
32 changes: 16 additions & 16 deletions files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const numFiles = files.length;
下面的例子展示了 `size` 属性的一种可能用法：

```html
<!DOCTYPE html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
Expand Down Expand Up @@ -104,7 +104,7 @@ const numFiles = files.length;
];
const exponent = Math.min(
Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
units.length - 1
units.length - 1,
);
const approx = numberOfBytes / 1024 ** exponent;
const output =
Expand All @@ -117,7 +117,7 @@ const numFiles = files.length;
uploadInput.files.length;
document.getElementById("fileSize").textContent = output;
},
false
false,
);
</script>
</body>
Expand Down Expand Up @@ -153,7 +153,7 @@ fileSelect.addEventListener(
fileElem.click();
}
},
false
false,
);
```

Expand Down Expand Up @@ -308,7 +308,7 @@ URL.revokeObjectURL(objectURL);
</div>
```

这就建立了我们的文件 {{HTMLElement("input")}} 元素，以及调用文件选取器的链接（因为我们把文件 input 隐藏起来，以防止显示那个不那么吸引人的用户界面）。这在[使用 click() 方法隐藏文件 input 元素](#通过_click()_方法使用隐藏的_file_input_元素)一节中有所说明，调用文件选取器的方法也是如此。
这就建立了我们的文件 {{HTMLElement("input")}} 元素，以及调用文件选取器的链接（因为我们把文件 input 隐藏起来，以防止显示那个不那么吸引人的用户界面）。这在[使用 click() 方法隐藏文件 input 元素](<#通过_click()_方法使用隐藏的_file_input_元素>)一节中有所说明，调用文件选取器的方法也是如此。

`handleFiles()` 方法如下：

Expand All @@ -325,7 +325,7 @@ fileSelect.addEventListener(
}
e.preventDefault(); // 避免导航至“#”
},
false
false,
);

fileElem.addEventListener("change", handleFiles, false);
Expand Down Expand Up @@ -364,12 +364,12 @@ function handleFiles() {
2. 通过调用列表的 {{DOMxRef("Node.appendChild()")}} 方法来将新的列表元素插入到 {{HTMLElement("div")}} 块。
3. 遍历 `files` 代表的文件集合 {{DOMxRef("FileList")}} 中的每个 {{DOMxRef("File")}}：

1. 创建一个新的列表项（{{HTMLElement("li")}}）元素并插入到列表中。
2. 创建一个新的图片（{{HTMLElement("img")}}）元素。
3. 设置图片的源为一个新的指代文件的对象 URL，使用 {{DOMxRef("URL.createObjectURL()")}} 来创建 blob URL。
4. 设置图片的高度为 60 像素。
5. 设置图片的 load 事件处理器来释放对象 URL，当图片加载完成之后对象 URL 就不再需要了。这个可以通过调用 {{DOMxRef("URL.revokeObjectURL()")}} 方法并且传递 `img.src`中的对象 URL 字符串来实现。
6. 将新的列表项添加到列表中。
1. 创建一个新的列表项（{{HTMLElement("li")}}）元素并插入到列表中。
2. 创建一个新的图片（{{HTMLElement("img")}}）元素。
3. 设置图片的源为一个新的指代文件的对象 URL，使用 {{DOMxRef("URL.createObjectURL()")}} 来创建 blob URL。
4. 设置图片的高度为 60 像素。
5. 设置图片的 load 事件处理器来释放对象 URL，当图片加载完成之后对象 URL 就不再需要了。这个可以通过调用 {{DOMxRef("URL.revokeObjectURL()")}} 方法并且传递 `img.src`中的对象 URL 字符串来实现。
6. 将新的列表项添加到列表中。

这是上面代码的一个在线示例：

Expand Down Expand Up @@ -415,7 +415,7 @@ function FileUpload(img, file) {
self.ctrl.update(percentage);
}
},
false
false,
);

xhr.upload.addEventListener(
Expand All @@ -425,11 +425,11 @@ function FileUpload(img, file) {
const canvas = self.ctrl.ctx.canvas;
canvas.parentNode.removeChild(canvas);
},
false
false,
);
xhr.open(
"POST",
"http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"
"http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php",
);
xhr.overrideMimeType("text/plain; charset=x-user-defined-binary");
reader.onload = (evt) => {
Expand All @@ -453,7 +453,7 @@ function createThrobber(img) {
0,
0,
(throbberWidth * percent) / 100,
throbberHeight
throbberHeight,
);
if (percent === 100) {
throbber.ctx.fillStyle = "green";
Expand Down
66 changes: 30 additions & 36 deletions files/zh-cn/web/api/filelist/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ slug: Web/API/FileList
下面的一行代码演示如何获取到一个 FileList 对象中的第一个文件 ([`File`](/zh-CN/docs/Web/API/File) 对象):

```js
var file = document.getElementById('fileItem').files[0];
var file = document.getElementById("fileItem").files[0];
```

## 方法概述
Expand Down Expand Up @@ -70,53 +70,47 @@ var file;

// 遍历所有文件
for (var i = 0; i < files.length; i++) {

// 取得一个文件
file = files.item(i);
// 这样也行
file = files[i];
// 取得文件名
alert(file.name);
// 取得一个文件
file = files.item(i);
// 这样也行
file = files[i];
// 取得文件名
alert(file.name);
}
```

下面是一个更完整的例子。

```html
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- multiple 属性允许用户选择多个文件 -->

<input id="myfiles" multiple type="file">

</body>

<script>
var pullfiles=function(){
// love the query selector
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
// 获取所选文件数量
var fl = files.length;
var i = 0;
while ( i < fl) {
<head> </head>
<body>
<!-- multiple 属性允许用户选择多个文件 -->

<input id="myfiles" multiple type="file" />
</body>

<script>
var pullfiles = function () {
// love the query selector
var fileInput = document.querySelector("#myfiles");
var files = fileInput.files;
// 获取所选文件数量
var fl = files.length;
var i = 0;
while (i < fl) {
// localize file var in the loop
var file = files[i];
alert(file.name);
i++;
}
}
// 设置 change 事件处理函数
document.querySelector("#myfiles").onchange=pullfiles;
</script>
}
};
// 设置 change 事件处理函数
document.querySelector("#myfiles").onchange = pullfiles;
</script>
</html>
```

Expand Down
80 changes: 41 additions & 39 deletions files/zh-cn/web/api/filereader/abort_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 'FileReader: 中止事件 (abort)'
title: "FileReader: 中止事件 (abort)"
slug: Web/API/FileReader/abort_event
---

Expand Down Expand Up @@ -36,22 +36,22 @@ slug: Web/API/FileReader/abort_event

```html
<div class="example">
<div class="file-select">
<label for="avatar">选择你的头像：</label>
<input
type="file"
id="avatar"
name="avatar"
accept="image/png, image/jpeg" />
</div>

<div class="file-select">
<label for="avatar">选择你的头像：</label>
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
</div>

<img src="" class="preview" height="200" alt="图像预览...">

<div class="event-log">
<label>事件日志：</label>
<textarea readonly class="event-log-contents"></textarea>
</div>
<img src="" class="preview" height="200" alt="图像预览..." />

<div class="event-log">
<label>事件日志：</label>
<textarea readonly class="event-log-contents"></textarea>
</div>
</div>
```

```css hidden
Expand All @@ -63,15 +63,15 @@ img.preview {
width: 18rem;
height: 5rem;
border: 1px solid black;
margin: .2rem;
padding: .2rem;
margin: 0.2rem;
padding: 0.2rem;
}

.example {
display: grid;
grid-template-areas:
"select log"
"preview log";
"select log"
"preview log";
}

.file-select {
Expand All @@ -86,7 +86,7 @@ img.preview {
grid-area: log;
}

.event-log>label {
.event-log > label {
display: block;
}

Expand All @@ -99,38 +99,40 @@ img.preview {

```js
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector('img.preview');
const eventLog = document.querySelector('.event-log-contents');
const preview = document.querySelector("img.preview");
const eventLog = document.querySelector(".event-log-contents");
const reader = new FileReader();

function handleEvent(event) {
eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
eventLog.textContent =
eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;

if (event.type === "load") {
preview.src = reader.result;
}
if (event.type === "load") {
preview.src = reader.result;
}
}

function addListeners(reader) {
reader.addEventListener('loadstart', handleEvent);
reader.addEventListener('load', handleEvent);
reader.addEventListener('loadend', handleEvent);
reader.addEventListener('progress', handleEvent);
reader.addEventListener('error', handleEvent);
reader.addEventListener('abort', handleEvent);
reader.addEventListener("loadstart", handleEvent);
reader.addEventListener("load", handleEvent);
reader.addEventListener("loadend", handleEvent);
reader.addEventListener("progress", handleEvent);
reader.addEventListener("error", handleEvent);
reader.addEventListener("abort", handleEvent);
}

function handleSelected(e) {
eventLog.textContent = '';
const selectedFile = fileInput.files[0];
if (selectedFile) {
addListeners(reader);
reader.readAsDataURL(selectedFile);
}
reader.abort();
eventLog.textContent = "";
const selectedFile = fileInput.files[0];
if (selectedFile) {
addListeners(reader);
reader.readAsDataURL(selectedFile);
}
reader.abort();
}

fileInput.addEventListener('change', handleSelected);返回返回发的
fileInput.addEventListener("change", handleSelected);
返回返回发的;
```

#### 结果
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/filereader/filereader/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ None.
```js
function printFile(file) {
var reader = new FileReader();
reader.onload = function(evt) {
reader.onload = function (evt) {
console.log(evt.target.result);
};
reader.readAsText(file);
Expand Down
Loading