ajax 图片上传

最新推荐文章于 2024-11-30 14:18:40 发布

原创最新推荐文章于 2024-11-30 14:18:40 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

91 篇文章

订阅专栏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #throttle{
            height: 2000px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    手机号: <input type="text" id="phone">
    <button onclick="sendCode()">发送验证码</button>
    <span id="sendMsg"></span>
    输入验证码 <input type="text" id="code">
    <button onclick="verifyCode()">验证</button>
    <span id="verifyMsg"></span>
===========================================单文件上传
    <form action="/uploadFile.do"  method="post" enctype="multipart/form-data">
        <input type="file" name="myfile">
        <button>提交</button>
    </form>
  ======================================多文件上传
    <form action="/uploadFiles.do"  method="post" enctype="multipart/form-data">
        <input type="file" multiple="multiple" name="myfile1">
        <button>提交</button>
    </form>
    <img src="" alt="">
    <!--<div id="throttle"></div>-->
    ===================================================ajax上传文件
    <input type="file" id="myajaxFile" name="ajaxFile">
    <button onclick="ajaxFile()">提交</button>
    <img id="uploadImg" src="images/1.jpg" style="width: 100px" alt="">

    <script src="lib/jquery-1.12.4.js"></script>
    <script>
      /*  var canRun = true;
        window.onscroll = function(){
            if(!canRun){
                // 判断是否已空闲，如果在执行中，则直接return
                return;
            }
            // console.log("函数节流");
            canRun = false;
            setTimeout(function(){
                console.log("函数节流");
                canRun = true;
            }, 3000);
        };
        var timer = false;
        document.getElementById("debounce").onscroll = function(){
            clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

            timer = setTimeout(function(){
                console.log("函数防抖");
            }, 300);
        };*/
        function sendCode() {
            let phone = $("#phone").val()
            $.ajax({
                type:"post",
                url:"/sms.do",
                data:{phone},
                success(data){
                    $("#sendMsg").text(data)
                }
            })
        }
        function verifyCode() {
            let code = $("#code").val()
            let phone = $("#phone").val()
            $.ajax({
                type:"post",
                url:"verifyCode.do",
                data:{code,phone},
                success(data){
                    console.log(data)
                    $("#verifyMsg").text(data)
                }
            })
        }


        function ajaxFile() {
            var formData = new FormData();
            // 第一个参数  等同于form表单的name属性
            formData.append("myfile", $("#myajaxFile")[0].files[0]);

            $.ajax({
                url: "/uploadFile.do",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    $("#uploadImg")[0].src=data
                }
            })
        }
    </script>
</body>
</html>
。。。。。。。。.。。。。。.。.。。。。。.。.。。。。。。。。
router文件夹 里
const express = require("express")

const pageCtrl = require("…/controller/pageCtrl")
const smsCtrl = require("…/controller/smsCtrl")
const uploadFileCtrl = require("…/controller/uploadFileCtrl")
const upload = require("…/config/MulterCig")
const router = express.Router()

router.get("/sms",pageCtrl.sms)
router.post("/sms.do",smsCtrl.smsPhone)
router.post("/verifyCode.do",smsCtrl.verifyCode)

// =================================文件上传
// upload.single后所接的字符串代表前端input的name值
router.post("/uploadFile.do",upload.single(‘myfile’),uploadFileCtrl.upload)

router.post("/uploadFiles.do",upload.array(‘myfile1’,9),uploadFileCtrl.uploadFiles)

module.exports=router
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

’controller文件夹
module.exports ={
upload(req,resp){
// 上传完了之后干什么
// 拿到图片路径将路径写入数据库
console.log(upload/${req.file.filename})
console.log(req.file)
// 将图片url写入数据库
// resp.render(“sms”,{})
resp.send(upload/${req.file.filename})
},
uploadFiles(req,resp){
let imgArr = []
req.files.forEach((item)=>{
imgArr.push(item.filename)
})
// 拿到上传的所有文件名并将文件名写入数据库
console.log(imgArr)
// 循环添加这个数组邻面src //一定要使用promise
resp.send(“文件上传成功”)
}
}
。。。。。。。。。。。。。。。。。。。。。。。。。。。。
config 文件夹

const multer = require(“multer”)
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, ‘src/upload’) //将上传的文件放到哪个文件夹中去字符串参数是路径
},
filename: function (req, file, cb) {
cb(null, Date.now()+’-’+file.originalname) //这个函数给我们的文件起名字
}
})

const uplaod = multer({ storage: storage })

module.exports = uplaod