1. 程式人生 > 其它 >【C語言學習筆記】超級炫酷的C語言實用小技巧!學會這些隱藏技巧,早下班一小時!

【C語言學習筆記】超級炫酷的C語言實用小技巧!學會這些隱藏技巧,早下班一小時!

檔案上傳有三種方式:

1,from表單上傳,簡單方便。

2,Ajax請求上傳,非同步上傳,區域性重新整理。

3,layui檔案上傳,步驟麻煩,不推薦。

1,from表單上傳:

<form action="/uploadHead" method="POST" enctype="multipart/form-data" class="layui-form">         <!-- accept="image/*" 指規定檔案只能選擇圖片型別的檔案 -->         <input type="file" name="headImg" accept="image/*" >
        <button>上傳頭像</button> </form>

enctype設定表單提交的資料型別,  multipart/form-data指檔案型別

2,使用Ajax請求

layui.use(["form", "jquery", "layer"], function(){             var form = layui.form;             var $ = layui.jquery;             var layer = layui.layer;       console.log($("input")[0].files)
            // 找到input選中的頭像檔案              var file = $("input")[0].files[0]             // 把需要上傳的檔案加入formData物件中(因為ajax上傳的是formData物件)             var formData = new FormData()        注意: 第一個引數是input的name值,和後端儲存引數對應,等二個引數是檔案       formData.append("headImg", file);                  // formData.append("username", sessionStorage.getItem("name"))
      //發起ajax請求, 上傳頭像                 $.ajax({                     type: "post",                     url: "/uploadHead",                     data: formData,                     // contentType指上傳資料型別, jQuey封裝ajax時會自動把data物件轉成字串型別, false表示禁止自動轉換型別, 因為檔案不能轉型別                     contentType: false,                     // processData指jQuery內部對data資料的加工處理(編碼),false可防止檔案被加工處理, 保持原有結構                     processData: false,                     success: function(){                         layer.msg("頭像已上傳",{icon: 1})                     // window.parent.document.getElementById("headImg").src = "./HeadImg/張三.jpg"                   // 這一句無效的原因: img標籤設定src地址時,如果src值不變的情況下, img會直接呼叫快取, 不會更新 (瀏覽器自動快取造成的結果)                   // 解決方案: 我們在src圖片路徑後使用?拼接隨機數,使設定前後的src不一致, img就會過載圖片 (?後的資料叫hash值,不影響路徑使用)                      window.parent.document.getElementById("headImg").src =           "./HeadImg/"+ sessionStorage.getItem("name") +".jpg?" + Math.random()     }                 })            return false; 取消表單的預設提交   })         })       console.log(window)  // 當前頁HeadImg.html         console.log(window.parent)  // 外層主頁index.html         console.log(window.document) // 當前頁文件物件HeadImg.html         console.log(window.parent.document)  // 外層主頁文件物件index.html     後端接收檔案 var cookieParser = require("cookie-parser") app.use(cookieParser())   var multer = require("multer") // 引入硬碟儲存模組 設定磁碟儲存配置選項(儲存位置和檔名) var myStorage = multer.diskStorage({   //設定檔案儲存位置   //兩個引數   通過呼叫callback設定檔案儲存目錄, 引數1是錯誤資訊, 引數2是目錄   destination:function(req, file, callback){   callback(null,"./public/HeadImg") }     //設定檔名   filename:function(req, file, callback){   // cookie會隨ajax請求,被攜帶在請求頭中, 但請求頭不支援漢字,會亂碼, 所以在本地cookie中存資料時, 漢字要進行url編碼,
    // 使用cookie-parser模組可以直接解析請求頭中的cookie字串, 自動解碼並生成物件存入req.cookies欄位中

    console.log(1, req.headers.cookie, req.cookies)
    callback(null, req.cookies.username + ".jpg")
} })   // 建立硬碟儲存物件
var save = multer({
  storage: myStorage
}) // 頭像上傳介面, 第二個引數用於儲存頭像, single()表示單文儲存 headImg對應input輸入框的name
app.post("/uploadHead", save.single("headImg"), function(req, res){
  console.log(2, req.body)
  // 檔案上傳的回撥執行時, 檔案就已經儲存到磁碟了, 直接響應即可
  res.json({code: 1, msg: "頭像已上傳"})
})