HtmlExample.git

commits
diff

2021-04-01

kangkai

添加form和ajax上传文件的实例

aa5ed6

diff | tree

2021-04-01

kangkai

上传文件研究分析实例

4dcce9

diff | tree

1 files added

Input File.html

66 ●●●●● patch | view | raw | blame | history

 Input File.html

New file
@@ -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>

New file
			@@ -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>