网站后台管理系统进度,企业微网站怎么建设,嘉定区做网站,建设网站需要的ftp资源运行效果图一、组件介绍基本特点基于HTML5的FileReader和FormData可以完成多文件选择#xff0c;并预览完成文件的异步上传原生XHR对象#xff0c;适配多浏览器代码class JohnUploader{url;fileField;vollay;/**** param url 文件上传的地址* param fileField 一个文件…运行效果图一、组件介绍基本特点基于HTML5的FileReader和FormData可以完成多文件选择并预览完成文件的异步上传原生XHR对象适配多浏览器代码class JohnUploader{url;fileField;vollay;/**** param url 文件上传的地址* param fileField 一个文件域对象* param vollay 一个HTMLElement对象做为img的容器*/constructor(url,fileField,vollay){this.urlurlthis.fileFieldfileFieldthis.vollayvollay}/*** param nf 一个新的文件域对象* 由于文件域是不能够改变内容所以需要改变这个属性*/setFileField(nf){this.fileFieldnf}/*** 本函数的触发时机--文件域的改变事件* 作用在画廊中显示选中的图片*/selectionShow() {this.vollay.innerHTML;let files this.fileField.files;for (let i 0; i files.length; i) {let file files[i]if(!file.isRemoved) {let reader new FileReader()reader.readAsDataURL(file)reader.onload event {let img document.createElement(img)img.src reader.result//点击图片删除(以后改成点击图片上的删除logo)img.onclick event {//为文件加入删除标记file.isRemovedtrue//重新刷新画廊从而不显示有删除标记的文件this.selectionShow()}this.vollay.appendChild(img)}}}};/*** //根据给定的表单域完成文件上传* param callback 文件上传完毕的回调函数callback中的参数为xhr.reponseText*/uploadFile(callback) {let formDatanew FormData();let files this.fileField.files;if(files.length0||filesnull){alert(没有选择上传文件)return;}for (let i 0; i files.length; i) {let filefiles[i]//如果文件没有加删除标记if(!file.isRemoved)formData.append(avatar,files[i],files[i].name);}let xhrnew XMLHttpRequest();xhr.open(POST,this.url)xhr.onreadystatechangefunction(){if(xhr.readyState4){callback(xhr.responseText)}}xhr.send(formData)}}二、组件使用演示HTML部分Titleimg {height: 100px;margin: 5px;border: darkgreen 3px solid;padding: 2px;}这个文件域是被隐藏掉了选择要上传的图片上传画廊中的图片已经上传的文件//底部的测试代码js测试代码window.οnlοadfunction(){//抓取后台的图片列表function fetchAllPhotos(url,callback){let xhrnew XMLHttpRequest();xhr.open(GET,url)xhr.onreadystatechangefunction(){if(xhr.readyState4){let photosJSON.parse(xhr.responseText)callback(photos)}}xhr.send(null)}/*** 将抓取到的图片列表在targetLocation中显示出来* param photos* param targetLocation*/function fetchAllPhotosCallback(photos,targetLocation){targetLocation.innerHTMLphotos.forEach(photo{let imgdocument.createElement(img)img.srcimages/phototargetLocation.appendChild(img)})}let vollay document.querySelector(#vollay)let avatar document.querySelector([nameavatar])let photoWalldocument.querySelector(#photo-wall)//这是主角JohnUploaderlet uploadernew JohnUploader(upload,avatar,vollay)//用来处理文件域清空的特殊情况将来使用该克隆体再进行克隆替换掉avatarlet avtarCloneavatar.cloneNode(true)//用于将画廊复位和将文件域进行复位function reset(){vollay.innerHTML let avatarClone2avtarClone.cloneNode(true)uploader.setFileField(avatarClone2)avatar.after(avatarClone2)avatar.remove()avataravatarClone2avatar.onchange function(){uploader.selectionShow()}}//文件域的变化事件avatar.onchange function(){uploader.selectionShow()}//抓取并显示后台的所有图片到照片墙fetchAllPhotos(files,photosfetchAllPhotosCallback(photos,photoWall))//使用button来完成文件域的选择文件功能document.querySelector(#select-file).οnclick()avatar.click()//文件上传按钮的事件处理document.querySelector(#upload-file).οnclick() {let innerAvataravataruploader.uploadFile(txt {//抓取并显示后台的所有图片到照片墙fetchAllPhotos(files, photos {fetchAllPhotosCallback(photos, photoWall)reset()})})}}三、服务器部分Expressmulter项目依赖expressmulter项目结构项目结构代码//app.jsconst fsrequire(fs)const expressrequire(express)const httprequire(http)//文件上传中间件(指定上传的临时文件夹是/uploads)const multerrequire(multer)var storage multer.memoryStorage()//磁盘临时文件的方案// let upload multer({ dest: uploads/ })//内存缓存方案let upload multer({ storage: storage })let appexpress();const FILE_PATHpublic/images///HttpServer服务的中间件(public目录下的index.html为首页)app.use(express.static(public))//文件上传的处理(avatar是上传时的filedName)app.post(/upload, upload.array(avatar,10), function (req, res, next) {//req.body是普通表单域//req.files或req.file,是文件域let msg{body:req.body,files:req.files}//磁盘临时文件方案将临时文件上传到/public/images中// let outputfs.createWriteStream(FILE_PATHreq.file.originalname)// let inputfs.createReadStream(req.file.path)// input.pipe(output)//内存缓存方案req.files.forEach((file,index){fs.writeFile(FILE_PATHfile.originalname,file.buffer,function () {console.log(file.originalname....完成index)//最后一个文件处理完毕直接显示数据if (indexreq.files.length-1){res.json(msg)}})})})//接收前端的请求返回上传图片的列表app.get(/files,function (req,res) {fs.readdir(public/images,function (err,dir) {res.json(dir)})})//启动Express服务器let serverhttp.createServer(app);server.listen(8000,function () {console.log(start server at port 8000)})
