first commit

代码案例/web网页上传文件es8266/.pydio

@@ -0,0 +1 @@
+f2c2e01d-722f-4ed9-967f-a80d1a40d0dd

代码案例/web网页上传文件es8266/3_4_8_SPIFFS_File_Upload_Server.ino

@@ -0,0 +1,139 @@
+
+#include <ESP8266WiFi.h>
+#include <ESP8266WiFiMulti.h>
+#include <ESP8266WebServer.h>
+#include <FS.h>  
+
+ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象,对象名称是 'wifiMulti'
+
+ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象，该对象用于响应HTTP请求。监听端口（80）      
+
+File fsUploadFile;              // 建立文件对象用于闪存文件上传
+
+void setup() {
+  Serial.begin(9600);        
+  Serial.println("");
+
+  wifiMulti.addAP("ssid_from_AP_1", "your_password_for_AP_1"); // 将需要连接的一系列WiFi ID和密码输入这里
+  wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU再启动后会扫描当前网络
+  wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); // 环境查找是否有这里列出的WiFi ID。如果有
+  Serial.println("Connecting ...");                            // 则尝试使用此处存储的密码进行连接。
+
+  int i = 0;  
+  while (wifiMulti.run() != WL_CONNECTED) { // 尝试进行wifi连接。
+    delay(1000);
+    Serial.print(i++); Serial.print('.');
+  }
+  
+  // WiFi连接成功后将通过串口监视器输出连接成功信息 
+  Serial.println('\n');
+  Serial.print("Connected to ");
+  Serial.println(WiFi.SSID());              // 通过串口监视器输出连接的WiFi名称
+  Serial.print("IP address:\t");
+  Serial.println(WiFi.localIP());           // 通过串口监视器输出ESP8266-NodeMCU的IP
+          
+  if(SPIFFS.begin()){                       // 启动闪存文件系统
+    Serial.println("SPIFFS Started.");
+  } else {
+    Serial.println("SPIFFS Failed to Start.");
+  }
+  
+  esp8266_server.on("/upload.html",   // 如果客户端通过upload页面
+                    HTTP_POST,        // 向服务器发送文件(请求方法POST)
+                    respondOK,        // 则回复状态码 200 给客户端
+                    handleFileUpload);// 并且运行处理文件上传函数
+
+  esp8266_server.onNotFound(handleUserRequest);
+
+  esp8266_server.begin();                           // 启动网站服务
+  Serial.println("HTTP server started");
+}
+
+void loop() {
+  esp8266_server.handleClient();
+}
+
+// 处理上传文件函数
+void handleFileUpload(){  
+  
+  HTTPUpload& upload = esp8266_server.upload();
+  
+  if(upload.status == UPLOAD_FILE_START){                     // 如果上传状态为UPLOAD_FILE_START
+    
+    String filename = upload.filename;                        // 建立字符串变量用于存放上传文件名
+    if(!filename.startsWith("/")) filename = "/" + filename;  // 为上传文件名前加上"/"
+    Serial.println("File Name: " + filename);                 // 通过串口监视器输出上传文件的名称
+
+    fsUploadFile = SPIFFS.open(filename, "w");            // 在SPIFFS中建立文件用于写入用户上传的文件数据
+    
+  } else if(upload.status == UPLOAD_FILE_WRITE){          // 如果上传状态为UPLOAD_FILE_WRITE      
+    
+    if(fsUploadFile)
+      fsUploadFile.write(upload.buf, upload.currentSize); // 向SPIFFS文件写入浏览器发来的文件数据
+      
+  } else if(upload.status == UPLOAD_FILE_END){            // 如果上传状态为UPLOAD_FILE_END 
+    if(fsUploadFile) {                                    // 如果文件成功建立
+      fsUploadFile.close();                               // 将文件关闭
+      Serial.println(" Size: "+ upload.totalSize);        // 通过串口监视器输出文件大小
+      esp8266_server.sendHeader("Location","/success.html");  // 将浏览器跳转到/success.html（成功上传页面）
+      esp8266_server.send(303);                               // 发送相应代码303（重定向到新页面） 
+    } else {                                              // 如果文件未能成功建立
+      Serial.println("File upload failed");               // 通过串口监视器输出报错信息
+      esp8266_server.send(500, "text/plain", "500: couldn't create file"); // 向浏览器发送相应代码500（服务器错误）
+    }    
+  }
+}
+
+//回复状态码 200 给客户端
+void respondOK(){
+  esp8266_server.send(200);
+}
+
+// 处理用户浏览器的HTTP访问
+void handleUserRequest(){
+                              
+  // 获取用户请求网址信息
+  String webAddress = esp8266_server.uri();
+  
+  // 通过handleFileRead函数处处理用户访问
+  bool fileReadOK = handleFileRead(webAddress);
+
+  // 如果在SPIFFS无法找到用户访问的资源，则回复404 (Not Found)
+  if (!fileReadOK){                                                 
+    esp8266_server.send(404, "text/plain", "404 Not Found"); 
+  }
+}
+
+bool handleFileRead(String path) {            //处理浏览器HTTP访问
+
+  if (path.endsWith("/")) {                   // 如果访问地址以"/"为结尾
+    path = "/index.html";                     // 则将访问地址修改为/index.html便于SPIFFS访问
+  } 
+  
+  String contentType = getContentType(path);  // 获取文件类型
+  
+  if (SPIFFS.exists(path)) {                     // 如果访问的文件可以在SPIFFS中找到
+    File file = SPIFFS.open(path, "r");          // 则尝试打开该文件
+    esp8266_server.streamFile(file, contentType);// 并且将该文件返回给浏览器
+    file.close();                                // 并且关闭文件
+    return true;                                 // 返回true
+  }
+  return false;                                  // 如果文件未找到，则返回false
+}
+
+// 获取文件类型
+String getContentType(String filename){
+  if(filename.endsWith(".htm")) return "text/html";
+  else if(filename.endsWith(".html")) return "text/html";
+  else if(filename.endsWith(".css")) return "text/css";
+  else if(filename.endsWith(".js")) return "application/javascript";
+  else if(filename.endsWith(".png")) return "image/png";
+  else if(filename.endsWith(".gif")) return "image/gif";
+  else if(filename.endsWith(".jpg")) return "image/jpeg";
+  else if(filename.endsWith(".ico")) return "image/x-icon";
+  else if(filename.endsWith(".xml")) return "text/xml";
+  else if(filename.endsWith(".pdf")) return "application/x-pdf";
+  else if(filename.endsWith(".zip")) return "application/x-zip";
+  else if(filename.endsWith(".gz")) return "application/x-gzip";
+  return "text/plain";
+}

代码案例/web网页上传文件es8266/data/.pydio

@@ -0,0 +1 @@
+8fd89742-7fa9-406e-88af-5b777aaedf96

代码案例/web网页上传文件es8266/data/img/.pydio

@@ -0,0 +1 @@
+843e65e3-1a68-48c7-b2a0-6b4bcf27034d

代码案例/web网页上传文件es8266/data/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="main.css">
+  <title>太极创客-零基础入门学用物联网教程</title>
+</head>
+
+<body>
+	<center>
+    <a href="http://www.taichi-maker.com" target="_blank"><img src="/img/taichi-maker.jpg" alt="太极创客"></a>
+    <h1>ESP8266 SPIFFS 文件上传</h1>
+    <p>此页面用于演示如何通过浏览器向ESP8266开发板的SPIFFS上传文件。</p>
+    <p></p>
+    <p>本教程可在太极创客网站免费获取。太极创客网址： <a href="http://www.taichi-maker.com">www.taichi-maker.com</a> .
+    <p> <a href="/upload.html">点击此处进入文件上传页面</a> </p>
+	</center>
+</body>
+
+</html>

代码案例/web网页上传文件es8266/data/main.css

@@ -0,0 +1,4 @@
+body {
+    font-family: sans-serif;
+    color: #444;
+}

代码案例/web网页上传文件es8266/data/success.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="main.css">
+  <title>太极创客-零基础入门学用物联网教程</title>
+</head>
+
+<body>
+	<a href="http://www.taichi-maker.com" target="_blank"><img src="/img/taichi-maker.jpg" alt="太极创客"></a>
+    <h1>ESP8266 SPIFFS 文件上传成功</h1>
+    <p><a href="/">返回首页</a></p>
+</body>
+
+</html>

代码案例/web网页上传文件es8266/data/upload.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="main.css">
+  <title>太极创客-零基础入门学用物联网教程</title>
+</head>
+
+<body>
+	<center>
+	<a href="http://www.taichi-maker.com" target="_blank"><img src="/img/taichi-maker.jpg" alt="太极创客"></a>
+    <h1>ESP8266 SPIFFS 文件上传</h1>
+    <p>点击按钮选择需要上传的文件</p>
+    <form method="POST" enctype="multipart/form-data">
+        <input type="file" name="data">
+        <input class="button" type="submit" value="上传">
+    </form>
+	</center>
+</body>
+
+</html>