落叶无痕
0%

7

发表于 分类于 Changyan：

自动摘要: 文件选择功能： HTML ```javascript <divid=”url”>

<inputtype=”file”id=”file”style=”display:none ……..

文件选择功能：

HTML

1
2
3
<div id="url"></div>
<input type="file" id="file" style="display: none" onchange="setImage(this)" >
<input type="button"  id="import" value="选择文件">

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$("#import").click(function(){//点击导入按钮，使files触发点击事件，然后完成读取文件的操作。
        $("#file").click();
    });

    function myimport(obj){
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
            (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
                (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
                    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
                        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
        var file_url="";
        if(Sys.ie<="6.0"){
            //ie5.5,ie6.0
            file_url = obj.value;
        }else if(Sys.ie>="7.0"){
            //ie7,ie8
            obj.select();
            file_url = document.selection.createRange().text;
        }else if(Sys.firefox){
            //fx
            //file_url = document.getElementById("file").files[0].getAsDataURL();//获取的路径为FF识别的加密字符串
            file_url = readFileFirefox(obj);
        }else if(Sys.chrome){
            file_url = obj.value;
        }
        //alert(file_url);
        document.getElementById("url").innerHTML=file_url;
    }

获取文件路径时显示的是：C:\fakepath\1.png 待修改

进度条控制：

自定义进度条

HTML

1
2
3
4
5
<div id="progress">
		<aside id="aside" style="width: 10px"></aside>
		<p><span id="span">0</span>%</p>
</div>
<button onclick="akey()">一键降噪</button>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#progress{
		  width: 500px;
		  height: 20px;
		  position: relative;
		  border: 1px solid;
		  margin:0 0 0 25px;
		  padding-left: 0;
	  }
	  aside{
		  height: 20px;
		  background-color: red;
	  }
	  #progress p{
          position: absolute;
		  left: 0;
		  top: 0;
	  }

JavaScript

1
2
3
4
5
6
7
8
9
10
11
//动态进度条
function akey(){
        var i=0;
        var timer = setInterval(function(){
            document.getElementById("aside").style.width = i++ +'px';
            document.getElementById("span").innerHTML = parseInt(i*100/500);
            if (i>500){
                clearInterval(timer);
            }
        },10)
	}

Progress 动态进度条

HTML

1
2
<progress value="0" max="100" id="p1"></progress>
<button onclik="myfunction()"></button>

JavaScript

1
2
3
4
function myfunction(){
  var current = $("#p1").val();
  $("#p1").val(current+1);
}

欢迎关注我的其它发布渠道