nodejs处理图片文件上传

前端之家收集整理的这篇文章主要介绍了nodejs处理图片文件上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如果使用express框架的话,其内置模块就可以直接处理文件上传了,而不需要饱含额外的模块。

express版本:3.4.4

1,使用bodyParser过滤器,并且指定上传的目录为public/upload,注意这里的目录为相对于express框架app运行的路径,或者指定绝对路径

app.use(express.bodyParser({ uploadDir: "./public/upload" }));
2,编写处理上传文件的nodejs代码,存在routes/upload.js中:
//处理图像文件上传,图像文件保存在public/upload下
exports.upload = function (req,res) {
  console.log(req.files);
  var patharray = req.files.file.path.split("\\");
  res.send(patharray[patharray.length-1]);
}

进入upload函数时express已经把文件上传都处理好了,并且保存在public/upload下了,文件名为req.files.file.path,这里面的”file“为前台页面文件input的id名称,所以这里只是简单地将文件名返回,这个文件名是express重新命名过了,保证唯一,并不是你上传时的文件名。

3,设置路由

var upload = require('./routes/upload');
app.post('/upload',upload.upload);

4,前台编写上传处理代码

页面代码

<div class="ps-image" style="background-image:url('<%- product_list[i].pic %>'); "><input type="file" id="file" onchange="onselectimage()" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>
</div>
采用ajax+formdata上传文件,所以这里form节点都不需要,所有处理都在onselectimage里面:
//选择文件之后直接上传
function onselectimage() {
  var xmlHttpReq = null;
  //IE浏览器使用ActiveX
  if (window.ActiveXObject) {
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //其它浏览器使用window的子对象XMLHttpRequest
  else if (window.XMLHttpRequest) {
    xmlHttpReq = new XMLHttpRequest();
  }
  var filenode = document.getElementById("file");


  if (xmlHttpReq != null) {
    //设置回调,当请求的状态发生变化时,就会被调用
    xmlHttpReq.onreadystatechange = function () {
      //等待上传结果
      if (xmlHttpReq.readyState == 1) {
        filenode.parentNode.style.backgroundImage = "url('/images/bigloader.gif')";
      }
      //上传成功,返回的文件名,设置到div的背景中
      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        filenode.parentNode.style.backgroundImage = "url('/upload/" + xmlHttpReq.responseText + "')";
      }
    }
    //构造form数据
    var form = new FormData();
    form.append("file",filenode.files[0]);


    //设置请求(没有真正打开),true:表示异步
    xmlHttpReq.open("POST","/upload",true);
    //不要缓存
    //xmlHttpReq.setRequestHeader("If-Modified-Since","0");
    //提交请求
    xmlHttpReq.send(form);
    //清除掉,否则下一次选择同样的文件就进入不到onchange函数中了
    filenode.value = null;
  }
}

参考资料:

1,Upload progress bar working with apache,nginx and lighttpd upload progress modules

2,模拟AJAX无刷新的文件上传功能

3,关于真正的Ajax方式上传文件

原文链接:https://www.f2er.com/ajax/165579.html

猜你在找的Ajax相关文章