zoukankan      html  css  js  c++  java
  • 简单的头像上传

    最近做了一个简单的上传头像的功能,在前台页面需要用一个form表单,在里面对上传的头像做一些相关设置,然后就是提交之后一些相应的处理,我这儿是将上传的头像保存在当前项目的images文件夹下的specialLearnImages文件夹下的。并结合session将用户名显示在导航栏上。当然也可以获得上传的图片名称,并将图片路径存入数据库,便于在其他页面进行操作。这儿还用到一个小技巧,就是改变上传文件标签的默认样式,在上面用一个div,改成自己想要的样式,而不要默认的“选择文件....”具体在我的上一篇文章有说明,下面附上源代码:

    “<div id="uploadDiv">
    <form action="uploadImage.do" method="post" enctype="multipart/form-data" name="fileInfo" id="form1">
    <div id="divImage">
    <img src="../images/specialLearnImages/<%=userUrl%>" alt="">
    <div class="form-signin-heading" id="btnUpload"></div>
    </div>
    <span id="noteUpLoad"><%=user%></span>
    <br/>
    <br/>
    <input name="txtFile" id="txtFile" type="file" accept=".jpg,.png,.jpeg,.gif,.bmp"/>
    <input type="button"value="上传头像"id="fileBtn"/>
    </form>
    </div>”
    在app.js 中:”
    引入模块
    var express=require("express");
    var app=express();//执行express里的全局函数,返回一个express对象
    var mysql=require("mysql");
    var fs=require("fs");
    var path=require("path");
    var AV=require("leanengine");
    var formidable=require("formidable");
    var nodemailer=require("nodemailer");
    var multipart=require('connect-multiparty');
    var session=require('express-session');//session
    var cookieparse=require('cookie-parser');//cookie


    //上传头像 app.post("/uploadImage.do",multipart(),function (req,res){ //console.log("in"); //console.log(req.files); //获取文件名 var filename=req.files.txtFile.originalFilename||path.basename(req.file.txtFile.ws.path); req.session.userUrl=filename;//记录当前的头像路径 //console.log(req.files); //copy file to public directory //指定一个保存文件的地址 var targetpath=path.dirname(__filename)+'/public/images/specialLearnImages/'+filename; //复制文件 fs.createReadStream(req.files.txtFile.ws.path).pipe(fs.createWriteStream(targetpath)); //返回信息到客户端 res.json({code:200,msg:{url:'images/specialLearnImages/'+filename}}); //返回json格式的数据 var userName=req.session.user;//session记录用户名 var myConnect=mysql.createConnection({ host:"host", user:"user", password:"password", database:"database" }); //打开连接 myConnect.connect(); //执行sql语句等的操作 var sql; sql='UPDATE loginregist SET userUrl=? WHERE userName=? '; myConnect.query(sql,[filename,userName],function(err,data){ //res.send(data); }); //关闭数据库的接口 myConnect.end(); }); app.post("/getImgPath.do",stuCenterDao.getImgPath);//得到头像路径“
  • 相关阅读:
    20165301结对编程项目-四则运算 (第二周)
    20165301第八周课下作业
    20165301 2017-2018-2 《Java程序设计》第八周学习总结
    20165301实验二java面向对象程序设计
    20165301结对编程项目-四则运算 (第一周)
    2018-2019-1 20165306 《信息安全系统设计基础》第三周学习总结
    2018-2019-1 20165306《信息安全系统设计基础》第一周学习总结
    20165306 2017-2018-2《Java程序设计》课程总结
    2017-2018-2 20165306 实验五《网络编程与安全》实验报告
    2017-2018-2 20165306 实验四《Android开发基础》实验报告
  • 原文地址:https://www.cnblogs.com/moqq/p/6078048.html
Copyright © 2011-2022 走看看