var progressWrap = document.querySelector('.progress') 

                    progressWrap.style.display = "flex" 

                    var percentComplete = e.loaded / e.total * 100 

                    progress.value = percentComplete 

 

                    if (percentComplete >= 100) { 

                        progress.value = 0 

                        progressWrap.style.display = "none" 

                    } 

                } 

            } 

 

        } 

其中利用了xhr.upload.onprogress监听数据上传事件，并且动态设置h5进度条的value显示上传进度。如果上传完成，隐藏进度条。

如果服务器返回的是success，就弹出上传图片成功。否则弹出上传图片失败。

总结

前端利用了FileReader 的readAsDataUrl显示缩略图，利用H5 progress标签和监听xhr.upload.onprogress显示进度条。利用FormData模拟表单数据，用ajax技术提交到服务器。

后端利用express建立服务器，利用static中间件指定js css html 文件路径。用multer模块实现了解析存储通过 input typle="file" 提交的数据。

利用这个前端ajax和后端nodejs技术，我们基本上就可以做出一个图片上传存储的基本网站核心。如果数据量比较大我们就可以采用数据库存储索引搜索，不过这已经跟前端没啥关系就不展开讲了。

获取代码

【编辑推荐】

开发者邮件泄密 MIUI9重磅功能遭曝光

前端开发js运算符单竖杠“|”的用法和作用及js数据处理

Node.js对于Java开发者而言是什么？

使用嵌入式开发板实现对车位锁控制的流程及程序实现

在PHP应用程序开发中不正当使用mail()函数引发的血案

(责任编辑：admin)