doubleyong
管理员
管理员
  • 最后登录2021-09-29
  • 发帖数1035
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:6549回复:4

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

楼主#
更多 发布于:2016-08-19 13:55

描述:上传头像

图片:上传头像.png

上传头像
   (点击“上传头像”,可以选择你要上传的文件,点击确定后,实现上传,将图片传送到服务器,且将路径返回到客户端进行显示;注意,上传有头像大小的限制)
   此上传功能,分几个步骤
       1. 点击“上传头像”弹出选择图片的文件选框。
        实现方式(隐藏了一个file控件,在用户点击上传头像时,程序去模拟,file文件的点击,注,只要是有file控件的,都要添加“enctype="multipart/form-data",必须写):
        页面代码:
<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于2016-08-21 22:02编辑了帖子]

最新喜欢:

AYHAPPYAYHAPP... wjlwjl
知识需要管理,知识需要分享
wjl
wjl
新手
新手
  • 最后登录2021-09-29
  • 发帖数1
沙发#
发布于:2021-08-23 11:50
doubleyong:哈哈,那是必须的回到原帖
漂亮
doubleyong
管理员
管理员
  • 最后登录2021-09-29
  • 发帖数1035
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
板凳#
发布于:2016-08-24 12:39
我们都爱梁小八:果然又是自拍照啊回到原帖
哈哈,那是必须的
知识需要管理,知识需要分享
我们都爱梁小八
新手
新手
  • 最后登录2017-07-19
  • 发帖数2
  • 社区居民
地板#
发布于:2016-08-23 21:44
果然又是自拍照啊
switch
贫民
贫民
  • 最后登录2020-11-13
  • 发帖数2
4楼#
发布于:2016-08-23 21:41
666
游客


返回顶部

公众号

公众号