Shulou(Shulou.com)06/03 Report--

This article shows you how to implement the file upload preview component with progress monitoring by native JavaScript, which is concise and easy to understand, which can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The use of native js

A file upload preview component is implemented in an object-oriented way, which uses FileReader to achieve file parsing, preview, reading progress and other functions at the front end, and exposes the corresponding api to achieve user-defined requirements, such as file upload, progress monitoring, custom style, read callback, etc.

The architecture of the component design is as follows:

The core knowledge points involved are as follows:

Closure: reduce variable pollution and shorten the scope of variable search

Self-executing function

File API: read, parse, and monitor file events

DocumentFragment API: mainly used to optimize dom operation

Minix: used to achieve object mixing

Regular expressions: matching file typ

Class: class component

Github address

Implementation of File upload Preview component with Progress Monitoring with Native js

Demo demo

Use:

New xjFile ({el:'# test', / / if left empty) is directly hung on body by default accept: 'image/png', / / optional clsName:' xj-wrap', / / optional beforeUpload: function (e) {console.log (e)}, / / optional onProgress: function (e) {console.log (e)} / / optional onLoad: function (e) {console.log (e)}, / / optional onError: function (e) {console.error ('file read error', e)} / / optional})

Css Code:

.xj-wrap {position: relative; display: inline-block; border: 1px dashed # 888; width: 200px; height: 200px; border-radius: 6px; overflow: hidden;} .xj-wrap::before {content:'+'; font-size: 36px Position: absolute; transform: translate (- 50%,-50%); left: 50%; top: 50%; color: # ccc;} .xj-wrap .xj-pre-img {width: 100%; height: 100%; background-repeat: no-repeat Background-position: center center; background-size: 100%;} .xj-file {position: absolute; left: 0; right: 0; bottom: 0; top: 0; opacity: 0; cursor: pointer;}

Js Code:

(function (win, doc) {function xjFile (opt) {var defaultOption = {el: doc.body, accept:'*', / / format according to 'image/jpg,image/gif' clsName:' xj-wrap', beforeUpload: function (e) {console.log (e)}, onProgress: function (e) {console.log (e)} OnLoad: function (e) {console.log (e)}, onError: function (e) {console.error ('file read error', e)}} / / get dom if (opt.el) {opt.el = typeof opt.el = = 'object'? Opt.el: document.querySelector (opt.el);} this.opt = minix (defaultOption, opt); this.value =''; this.init ();} xjFile.prototype.init = function () {this.render (); this.watch () } xjFile.prototype.render = function () {var fragment = document.createDocumentFragment (), file = document.createElement ('input'), imgBox = document.createElement (' div'); file.type = 'file'; file.accept = this.opt.accept | |' *'; file.className = 'xj-file'; imgBox.className =' xj-pre-img' / / insert fragment fragment.appendChild (file); fragment.appendChild (imgBox); / / set class this.opt.el.className = this.opt.clsName; this.opt.el.appendChild (fragment) for the package component;} xjFile.prototype.watch = function () {var ipt = this.opt.el.querySelector ('.xj-file') Var _ this = this; ipt.addEventListener ('change', (e) = > {var file = ipt.files [0]; / / assign _ this.value = file; var fileReader = new FileReader () to the component / / trigger fileReader.onloadstart = function (e) {if (_ this.opt.accept! = ='*'& & _ this.opt.accept.indexOf (file.type.toLowerCase ()) =-1) {fileReader.abort (); _ this.opt.beforeUpload (file, e) when reading the file Console.error ('incorrect file format', file.type.toLowerCase ());}} / / event triggered by read completion fileReader.onload = (e) = > {var imgBox = this.opt.el.querySelector ('.xj-pre-img') If (isImage (file.type)) {imgBox [XSS _ clean] ='; imgBox.style.backgroundImage = 'url (' + fileReader.result +')';} else {imgBox [XSS _ clean] = fileReader.result } imgBox.title = file.name; this.opt.onLoad (e);} / / File read error event fileReader.onerror = (e) = > {this.opt.onError (e) } / / File read progress event fileReader.onprogress = (e) = > {this.opt.onProgress (e);} isImage (file.type)? FileReader.readAsDataURL (file): fileReader.readAsText (file);}, false);} / / clear the values of ipt and components. Support chained calls xjFile.prototype.clearFile = function () {this.opt.el.querySelector ('.xj-file'). Value ='; this.value ='' Return this} / / simple object mixing function minix (source, target) {for (var key in target) {source [key] = target [key];} return source} / detect picture type function isImage (type) {var reg = / (image\ / jpeg | image\ / jpg | image\ / gif | image\ / png) / gi Return reg.test (type)} / / Mount the method to window win.xjFile = xjFile;}) (window, document)

Class version (post-planning)

Class version is also very simple, the general framework is as follows, interested friends can achieve yo ~

Class XjFile {constructor (opt) {} init () {} watch () {} render () {} clearFile () {} minix (source, target) {} isImage (type) {}} above is how native JavaScript implements a file upload preview component with progress monitoring. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.