1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 var result = document.getElementById("result"); 9 var file = document.getElementById("file"); 10 if (typeof FileReader == "undefined") { 11 result.innerHTML = "<p>不支持FileReader</p>"; 12 file.setAttribute("disabled", "disabled"); 13 } 14 //将文件以Data URL形式进行读入页面 15 function readAsDataURL() { 16 //检查是否为图像文件 17 var file = document.getElementById("file").files[0]; 18 if (!/image\/\w+/.test(file.type)) { 19 alert("请确保文件为图像类型"); 20 return false; 21 } 22 var reader = new FileReader(); 23 //将文件以Data URL形式进行读入页面 24 25 reader.readAsDataURL(file); 26 reader.onload = function (e) { 27 var result = document.getElementById("result"); 28 //在页面上显示文件 29 result.innerHTML = "<img src='" + this.result + "'alt=''/> "; 30 } 31 } 32 //将文件以二进制形式进行读入页面 33 function readAsBinaryString() { 34 var file = document.getElementById("file").files[0]; 35 var reader = new FileReader(); 36 //将文件以二进制形式进行读入页面 37 reader.readAsBinaryString(file); 38 reader.onload = function (f) { 39 var result = document.getElementById("result"); 40 //在页面上显示二进制数据 41 result.innerHTML = this.result; 42 } 43 } 44 //将文件以文本形式进行读入页面 45 function readAsText() { 46 var file = document.getElementById("file").files[0]; 47 var reader = new FileReader(); 48 //将文件以文本形式进行读入页面 49 reader.readAsText(file); 50 reader.onload = function (f) { 51 var result = document.getElementById("result"); 52 result.innerHTML = this.result; 53 } 54 } 55 </script> 56 </head> 57 58 <body> 59 <label for="">选择一个文件</label> 60 <input type="file" id="file" /> 61 <input type="button" value="读取图像" onclick="readAsDataURL()" /> 62 <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" /> 63 <input type="button" value="读取文本文件" onclick="readAsText()" /> 64 <div id="result"> 65 66 </div> 67 </body> 68 69 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 var result=document.getElementById("result"); 9 if(typeof FileReader=="undefined"){ 10 result.innerHTML="<p class='warn'>浏览器不支持FileReader</p>" 11 } 12 function file_onchange(){ 13 var file=document.getElementById("file").files[0]; 14 if(!/image\/\w+/.test(file.type)){ 15 alert("请选择一个图像文件"); 16 return; 17 } 18 //var slice =file.mozSlice(0,4);//在FireFox浏览器中 19 var slice=file.slice(0,4);//在Chrome浏览器中 20 var reader=new FileReader(); 21 reader.readAsArrayBuffer(slice); 22 var type; 23 reader.onload=function(e){ 24 var buffer=this.result; 25 var view=new DataView(buffer); 26 var magic=view.getInt32(0,false); 27 if(magic<0) 28 magic=magic+0*100000000; 29 magic=magic.toString(16).toUpperCase(); 30 if(magic.indexOf('FFD8FF')>=0) 31 type="jpg文件"; 32 if(magic.indexOf("89504E47")>=0) 33 type="png文件"; 34 if(magic.indexOf("47494638")>=0) 35 type="gif文件"; 36 if(magic.indexOf("49492A00")>=0) 37 type="tif文件"; 38 if(magic.indexOf("424D")>=0) 39 type="bmp文件"; 40 document.getElementById("result").innerHTML="您选择的文件类型为:"+type; 41 } 42 } 43 44 </script> 45 </head> 46 47 <body> 48 <label for="">请选择一个图像文件：</label> 49 <input type="file" id="file" onchange="file_onchange()"><br> 50 <output id="result"></output> 51 </body> 52 53 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 var result = document.getElementById("result"); 9 if (typeof FileReader == "undefined") { 10 result.innerHTML = "<p class='warn'>浏览器不支持FileReader</p>" 11 } 12 function readFile() { 13 var file = document.getElementById("file").files[0]; 14 var reader = new FileReader(); 15 reader.onload = function (e) { 16 result.innerHTML = "<img src='" + this.result + "'/>" 17 alert("load"); 18 } 19 reader.onprogress = function (e) { 20 alert("progress"); 21 } 22 reader.onabort = function (e) { 23 alert("abort"); 24 } 25 reader.onerror = function (e) { 26 alert("error"); 27 } 28 reader.onloadstart = function (e) { 29 alert("loadstart"); 30 } 31 reader.onloadend = function (e) { 32 alert("loaded"); 33 } 34 reader.readAsDataURL(file); 35 } 36 </script> 37 </head> 38 39 <body> 40 <label for="">请选择一个图像文件：</label> 41 <input type="file" id="file" onchange="readFile()"><br> 42 <output id="result"></output> 43 </body> 44 45 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; 9 var fs = null; 10 if (window.requestFileSystem) { 11 initFS(); 12 } 13 function initFS() { 14 window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (filesystem) { 15 fs = filesystem; 16 }, errorHandler); 17 } 18 function errorHandler(e) { 19 var msg = ""; 20 switch (e.code) { 21 case FileError.QUOTA_EXCEEDED_ERR: 22 msg = "文件系统所使用的存储空间的尺寸超过磁盘限额控制中指定的空间尺寸"; 23 break; 24 case FileError.NOT_FOUND_ERR: 25 msg = "未找到文件或目录"; 26 break; 27 28 case FileError.SECURITY_ERR: 29 msg = "操作不当引起安全性错误"; 30 break; 31 case FileError.INVALID_MODIFICATION_ERR: 32 msg = "对文件或目录所指定的操作不能被执行"; 33 break; 34 case FileError.INVALID_STATE_ERR: 35 msg = "指定的状态无效"; 36 break; 37 38 } 39 document.getElementById("result").innerHTML="当前操作错误:"+msg; 40 } 41 </script> 42 </head> 43 44 <body> 45 <output id="result"></output> 46 </body> 47 48 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 var result=document.getElementById("result"); 9 var file=document.getElementById("file"); 10 if(typeof FileReader =="undefined"){ 11 12 file.setAttribute("disabled","disabled") 13 } 14 function file_onchange(){ 15 document.getElementById("btnReadPicture").disabled=false; 16 } 17 function readPicture(){ 18 //检查是否为图像 19 var file=document.getElementById("file").files[0]; 20 if(!/image\/\w+/.test(file.type)){ 21 alert("不是图片类型"); 22 return false; 23 } 24 var reader=new FileReader(); 25 //将文件以二进制形式读入页面 26 reader.readAsBinaryString(file); 27 reader.onload=function(f){ 28 var result=document.getElementById("result"); 29 var src="data:"+file.type+";base64,"+window.btoa(this.result); 30 result.innerHTML="<img src='"+src+"' alt=''>"; 31 } 32 } 33 34 </script> 35 </head> 36 37 <body> 38 <p> 39 <label>请选择一个文件：</label> 40 <input type="file" name="" onchange="file_onchange()" id="file" value="" /> 41 <input type="button" name="btnReadPicture" id="btnReadPicture" onclick="readPicture()" value="读取图像" /> 42 43 </p> 44 <div id="result"></div> 45 </body> 46 47 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 var canvas; 9 function draw(id){ 10 canvas =document.getElementById(id); 11 var context=canvas.getContext("2d"); 12 context.fillStyle="rgb(0,0,255)"; 13 context.fillRect(0,0,canvas.width,canvas.height); 14 context.fillStyle="rgb(255,255,0)"; 15 context.fillRect(10,20,50,50); 16 } 17 function imgSave(){ 18 var data=canvas.toDataURL("image/jpg"); 19 data=data.replace("data:image/jpg;base64,",""); 20 var xhr=new XMLHttpRequest(); 21 xhr.open("POST","upload/img"); 22 xhr.sendAsBinary(window.atob(data)); 23 } 24 25 </script> 26 </head> 27 28 <body onload="draw('canvas')"> 29 <input type="button" name="" id="" onclick="imgSave()" value="上传图片" /> 30 <br /> 31 <canvas id="canvas" width="400" height="300"></canvas> 32 </body> 33 34 </html>
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
