zoukankan html css js c++ java

HTML5权威指南 10.文件API

 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>

查看全文

相关阅读:
缺省参数的注意事项
 可变和不可变类型
 Python之旅
 BBS项目个人界面分类，文章，模板的使用详解
 Django 模板
 BBS项目部分主界面and个人博客界面代码详解
 BBS项目注册界面and部分首页代码详解
 BBS项目备忘时时更新
 BBS项目登录界面代码详解
 BBS项目基本表关系

原文地址：https://www.cnblogs.com/wingzw/p/7446157.html

最新文章
python 基础(1)
cdn 的配置及原理
 js-3
js-2
h5-18
h5-17
js-1
js-5
h5-15
h5-14