如何使用HTML5，JavaScript和Bootstrap构建自定义文件上传器

by Prashant Yadav

通过Prashant Yadav

如何使用HTML5，JavaScript和Bootstrap构建自定义文件上传器 (How to build a custom file uploader with HTML5, JavaScript, & Bootstrap)

In this short article, we’ll learn how to create custom file uploader with JQuery, ES6, and Bootstrap4.

在这篇简短的文章中，我们将学习如何使用JQuery， ES6和Bootstrap4创建自定义文件上传器。

We will create a file uploader with a custom design and an option to preview selected files and remove them.

我们将创建一个具有自定义设计的文件上传器，并提供预览所选文件并将其删除的选项。

Support me by reading this article here.

通过在这里阅读本文来支持我。

演示版 (Demo)

Check out the live demo here.

在此处查看现场演示。

实作 (Implementation)

• We will use the html5 file uploader to upload the files.
  我们将使用html5文件上传器上传文件。
• Then, with the help of Bootstrap popover, we will preview the selected files.
  然后，借助Bootstrap弹出窗口，我们将预览选定的文件。
• While previewing the files, we will provide an option to remove the selected file.
  在预览文件时，我们将提供一个选项来删除选定的文件。
• As JQuery is one of the dependencies for Bootstrap popover, we will use it to ease our work.
  由于JQuery是Bootstrap popover的依赖项之一，因此我们将使用它来简化我们的工作。

依存关系 (Dependencies)

文件上传器HTML布局 (HTML layout for file uploader)

Explanation

说明

• We have created a container named custom-file-picker.

  我们创建了一个名为custom-file-picker的容器。

• In this, we have our custom file upload picture-container and our popover previewer popover-container.

  在这里，我们有自定义文件上传picture-container和我们的popover预览器popover-container 。

• Every file picker has a unique id a8755cf0-f4d1-6376-ee21-a6defd1e7c08 and its corresponding popover refers to that id data-target="a8755cf0-f4d1-6376-ee21-a6defd1e7c08" to preview the files.

  每个文件选择器都有一个唯一的id a8755cf0-f4d1-6376-ee21-a6defd1e7c08 ，其对应的弹出窗口引用id data-target="a8755cf0-f4d1-6376-ee21-a6defd1e7c08"来预览文件。

造型我们的组件 (Styling our components)

处理功能 (Handling the functionality)

Now that we have styled our components, it is time to handle the functionality. We will use Jquery with ES6 to make things easy.

既然我们已经对组件进行了样式设置，那么现在该处理功能了。 我们将在ES6中使用Jquery来使事情变得容易。

储存档案 (Storing the files)

We will create a global variable to store the files.

我们将创建一个全局变量来存储文件。

We will use this variable to store all the files of the corresponding file picker with the help of its id.

我们将使用此变量在其ID的帮助下存储相应文件选择器的所有文件。

Now we will create a function which will manage the storing of the file and displaying the count of the files. This function will take id and array of files as input.

现在，我们将创建一个函数，该函数将管理文件的存储并显示文件的数量。 此函数将id和array of files作为输入。

$(`[data-id="${id}"] > .file-total-viewer`).text(files.length); will update the file count in popover previewer.

$(`[data-id="${id}"] > .file-total-viewer`).text(files.lengt h); 将在弹出预览器中更新文件计数。

处理文件选取 (Handling the file picking)

We have our function ready to update the count and store the files. We will just pass data to this function once the files are selected or changed.

我们已经准备好更新计数和存储文件的功能。 一旦选择或更改了文件，我们只会将数据传递给此功能。

Once the files are selected we will show the complete animation with SVG to notify users that files are changed.

选择文件后，我们将显示带有SVG的完整动画，以通知用户文件已更改。

Right now we have our file stored and the count visible. Let's create the file previewer with a bootstrap popover.

现在，我们已经存储了文件，并且计数可见。 让我们用引导弹出窗口创建文件预览器。

Bootstrap provides us a method to dynamically generate the content of the popover. So we attach the popover to [data-toggle="popover"]. Learn more about it here.

Bootstrap为我们提供了一种动态生成弹出窗口内容的方法。 因此，我们将弹出窗口附加到[data-toggle="popover"] 。 在此处了解更多信息。

这个怎么运作 (How it works)

• Every time a popup is about to render it will use its [data-target] id and pull all the files from the fileStorage.

  每当弹出窗口将要呈现时，它将使用其[data-target] id并从fileStorage拉出所有文件。

• If there are files, then render those files along with the delete button.
  如果有文件，则渲染这些文件以及“删除”按钮。
• If there is no file, then show some message.
  如果没有文件，则显示一些消息。

Now in case you have multiple file uploaders and you want only one popover to be open at a time, add the following code.

现在，如果您有多个文件上传器，并且一次只希望打开一个弹出窗口，请添加以下代码。

If you select some file and click on view you should be able to view it. Now the last thing we will do is handle the deletion of files.

如果选择某些文件并单击view ，则应该可以查看它。 现在，我们要做的最后一件事是处理文件的删除。

删除文件 (Deleting the file)

We have provided the id of the file picker to the delete button through data-target and the name of the file through data-name. Every time the delete icon is clicked we will use these values to remove the files.

我们通过data-target为删除按钮提供了文件选择器的ID，并通过data-target name为文件名称提供了文件data-name 。 每次单击删除图标时，我们将使用这些值来删除文件。

As we are dynamically generating the content of the popover and it does not already exist in the DOM, we cannot assign an event to it. So we have to use a workaround of assigning an event on the DOM and checking if the delete icon is clicked with $(document).on('click', '.popover-content-remove', function (e) {});.

由于我们正在动态生成弹出窗口的内容并且它在DOM中尚不存在，因此我们无法为其分配事件。 因此，我们必须使用一种变通方法，在DOM上分配一个事件，并检查是否使用$(document).on('click', '.popover-content-remove', function (e) {});单击删除图标。 $(document).on('click', '.popover-content-remove', function (e) {}); 。

这个怎么运作 (How it works)

• Once the delete icon is clicked we will ask for confirmation from the user.
  单击删除图标后，我们将要求用户确认。

• If the user wants to proceed, then we fetch the id and the name assigned to delete button through data-target and data-name.

  如果用户想要继续，那么我们通过data-target和data-name获取ID和分配给delete按钮data-name 。

• We remove that particular file using filter() method.
  我们使用filter()方法删除该特定文件。

• Once the file is removed from the array, then we update its count by passing the value to our helper function storeFile(id, newArr);.

  一旦文件从数组中删除，我们就通过将值传递给我们的辅助函数storeFile(id, newArr);来更新其计数storeFile(id, newArr); 。

• Also, we remove the element from the popover. If the array is empty then show some message.
  另外，我们从弹出窗口中删除该元素。 如果数组为空，则显示一些消息。

Note: You should provide a unique id to each file picker and its popover previewer.

注意：您应该为每个文件选择器及其弹出预览器提供唯一的ID。

完整的代码 (Complete code)

If you liked this article, please give it 50+ ?and share it! If you have any questions related to this feel free to ask me.

如果您喜欢这篇文章，请给它50+并分享！ 如果您对此有任何疑问，请随时问我。

For more like this and algorithmic solutions in Javascript, follow me on Twitter. I write about ES6, React, Nodejs, Data structures, and Algorithms on learnersbucket.com.

有关Java的更多此类信息和算法解决方案，请在 Twitter上 关注我 。 我写ES6 ，React过来，的NodeJS， 数据结构和算法上learnersbucket.com 。

翻译自: https://www.freecodecamp.org/news/custom-file-uploader-with-html5-javascript-bootstrap-85a56a0437c5/