html提取本地xml或者json文件问题

Posted 2023-03-27

最近在学html和javascript的知识。
需要用到本地文件来存数据，可是试了好多方法，一直不成功：
使用$,getJson(url,function())获取json文件,会提示“XMLHttpRequest cannot load file:--------. Received an invalid response. Origin 'null' is therefore not allowed access.”
使用window.XMLHttpRequest()的send()获取xml文件,会提示"XMLHttpRequest cannot load file:------. Cross origin requests are only supported for HTTP."
求解决过这个问题的大神们告知！

给chrome添加启动参数：--allow-file-access-from-files

chrome是不允许读取本地文件的，所以如果你要进行测试，可以在本地搭一个测试环境，可以使用wamp套件进行安装，或者换IE测试 参考技术A http://blogs.msdn.com/b/ieinternals/archive/2009/07/23/the-ie8-native-xmlhttprequest-object.aspx
http://bbs.csdn.net/topics/390053793
Internet Explorer's native XMLHTTPRequest object permits requests to HTTP and HTTPS only; requests to FILE, FTP, or other URI schemes are blocked. Update: IE10 XHR supports CORS.
IE只能以网络协议方式显示XML，FILE、FTP及其他URI方式被屏蔽。 参考技术B 路径给的不对，建议用绝对路径。追问

路径都有对比过没有问题。

追答

那就是权限的问题了。
给你看个资料，你再试试看
http://www.cnblogs.com/accessking/archive/2012/05/12/2497000.html

追问

里面没说chrome和Firefox怎么解决这个问题啊。

获取本地json或者yaml等文件内容，展示在编辑框

iview框架可以使用upload组件可以传文件，但是无法读取文件内容

目前后台不需要传文件，只需传文件内容以字符串形式，可以使用HTML5中的FileReader对象

<input type="file" class="file" @change="tirggerFile($event)">
<Button @click="readFile">上传</Button>

上传之后

tirggerFile: function (event) 
　　　　　　　　　　//此处校验文件后缀
                var file = event.target.files[0]
                    .name; // (利用console.log输出看file文件对象) properties/xml/json/conf/config/data/ini/txt/yaml/yml/cfg 
                var num = file.split(‘.‘);
                var mun = num[num.length - 1];
                console.log(mun)
                if (mun == ‘ini‘ || mun == ‘properties‘ || mun == ‘xml‘ || mun == ‘json‘ || mun == ‘conf‘ || mun ==
                    ‘config‘ ||
                    mun == ‘data‘ || mun == ‘txt‘ || mun == ‘config‘ || mun == ‘yaml‘ || mun == ‘cfg‘) 
                    this.readFile();
                 else 
                    this.$Notice.error(
                        title: ‘请重新点击选择文件传入符合标准的文件‘,
                        duration: 2
                    );
                
            ,
            readFile() 
                let self = this;
                let fileselect = document.querySelector(‘input[type=file]‘).files[0]; //找到文件上传的元素        
                let reader = new FileReader()
                // console.log(fileselect);
                if (typeof FileReader === ‘undefined‘) 
                    alert(‘您的浏览器不支持FileReader接口‘);
                
                reader.readAsText(fileselect, ‘gb2312‘) //注意读取中文的是用这个编码，不是utf-8
                reader.onload = function () 
                    console.log(reader.result);//文件内容
                   
                
            ,

最后将获取的文件内容赋值到文本编辑框即可