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