nodejs 图片预览和上传的示例代码(2)
javascript
js 方法部分拆开了下,放在一个代码块中有点长 (阅读时请查看上下文)
$(function(){ var upload={ txtUploadFile:$('#txtUploadFile'), //上传单个文件 txtUploadFileList:$('#txtUploadFileList'), //上传多个文件 btnSend:$('#btnSend'), //上传文件 preview:$('#preview'),//图片预览盒子 //预览图片加载 previewImgLoad:function(fileList){ for(var i=0;i<fileList.length;i++){ var tempFile=fileList[i]; var reader = new FileReader(); reader.readAsDataURL(tempFile); reader.onload=function (e) { var image = new Image(); image.height = 100; image.title = tempFile.name; image.src = e.target.result; upload.preview.append(image); } } } } });
/* 上传单个文件 这里是input改变时后直接上传(用于修改用户头像) 你也可以在点击上传按钮后再上传,下面的多图上传会给出案例 */ upload.txtUploadFile.change(function(){ var formData = new FormData(); formData.append('avatar',upload.txtUploadFile[0].files[0]); $.ajax({ url: '/upload/file', type: 'post', cache: false, data: formData, processData: false, contentType: false, success:function(res){ console.log('upload success'); }, error:function(){ console.log('upload faild'); } }); });
//加载预览图片 upload.txtUploadFileList.change(function(){ var fileList=this.files; upload.previewImgLoad(fileList); });
//上传多张图片 upload.btnSend.click(function(){ var files = upload.txtUploadFileList.prop('files'); if(files.length==0){ //没有选择文件直接返回 return; } var formData=new FormData(); for(var i=0;i<files.length;i++){ formData.append('photos',files[i]); } $.ajax({ url: '/upload/filesList', type: 'post', cache: false, data: formData, processData: false, contentType: false, success:function(res){ console.log('upload success'); //到这里图片已经上传成功了.你可根据返回结果处理其他的业务逻辑 if(res.status==1){ // todo something } }, error:function(){ console.log('upload faild'); } }); });
nodejs 部分
nodejs 用的是Multer中间件,这个中间件主要用于上传文件
安装Multer
npm install --save multer