【上传头像】— 使用file 控件，js与nodejs

<form action="uploadImage.do" method="post" enctype="multipart/form-data" name="fileInfo" id="form1" >
    <div id="divImage"></div>
    <div class="form-signin-heading" id="btnUpload">上传头像</div>
    
注：头像限制在2M
    <input name="txtFile" id="txtFile" style="display: none" type="file" accept=".jpg,.png,.jpeg,.gif,.bmp"/>

</form>

模拟点击的代码：

  <script type="text/javascript">
  var upload = document.getElementById("btnUpload");
  var txtFile = document.getElementById("txtFile");
  var divImg=  document.getElementById("divImage");
   upload.onclick =function(){
       txtFile.click(); //注意IE的兼容性
   }

   txtFile.onchange=function(){
       if(txtFile.files[0].size>2*1024*1024){
           alert("上传图片过大，请保持在2M内")
       }else {
           uploadImg();
       }

}
      2.  提交数据到服务器
           下面的异步请求，注意两点：
           1. 省略，请求头的设置.httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          2. 数据的传递，使用FormData; 如：var formData = new FormData(form); 详细参考下面的代码.
           function uploadImg(){
// 1. 创建一个对象
        var httpRequest;
        if(window.XMLHttpRequest){ //DOM方式
            httpRequest = new XMLHttpRequest(); //DOM的方式
        }else if(window.ActiveXObject){
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器
        }

//2.

httpRequest.open("post","uploadImage.do");
        // httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //3. 接收影响回来的数据
        httpRequest.onreadystatechange=function(){
            if(httpRequest.status==200&&httpRequest.readyState==4) {
                var json = JSON.parse(httpRequest.responseText);
                divImg.innerHTML="<img src='"+json.msg.url+"'/>";
            }else{
                divImg.innerHTML="上传中...";
            }
        }
        //FormData的最大优点就是我们可以异步上传一个二进制文件 var form = document.getElementById('form1');
        var formData = new FormData(form);
        httpRequest.send(formData); // 发送信息
    }

  3. 服务器接收输入数据(这里与其它数据传送不一样,不用去解析接收数据，直接输出文件进行保存)

     首先引入模块： var formidable = require('formidable');
         //上传头像
app.post("/uploadImage.do",multipart(),function(req,res){
        //获取文件名
        var filename = req.files.txtFile.originalFilename || path.basename(req.file.txtFile.ws.path);
          //指定一个保存文件的地址
        var targetPath = path.dirname(__filename) + '/public/image/' + filename;
         //复制文件
        fs.createReadStream(req.files.txtFile.ws.path).pipe(fs.createWriteStream(targetPath));
         //返回信息到客户端
        res.json({code: 200, msg: {url: 'image/' + filename}});
});
        再次，提醒注意文件上传的大小限制。在传送时，对有文件大小的限制，所以客户端一定要设置.

doubleyong：哈哈，那是必须的回到原帖

漂亮

我们都爱梁小八：果然又是自拍照啊回到原帖

哈哈，那是必须的

果然又是自拍照啊

666