导航:首页 > 版本升级 > html5文件路径

html5文件路径

发布时间:2023-10-30 18:11:32

① html5中对文件路径的操作是绝对路径还是相对路径

不管是HTML还是HTML5都是有2种路径写法:相对路径和绝对路径:


  1. HTML相对路径(Relative Path)

用途:指定由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系

如果源文件和引用文件在同一个目录里,直接写引用文件名即可,这时引用文件的方式就是使用相对路径。

下面建立两个HTML文档info.html和index.html,用作示例,要求都是在info.html加入index.html超链接。


eg1:相对路径的简单应用

假设:info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html

index.html路径是:c:/Inetpub/wwwroot/sites/blabla/index.html

写法:<a href = "index.html">这是超连接</a>


eg2:如何表示上级目录

../表示源文件所在目录的上一级目录,http://www..com/表示源文件所在目录的上上级目录,以此类推。

假设:info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html

index.html路径是:c:/Inetpub/wwwroot/sites/index.html

写法:<a href = "../index.html">这是超连接</a>


eg3:如何表示上上级目录

假设:info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html

index.html路径是:c:/Inetpub/wwwroot/sites/wowstory/index.html

写法:<a href = "../wowstory/index.html">index.html</a>


eg3:如何表示下级目录

引用下级目录的文件,直接写下级目录文件的路径即可。

假设:info.html路径是:c:/Inetpub/wwwroot/sites/blabla/info.html

index.html路径是:c:/Inetpub/wwwroot/sites/blabla/html/index.html

写法:<a href = "html/index.html">这是超连接</a>


2.HTML绝对路径(Absolute Path)

大家都知道,在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径。

例如只要看到这个路径:c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。

类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。


HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。

② html5能获取上传获取文件绝对路径吗怎么获取

<!DOCTYPE html>
<html>
<body>
<input type="file" id='up' oninput="get()" />
<script>
function get() {
let fup = document.getElementById('up');
console.log("本地文件路径:" + fup.value)
}
</script>
</body>
</html>

③ HTML5如何获取文件路径

html通过file获取文件路径方法:

File f = new File(this.getClass().getResource("/").getPath());

System.out.println(f);

结果:

C:Documents%20and%in

获取当前类的所在工程路径;

如果不加“/”

File f = new File(this.getClass().getResource("").getPath());

System.out.println(f);

结果:

C:Documents%20and%incom est

获取当前类的绝对路径;

④ html5 打开本地文件夹

在HTML5里,从Web网页上访问本地文件系统变的十分的简单,那就是使用 API。这个File规范说明里提供了一个API来表现Web应用里的文件对象,你可以通过编程来选择它们,访问它们的信息。这个File API包括:
一个FileList序列,代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。
一个Blob接口,它代表原始二进制数据,通过Blob对象你可以访问里面的字节数据。
一个File接口,它里面存有文件的只读属性信息,像文件名,文件类型,文件数据访问的地址。
一个FileReader接口,它提供了读取一个文件的方法,和一个获取文件读取结果的事件模型。
一个FileError接口和一个FileException对象,它们用来定义这个规范中的错误产生条件。
如何使用这个例子:在这个例子中,我给出了一个画板,你可以从本地文件系统里拖拽进去一个图片,或者你也可以用文件选择框来选择图片。例子中,请只选择图片文件,我并没有添加文件过滤和文件类型检查。请记住,没有一个浏览器完全实现了HTML5,这个例子需要在支持HTML5的浏览器上运行,比如Firefox3.5以上。

实现File API的主要方法非常的简单,就像下面:


functionimagesSelected(myFiles){
for(vari=0,f;f=myFiles[i];i++){
varimageReader=newFileReader();
imageReader.onload=(function(aFile){
returnfunction(e){
varspan=document.createElement(‘span‘);
span.innerHTML=['<imgclass="images"src="',e.target.result,'"title="',aFile.name,'"/>'].join(”);
document.getElementById(‘thumbs’).insertBefore(span,null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
functiondropIt(e){
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}

选择在<td>上放置ondrop事件:


<tdalign=”left”height=”105″ondragenter=”returnfalse”ondragover=”returnfalse”ondrop=”dropIt(event)”>
<outputid=”thumbs”></output>
</td>
阅读全文

与html5文件路径相关的资料

热点内容
oppo手机怎么用数据线连接电脑 浏览:247
恒智天成备份文件在哪里 浏览:976
电脑没联网怎么拷贝文件 浏览:224
wps工具栏怎么换成中文 浏览:338
win7和xp共享文件 浏览:883
苹果4代音量键没反应 浏览:827
怎样打开tif文件 浏览:153
java下载文件zip 浏览:440
qq浏览器压缩文件怎么设密码 浏览:526
黄埔数控编程哪里好 浏览:406
mac109升级1010 浏览:691
在java的菜单如何导入文件 浏览:982
现在什么网站销量最高 浏览:760
angularjsclass定义 浏览:157
ug数控编程怎么导出程序 浏览:466
cmdb文件 浏览:710
鹎文件夹 浏览:763
网络舆情应对的基本理念是什么 浏览:433
word2007层次结构 浏览:456
去掉文件名的数字 浏览:713

友情链接