1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 window.indexedDB =window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; 9 window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction || window.msIDBTransaction; 10 window.IDBKeyRange =window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; 11 window.IDBCursor=window.IDBCursor||window.webkitIDBCursor || window.msIDBCursor; 12 window.URL=window.URL||window.webkitURL; 13 var dbName='imgDB';//数据库名 14 var dbVersion =20170829;//版本号 15 var idb; 16 function init(){ 17 var dbConnect=indexedDB.open(dbName,dbVersion);//连接数据库 18 dbConnect.onsuccess=function(e){//连接成功 19 idb=e.target.result;//获取数据库 20 }; 21 dbConnect.onerror=function(){ 22 alert("数据库连接失败"); 23 } 24 dbConnect.onupgradeneeded=function(e){ 25 idb=e.target.result; 26 var tx=e.target.transaction; 27 tx.onabort=function(e){ 28 alert("对象仓库创建失败"); 29 } 30 var name="img"; 31 var optionalParameters={ 32 keyPath:"id", 33 autoIncrement:true 34 }; 35 var store=idb.createObjectStore(name,optionalParameters); 36 alert("对象创建仓库成功"); 37 } 38 } 39 40 function downloadPic(){ 41 var xhr=new XMLHttpRequest(); 42 xhr.open("GET","s1.jpg",true); 43 xhr.responseType="arraybuffer"; 44 xhr.onload=function(e){ 45 if(this.status==200){ 46 var bb=new Blob([this.response]); 47 var reader=new FileReader(); 48 reader.readAsDataURL(bb); 49 reader.onload=function(f){ 50 var result=document.getElementById("result"); 51 //在IndexDB数据库中保存二进制数据 52 var tx=idb.transaction(['img'],"readwrite"); 53 tx.oncomplete=function(){alert("保存数据成功")} 54 tx.onabort=function(){alert("保存数据失败")} 55 var store=tx.objectStore("img"); 56 var value={ 57 img:this.result 58 } 59 store.put(value); 60 } 61 } 62 }; 63 xhr.send(); 64 } 65 function showPic(){ 66 var tx=idb.transaction(["img"],"readonly"); 67 var store=tx.objectStore("img"); 68 var req=store.get(1); 69 req.onsuccess=function(){ 70 if(this.result==undefined){ 71 alert("没有符合条件的数据") 72 }else{ 73 var ing=document.createElement("img"); 74 img.src=this.result.img; 75 document.body.appendChild(img); 76 } 77 } 78 req.onerror=function(){ 79 alert("获取数据失败"); 80 } 81 82 } 83 </script> 84 </head> 85 86 <body > 87 88 </body> 89 90 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 function sendText() { 9 var txt = document.getElementById("text1").value; 10 var xhr = new XMLHttpRequest(); 11 xhr.open("POST", "test/test", true); 12 xhr.responseType = "text"; 13 xhr.onload = function(e) { 14 if(this.state == 200) { 15 document.getElementById("result").innerHTML = this.response; 16 } 17 } 18 xhr.send(txt); 19 } 20 </script> 21 </head> 22 23 <body> 24 <h1>使用XMLHttpRequest对象向服务器发送字符串</h1> 25 <form> 26 <input type="text" name="" id="text1" value="" /> 27 <input type="button" value="发送数据" onclick="sendText();" /> 28 29 </form> 30 <output id="result"></output> 31 </body> 32 33 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 function sendForm() { 9 var form = document.getElementById("form1"); 10 var formData=new FormData(form); 11 formData.append("add_data","测试"); 12 var xhr = new XMLHttpRequest(); 13 xhr.open("POST", "test/test", true); 14 xhr.responseType = "text"; 15 xhr.onload = function(e) { 16 if(this.state == 200) { 17 document.getElementById("result").innerHTML = this.response; 18 } 19 } 20 xhr.send(formData); 21 } 22 </script> 23 </head> 24 25 <body> 26 <h1>使用XMLHttpRequest对象向服务器发送字符串</h1> 27 <form id="form1"> 28 <input type="text" name="name" placeholder="姓名" /><br/> 29 <input type="text" name="age" placeholder="年龄" /><br/> 30 <input type="button" value="发送数据" onclick="sendForm();" /> 31 32 </form> 33 <output id="result"></output> 34 </body> 35 36 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 function uploadFile() { 9 var formData=new FormData(); 10 var files = document.getElementById("file1").files; 11 for (var i = 0; i < files.length; i++) { 12 var file=files[i]; 13 formData.append("myfile[]",file); 14 } 15 var xhr = new XMLHttpRequest(); 16 xhr.open("POST", "test/test", true); 17 xhr.responseType = "text"; 18 xhr.onload = function(e) { 19 if(this.state == 200) { 20 document.getElementById("result").innerHTML = this.response; 21 } 22 } 23 xhr.send(formData); 24 } 25 </script> 26 </head> 27 28 <body> 29 <h1>使用XMLHttpRequest对象向服务器发送字符串</h1> 30 <form id="form1" enctype="multipart/form-data"> 31 请选择文件 32 <input type="file" name="file1" id="file1" multiple="multiple" /><br /> 33 <input type="button" value="上传文件" onclick="uploadFile();" /> 34 35 </form> 36 <output id="result"></output> 37 </body> 38 39 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 window.URL = window.URL || window.webkitURL; 9 10 function uploadDocument() { 11 var bb = new Blob([document.documentElement.outerHTML]); 12 var xhr = new XMLHttpRequest(); 13 xhr.open("POST", "test/test?fileName=" + getFileName(), true); 14 var progressBar = document.getElementById("progress"); 15 16 xhr.upload.onprogress = function(e) { 17 if(e.lengthComputable) { 18 progressBar.value = (e.loaded / e.total) * 100; 19 document.getElementById("result").innerHTML = "已完成进度:" + progressBar.value + "%"; 20 } 21 } 22 xhr.send(bb); 23 } 24 //获取当前文件的文件名 25 function getFileName() { 26 var url=window.location.href; 27 var pos=url.lastIndexOf("\\"); 28 if(pos==-1) //pos==-1 表示为本地文件 29 pos=url.lastIndexOf("/");//本地文件路径分割符"/" 30 var fileName=url.substring(pos+1);//从Url中获取文件名 31 return fileName; 32 33 } 34 </script> 35 </head> 36 37 <body> 38 <h1>像服务端发送Blob对象</h1> 39 <input type="button" value="复制页面文件" onclick="uploadDocument();" /> 40 <progress min="0" max="100" value="0" id="progress"></progress> 41 <output id="result"></output> 42 </body> 43 44 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 function postArrayBuffer() { 9 var check = document.getElementsByName("check"); 10 var tmpArray = new Array(); 11 for(var i = 0; i < check.length; i++) { 12 if(check[i].checked) 13 tmpArray.push(i); 14 } 15 var buffer = new ArrayBuffer(tmpArray.length); 16 var bytearray = new Int8Array(buffer); 17 for(var i = 0; i < tmpArray.length; i++) { 18 bytearray[i] = tmpArray[i]; 19 } 20 var xhr = new XMLHttpRequest(); 21 xhr.open("POST", "putData/test", true); 22 xhr.send(buffer); 23 } 24 </script> 25 </head> 26 27 <body> 28 <input type="button" name="" onclick="postArrayBuffer()" id="" value="提交" /> 29 <input type="checkbox" name="check" />数据1<br/> 30 <input type="checkbox" name="check" />数据2<br/> 31 <input type="checkbox" name="check" />数据3<br/> 32 <input type="checkbox" name="check" />数据4<br/> 33 <input type="checkbox" name="check" />数据5<br/> 34 <input type="checkbox" name="check" />数据6<br/> 35 <input type="checkbox" name="check" />数据7<br/> 36 <input type="checkbox" name="check" />数据8<br/> 37 <input type="checkbox" name="check" />数据9<br/> 38 <input type="checkbox" name="check" />数据10 39 </body> 40 41 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 function getArrayBuffer() { 9 var check = document.getElementsByName("check"); 10 var xhr = new XMLHttpRequest(); 11 xhr.open("GET", "getData.php", true); 12 xhr.responseType = "arraybuffer"; 13 xhr.onload = function(e) { 14 if(this.status == 200) { 15 var bytearray = new Int8Array(this.response); 16 for(var i = 0; i < bytearray.byteLength; i++) { 17 check[bytearray[i]].checked = true; 18 } 19 } 20 }; 21 xhr.send(); 22 } 23 </script> 24 </head> 25 26 <body> 27 <input type="button" name="" onclick="getArrayBuffer()" id="" value="提交" /> 28 <input type="checkbox" name="check" />数据1<br/> 29 <input type="checkbox" name="check" />数据2<br/> 30 <input type="checkbox" name="check" />数据3<br/> 31 <input type="checkbox" name="check" />数据4<br/> 32 <input type="checkbox" name="check" />数据5<br/> 33 <input type="checkbox" name="check" />数据6<br/> 34 <input type="checkbox" name="check" />数据7<br/> 35 <input type="checkbox" name="check" />数据8<br/> 36 <input type="checkbox" name="check" />数据9<br/> 37 <input type="checkbox" name="check" />数据10 38 </body> 39 40 </html>