From aa5ed6fc701b461f23bd1bf14569bb5025e3b73d Mon Sep 17 00:00:00 2001
From: kangkai <kangk26@foxmail.com>
Date: Thu, 01 Apr 2021 17:48:17 +0800
Subject: [PATCH] 添加form和ajax上传文件的实例
---
Input File.html | 66 +++++++++++++++++++++++++++++++++
1 files changed, 66 insertions(+), 0 deletions(-)
diff --git a/Input File.html b/Input File.html
new file mode 100644
index 0000000..d14a6a1
--- /dev/null
+++ b/Input File.html
@@ -0,0 +1,66 @@
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <style type="text/css">
+ div{
+ display: block;
+ }
+ #uploadMsg{
+ width: 260px;
+ height: 250px;
+ }
+ </style>
+ <script>
+ function uploadFileChange() {
+ document.getElementById("uploadMsg").value = "";
+ const files = this.files
+ for(let i=0; i<files.length; i++){
+ let file = files[i];
+ document.getElementById("uploadMsg").value += "name:" + file.name + ",size:" + file.size + ",type:" + file.type;
+ document.getElementById("uploadMsg").value += '\n\r';
+ }
+ }
+
+ function ajaxUploadFile(){
+ var fileElement = document.getElementById("uploadFile");
+ var files = fileElement.files;
+
+ var formData = new FormData();
+ formData.enctype = 'multipart/form-data';
+ for(let i = 0;i<files.length;i++){
+ formData.append("uploadFile", files[i]);
+ }
+
+ var xhr = new XMLHttpRequest();
+ xhr.open("POST", 'http://192.168.20.100:10005/BaseInfo/BasePaper/SetQuestionStrengThen', true);
+ xhr.setRequestHeader("Content-type", "multipart/form-data");
+ xhr.onload = function () {
+ alert(" 请求结束");
+ };
+ xhr.send(formData);
+ }
+
+ window.onload = function(){
+ var fileElement = document.getElementById("uploadFile");
+ fileElement.addEventListener("change", uploadFileChange, false);
+ var ajaxBtnElement = document.getElementById("ajaxBtn");
+ ajaxBtnElement.addEventListener("click", ajaxUploadFile, false);
+ }
+
+ </script>
+ </head>
+ <body>
+ <form action="http://192.168.20.100:10005/BaseInfo/BasePaper/SetQuestionStrengThen" method="post" enctype="multipart/form-data">
+ <div>
+ <input type='file' id='uploadFile' name='uploadFile' multiple/>
+ </div>
+ <div>
+ <textarea id='uploadMsg' name='uploadMsg'></textarea>
+ </div>
+ <div>
+ <input type='submit' id='formBtn' name='formBtn' value='表单上传'/>
+ <input type='button' id='ajaxBtn' name='ajaxBtn' value='Ajax上传'/>
+ </div>
+ </form>
+ </body>
+</html>
\ No newline at end of file
--
Gitblit v1.9.3