最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【基本解决】js加载本地文件

JS crifan 7272浏览 0评论

【背景】

折腾:

【基本解决】js中如何加载html内容

期间,可以把问题转换为:

用js,去加载,读取本地的文件。

 

【折腾过程】

1.搜:

js load local file

js read local file

参考:

How to open a local disk file with Javascript? – Stack Overflow

试试:

    function readSingleFile(e) {
      var file = e.target.files[0];
      if (!file) {
        return;
      }
      var reader = new FileReader();
      reader.onload = function(e) {
        var contents = e.target.result;
        displayContents(contents);
      };
      reader.readAsText(file);
    }
    function displayContents(contents) {
      //var element = document.getElementById('file-content');
      //element.innerHTML = contents;
     
      var kindeditor = window.editor;
      kindeditor.html(contents);
    }
    function editSavedGoodsContent()
    {
        console.log("into editSavedGoodsContent");
   
        var kindeditor = window.editor;
   
   
        // 加载之前已保存的页面的HTML内容
        var savedHtmlHref = "previous_saved_page.html";
    
        readSingleFile(savedHtmlHref);
    }

结果:

TypeError: e.target is undefined

use code but TypeError e.target is undefined

2.参考:

how to use javascript in html to read txt file and display it ?

->

How to read and write a file using javascript?

试试:

        loadedHtml = fread(savedHtmlHref,flength(savedHtmlHref));
        console.log("loadedHtml=" + loadedHtml);

结果:

ReferenceError: fread is not defined

-》

貌似js中没有fread。。

3.最后用

js的FileReader

基本是可以了。

4.然后想要去掉Input点击,所以去搜:

js FileReader example

参考:

Reading Files Using The HTML5 FileReader API | Treehouse Blog

FileReader – Web API Interfaces | MDN

不过最后还是不去掉了。

因为后面如果去掉input的file,改为直接赋值:

var savedHtmlHref = "previous_saved_page.html";

则会报错,说file不是object。

所以算了,还是用这套代码吧。

 

【总结】

最终是用:

<script>
    function readSingleFile(e) {
      var file = e.target.files[0];
      if (!file) {
        return;
      }
      var reader = new FileReader();
      reader.onload = function(e) {
        var contents = reader.result;
        displayContents(contents);
      };
      reader.readAsText(file);
    }
    function displayContents(contents) {
      var kindeditor = window.editor;
      kindeditor.html(contents);
    }
    document.getElementById('editSavedGoodsContent')
      .addEventListener('change', readSingleFile, false);
 
    function submitGoodsContent()
    {
        var kindeditor = window.editor;
   
        // 取得HTML内容
        html = kindeditor.html();
        console.log(html);
    }
</script>
<div class="easyui-panel" style ="height: 100%;" title="编辑商品">
    <div>
        <p>商品名:<input type="text" value="新产品名1" id="goodsName" name="goodsName"/></p>
    </div>
    <form>
        <textarea name="easyui_editor" id="easyui_editor" class="easyui-kindeditor" style="width: 100%; height: 200px; ">在此输入新产品的介绍内容</textarea>
    </form>
    <input type="file" id="editSavedGoodsContent" />
    <button onclick="submitGoodsContent()">提交当前页面</button>
</div>

实现了:

可以点击“浏览”按钮后,选择需要上传的文件:

click browser for choose file to upload

点击所选html文件后,KindEditor中的内容,就加载显示所选html的内容了:

对应的 未选择文件 也变成 该所选文件名了:

kindeditor show loaded html content and name show

如此,基本上实现了js加载本地html的效果。

转载请注明:在路上 » 【基本解决】js加载本地文件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.181 seconds, using 22.14MB memory