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);//得到头像路径“
  • 相关阅读:
    设计模式系列
    Python3 系列之 可变参数和关键字参数
    设计模式系列
    【HANA系列】SAP HANA ODBC error due to mismatch of version
    【FICO系列】SAP FICO FS00修改科目为未清项目管理
    【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
    【HANA系列】SAP HANA SQL获取当前日期加若干天后的日期
    【HANA系列】SAP HANA SQL获取本周的周一
    【HANA系列】SAP HANA SQL获取当前日期
    【HANA系列】SAP HANA SQL获取当前日期最后一天
  • 原文地址:https://www.cnblogs.com/moqq/p/6078048.html
Copyright © 2011-2022 走看看