zoukankan      html  css  js  c++  java
  • 上传文件

    #文件上传
    ##NodeJS后端:
    ###1.下载multiparty插件
    在npm相应的项目文件目录下下载:npm install multiparty
    ###2.编写上传的路由方法
        let multiparty = require("multiparty")
        let path = require("path")
        .
        .
        .
        router.post("/upload",function(req,res){
         let form = new multiparty.Form({
         uploadDir:"./public/upload" //指定保存上传文件的路径
         })
         form.parse(req, function(err,fields,files){
         let key = Object.keys(files)[0] //获取上传信息中的key
         if(err){
         res.send(err)
         }else{
         res.send(path.basename(files[key][0].path)) //根据key获取上传的文件名并返回
         }
         })
        })

    ##前端:
    ###1.添加上传控件
    ###2.引入ajaxfileupload插件
    在需要上传文件的页面引入 ajaxfileupload.js 文件
    ####上传文件需要设置form表单的enctype属性,值必须为"multipart/form-data"。如果用ajax实现上传的话,可以使用FormData对象来封装上传的数据。当然,也可以使用一些插件来实现。
    ###3.上传成功后,获取服务器返回的文件名,将该文件名设置到Img标签的src中。
        <div style="margin-bottom:20px">
    <input
    class="easyui-filebox"
    name="addMovieFile"
    style="200px"
    data-options="label:'上传封面:'"
    >
    <a class="easyui-linkbutton" id="addMovieFileBtn" data-options="iconCls:'icon-add'"></a>
    </div>
    <div class="addHeadImg">
    <img src="images/no-image.png" alt="">
    <input type="hidden" id="addHeadImgPath">
    </div>

        $.ajaxFileUpload({
            url:"/upload",
            dataType:"string",
            fileElementId:$("[name=addMovieFile]").attr("id"),
            success:function(path){
                $(".addHeadImg>img").attr("src","/upload/" + path)
            }
        })
  • 相关阅读:
    【MyBatis】学习笔记010--#{}与¥{}的区别
    【MyBatis】学习笔记009--基于注解的CRUD
    【MySQL】limit语法
    【MyBatis】学习笔记008--分页查询
    【MyBatis】学习笔记007--日志工厂
    【MyBatis】学习笔记006--resultMap简单结果映射
    【MyBatis】学习笔记005--生命周期与作用域
    【MyBatis】学习笔记004--XML配置
    重学动态规划
    剑指 Offer 09. 用两个栈实现队列
  • 原文地址:https://www.cnblogs.com/lyl-0667/p/11392354.html
Copyright © 2011-2022 走看看