如何在nodejs中利用ajax实现网页无刷新上传图片功能-创新互联

这里注意input标签的type="file"

js部分：

function uploadFile(){
 var file = document.getElementById("file")
 var formData = new FormData();
 formData.append('file',file.files[0]);
 $.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  // async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data){
   if(200 === data.code) {
    $('#result').html("上传成功！");
    $('#img').attr('src',data.data);
   } else {
    $('#result').html("上传失败！");
   }
   console.log('imgUploader upload success');
  },
  error: function(){
   $("#result").html("与服务器通信发生错误");
  }
 });
}

function postPage() {
    var uploada = document.getElementById('upload');
    uploada.addEventListener("click",function () {
      uploadFile();
    },false);
}

window.onload = function () {
  postPage();
}

nodejs部分：

var storage = multer.diskStorage({
  destination: function (req, file, cb){
    cb(null, './public/images')
  },
  filename: function (req, file, cb){
    cb(null, file.originalname)
  }
});
var upload = multer({
  storage: storage
});
router.post('/upload', upload.single('file'), function (req, res, next) {
  var url = 'http://' + req.headers.host + '/images/' + req.file.originalname
  res.json({
    code : 200,
    data : url
  })
});

multer是express官方推荐的文件上传中间件。

文件上传有以下方法

upload.single(‘file'), //适用于单文件上传。
upload.array(‘file',num), //适用于多文件上传，num为最多上传个数，上传文件的数量可以小于num。

同时还提供了混合上传，比如A类文件1个，B类文件2个。官方API有详细说明。

file为上传字段名称，当使用form表单submit方式上传时，必须与表单上传的name属性保持一致。

关于如何在nodejs中利用ajax实现网页无刷新上传图片功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。