preface
Before, we used WebUploader to upload files, which was developed by Baidu, but no new version has been released since 2014. Therefore, we studied other open-source Web components, with better interface and more powerful functions. The following are some examples and can be used for reference under the introductory experience.
Uppy
GitHub address
Official documents
brief introduction
Uppy is a stylish modular JavaScript file uploader that integrates seamlessly with any application. It is fast and has an easy to understand API.
- Get files from local disk, remote URL, Google Drive, Dropbox, Box, Instagram or take and record self photos with camera
- Preview and edit metadata with a beautiful interface
- Upload to the final destination, processing / coding can be selected
features
- Lightweight, plug-in based modular architecture, lightweight dependency β‘
- File uploads can be recovered through the open tus standard, so large uploads can avoid network failures
- Support the selection of files from the following locations: webcam, Dropbox, Box, Google Drive, Instagram, bypass the user's device as much as possible, and directly synchronize between servers through @ uppy / company
- It is applicable to the back-end of file encoding and processing, such as Transloadit, without using it (you only need to launch your own Apache/Nginx/Node/FFmpeg/etc back-end)
- Smooth user interface β¨
- Optional file recovery using Golden Retriever (after browser crash)
- Multilingualism (i18n) π
- Build with accessibility in mind
- Always free for all the world (such as beer) πΊοΌ Pisa ποΌ And freedom π½)
- As cute as a dog, also accept cat pictures πΆ
Getting started
Add a page, introduce uppy JS and CSS, and then create a div to display the file upload console. Finally, create an uppy object, and set the upload path and some parameters.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Uppy</title> <link href="https://releases.transloadit.com/uppy/v2.2.1/uppy.min.css" rel="stylesheet"> </head> <body> <div id="drag-drop-area"></div> <script src="https://releases.transloadit.com/uppy/v2.2.1/uppy.min.js"></script> <script> var uppy = new Uppy.Core() .use(Uppy.Dashboard, { inline: true, target: '#drag-drop-area', }) .use(Uppy.XHRUpload, { id: 'XHRUpload', endpoint: '/file/upload', method: 'post', formData: true, fieldName: 'file', bundle: true, timeout: 30 * 1000, // default 30s limit: 0, // Limit the amount of uploads going on at the same time. }); uppy.on('complete', (result) => { console.log('Upload complete! We've uploaded these files:', result.successful) }) </script> </body> </html>
Then visit the page and you can see a very simple upload page. You can set Chinese with reference to the official documents.
Select a file or directly drag the file to the console, click upload file, and the file will be uploaded successfully. The whole interface and process are still relatively simple.
filepond
brief introduction
GitHub address
Official website address
filepond is a JavaScript library that can upload anything you throw at it, optimize images to speed up upload, and provide an excellent, accessible and silky user experience. After all, it can be easily integrated with the following frameworks:
Function overview
Multiple input formats
Accept directories, files, blob s, local URLs, remote URLs, and data URI s.
Multiple file sources
Delete files, select files from the file system, add files using the API, or copy and paste files.
Asynchronous or synchronous upload
Send the file to the server using XMLHttpRequest, or store and submit the form in base64 format using the File Encode plug-in.
Image optimization
Automatically resizing and cropping images on the client can save server bandwidth and significantly improve upload speed.
Accessibility
It has been tested with AT software such as VoiceOver and JAWS. FilePond's user interface can be navigated through the keyboard.
Responsive
Automatically zoom to available space. Available on both mobile and desktop devices.
FilePond plugin
FilePond provides rich plug-ins:
- Document code
- File rename
- File size verification
- File type validation
- File metadata
- Document Poster
- image editor
- Picture size verification
- Picture preview
- KJNova Clipper
- Image filter
- Image resizing
- Image transformation
- Image EXIF direction
- Image overlay (nielsboogaard / filepond plugin image overlay)
- Nielsboogaard / filepond plugin media Preview
- Media preview + PDF preview (ernestbrandi / filepond plugin media preview)
- Get file (nielsboogaard / filepond plugin get file)
- Zip directory upload (tzsk / filepond plugin zipper)
- Pdf preview (Adri glez / filepond plugin PDF preview)
- Pdf conversion (Alexandre David / filepond plugin PDF convert)
- Copy path (jnkn6 / filepond plugin copy path)
Getting started
Add page:
<!DOCTYPE html> <html> <head> <title>FilePond from CDN</title> <!-- Filepond stylesheet --> <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> </head> <body> <!-- We'll transform this input into a pond --> <input type="file" name="filepond" multiple data-allow-reorder="true" data-max-file-size="3MB" data-max-files="3"> <!-- Load FilePond library --> <script src="https://unpkg.com/filepond/dist/filepond.js"></script> <!-- Turn all file input elements into ponds --> <script> // This parse method lets us automatically load the FilePond element on the page. FilePond.parse(document.body); // set an option FilePond.setOptions({ server: '/file/upload',// Back end address name: 'file' // Set file parameters }); </script> </body> </html>
Visit the page and select file to see the displayed upload progress and upload success prompt.
dropzone
GitHub address
Official website address
brief introduction
Dropzone is a JavaScript library that can convert any HTML element into a dropzone. This means that users can drag and drop files onto it. Dropzone will display the file preview and upload progress, and handle the upload for you through XHR.
It is fully configurable and can be styled according to your needs.
function
- Default beautiful
- Image thumbnail preview. Just register the callback thumbnail(file, data) and display the image anywhere you like
- Enable retina
- Multiple files and synchronous upload
- Progress update
- Support large files
- Finish the theme. The look and feel of the Dropzone is just the default theme. You can define everything yourself by overriding the default event listener.
- Browser image size adjustment (adjust image size before uploading image to server)
- Good test
Getting started
The usage is similar to the above two. I'm too lazy to write here. You can refer to the official documents.
