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

html-css024

html5中对文件路径的操作是绝对路径还是相对路径,第1张

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

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.baidu.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)在网页制作中指带域名的文件的完整路径。

,首先要判断拖入的文件是否符合要求,包括图片类型、大小等,然后获取本地图片信息,实现预览,最后上传。

$(function(){

接上部分

var box = document.getElementById('drop_area')//拖拽区域

box.addEventListener("drop",function(e){

e.preventDefault()//取消默认浏览器拖拽效果

var fileList = e.dataTransfer.files//获取文件对象

//检测是否是拖拽文件到页面的操作

if(fileList.length == 0){

return false

}

//检测文件是不是图片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是图片!")

return false

}

//拖拉图片到浏览器,可以实现预览功能

var img = window.webkitURL.createObjectURL(fileList[0])

var filename = fileList[0].name//图片名称

var filesize = Math.floor((fileList[0].size)/1024)

if(filesize>500){

alert("上传大小不能超过500K.")

return false

}

var str = "<img src='"+img+"'><p>图片名称:"+filename+"</p><p>大小:"+filesize+"KB</p>"

$("#preview")(str)

//上传

xhr = new XMLHttpRequest()

xhr.open("post", "upload.php", true)

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")

var fd = new FormData()

fd.append('mypic', fileList[0])

xhr.send(fd)

},false)

})