JS获取自身所在文件的路径

 很多时候我们都需要在js文件中获取该文件的详细路径,以便根据其他文件与该js的相对位置计算并设置其他一些文件如图片或样式或脚本的目录路径。我们一般都这样做:

     假设外部js文件的文件名为:test.js,则在test.js中都这样写:

var js=document.scripts;
var jsPath;
for(var i=0;i<js.length;i++){
 if(js[i].src.indexOf("test.js")>-1){
   jsPath=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);
 }
}
alert(jsPath);

     或者为了提高效率,这样写

var js=document.scripts;
var jsPath;
for(var i=js.length;i>0;i--){
 if(js[i-1].src.indexOf("test.js")>-1){
   jsPath=js[i-1].src.substring(0,js[i-1].src.lastIndexOf("/")+1);
 }
}
alert(jsPath);



这种思路很清晰,根据文件名获取引用的文件的src属性并进行判断截取即可。

但这种办法有以下两个缺点:
1、需要遍历页面的js文件,有时可能效率会比较低。
2、如果页面中出现目录不同的重名的js文件则可能判断错误。

其实我们可以有更简单的办法来准确获取路径,这是在一次js测试突然发现并幡然醒悟的。

var js=document.scripts;
js=js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);
alert(js);




直接使用js.length?这会正确吗?
其实仔细想想,由于判断路径的js代码一般都直接放在js文件中而不是函数中,所以当加载该js文件时会立即执行其中的语句,而执行此语句时所获取到的js文件数目正好是js.length-1,因为页面后面的js文件还没有加载,所以该处的js文件获取的数目并不是页面所有的js文件的数目。这样一来,获取路径就无需再遍历了,而且文件判断也无需文件名,判断更加准确(js.length-1永远都是其文件本身)。

补充: 使用时发现当引入的文件路径是这样的

<script language="Javascript" src="C:\Documents and Settings\XmlPC\html\calendar\AX_Encoder.js"></script>

没有用 /  而用\ 时,上面的方法就行不通了,而且改变为lastIndexOf("\\")也不行,找到的解决办法是:

var js=document.scripts;
var jsPath;
for(var i=js.length;i>0;i--){
 if(js[i-1].src.indexOf("AX_Encoder.js")>-1){
 if(js[i-1].src.lastIndexOf("\\")<0){
 jsPath=js[i-1].src.substring(0,js[i-1].src.lastIndexOf("/")+1);
 }else{
 jsPath=js[i-1].src.substring(0,js[i-1].src.lastIndexOf("\\")+1);
 }
 break;
 }
}
 alert("jsPath"+jsPath);

这样就不论是 \ 还是 / 都可以取到正确路径,同时需要注意JS的文件名不要重复或被包含,起个特殊的文件名就OK了。

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是SWFUpload?   SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点   * 可以同时上传多个文件;   * 类似AJAX的无刷新上传;   * 可以显示上传进度;   * 良好的浏览器兼容性;   * 兼容其他JavaScript库 (例如:jQuery, Prototype等);   * 支持Flash 8和Flash 9;   SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。   在使用SWFUpload之前,请确认你具备一定的JavaScript和DOM知识。在实际开发中,大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。 [编辑本段]文档中文翻译   http://www.v-sky.com/doc/swfupload/v2.1.0/Documentation.html [编辑本段]效果演示   * Classic Form Demo http://demo.swfupload.org/formsdemo ;   * Features Demo http://demo.swfupload.org/featuresdemo ;   * Application Demo http://demo.swfupload.org/applicationdemo ;   * v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ; [编辑本段]选择合适的Flash控件   在发行包(SWFUpload v2)中含有2个版本的Flash控件(swfupload_f8.swf 与wfupload_f9.swf),其中第一个版本拥有最佳的兼容性,但是为此损失了部分功能;而第二个版本提供了一些附加的功能但是损失了兼容性。 [编辑本段]SWFUpload的初始化与配置   首先,在页面中引用SWFUpload.js ,如      然后,初始化SWFUpload ,如   var swfu;   window.onload = function () {   swfu = new SWFUpload({   upload_url : "http://www.swfupload.org/upload.php",   flash_url : "http://www.swfupload.org/swfupload_f9.swf", file_size_limit : "20480"   });   };   以下是一个标准的SWFUpload初始化设置所需的参数,你可以根据需要自己进行删减:   {   upload_url : "http://www.swfupload.org/upload.php", 处理上传请求的服务器端脚本URL   file_post_name : "Filedata", 是POST过去的$_FILES的数组名   post_params : {   "post_param_name_1" : "post_param_value_1",   "post_param_name_2" : "post_param_value_2",   "post_param_name_n" : "post_param_value_n"   },   file_types : "*.jpg;*.gif", 允许上传的文件类型   file_types_description: "Web Image Files", 文件类型描述   file_size_limit : "1024", 上传文件体积上限,单位MB   file_upload_limit : 10, 限定用户一次性最多上传多少个文件,在上传过程中,该数字会累加,如果设置为“0”,则表示没有限制   file_queue_limit : 2, 上传队列数量限制,该项通常不需设置,会根据file_upload_limit自动赋值   fl
### 回答1: JavaScript无法直接获取input file的文件路径,因为出于安全考虑,浏览器不允许JavaScript访问本地文件系统。但是可以通过以下方式获取文件名: 1. 使用input元素的value属性获取文件名,例如: ``` var fileName = document.getElementById("fileInput").value; ``` 2. 使用File API获取文件名,例如: ``` var file = document.getElementById("fileInput").files[0]; var fileName = file.name; ``` 注意:以上方法只能获取文件名,无法获取文件路径。 ### 回答2: 在JavaScript中获取input file文件路径需要使用File API,具体步骤如下: 1. 获取input元素 首先需要获取用于选择文件的input元素,可以使用document.getElementById()或jQuery等方法获取。例如: HTML代码: ``` <input type="file" id="file"> ``` JavaScript代码: ``` var input = document.getElementById('file'); ``` 2. 监听change事件 在input元素选择文件后,将触发change事件。需要通过监听此事件来获取文件对象并读取文件内容。例如: JavaScript代码: ``` input.addEventListener('change', function() { var file = input.files[0]; if (file) { // 执行文件处理操作 } }); ``` 在上述代码中,input.files[0]代表选择的文件对象,可以获取文件名、大小等信息。 3. 读取文件内容 如果需要读取选择的文件内容,可以使用FileReader对象。例如: JavaScript代码: ``` var fileReader = new FileReader(); fileReader.readAsText(file); // 以文本形式读取文件内容 fileReader.onload = function() { var content = fileReader.result; // 文件内容 }; ``` 在上述代码中,fileReader.readAsText(file)表示以文本形式读取文件内容。可以使用fileReader.readAsDataURL(file)以base64编码形式读取文件内容。在读取成功后,fileReader.result属性包含文件内容。 4. 获取文件路径 由于出于安全原因,浏览器不允许JavaScript访问文件路径。但是可以通过File API提供的URL.createObjectURL()方法生成blob URL来获取文件路径。例如: JavaScript代码: ``` var fileURL = URL.createObjectURL(file); ``` 在上述代码中,fileURL即为生成的文件blob URL,可以用于预览或下载文件。 总结: 通过以上步骤,即可在JavaScript中获取input file文件路径和内容。需要注意的是,在使用完文件后,需要及时调用URL.revokeObjectURL()方法释放blob URL。 ### 回答3: JavaScript 获取 input file 文件路径需要通过 File API 实现,具体步骤如下: 1. 获取 input[file] 元素 通过 `document.querySelector` 或 `document.getElementById` 方法获取包含文件选择框的 input 元素。 ``` let fileInput = document.querySelector('input[type=file]'); ``` 2. 监听文件选择事件 通过 `addEventListener` 方法为该 input 元素注册 change 事件监听器。在该事件的回调函数中,获取选中的文件对象。 ``` fileInput.addEventListener('change', function() { let file = fileInput.files[0]; console.log(file.name); }); ``` 3. 获取文件路径 获取文件路径也需要使用 File API 中的 `FileReader` 对象。通过 `FileReader.readAsDataURL()` 方法读取文件数据并返回 data url,其中包含文件路径。读取文件是异步操作,在回调函数中处理获取到的文件路径。 ``` fileInput.addEventListener('change', function() { let file = fileInput.files[0]; let reader = new FileReader(); reader.onload = function() { console.log(this.result); }; reader.readAsDataURL(file); }); ``` 以上就是通过 JavaScript 获取 input file 文件路径的步骤。需要注意的是,由于浏览器的安全性限制,访问本地文件路径可能存在限制。因此,在实际应用中,还需考虑相关的浏览器兼容性问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值