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/

總結

以上是生活随笔為你收集整理的如何使用HTML5，JavaScript和Bootstrap构建自定义文件上传器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。