问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js怎么实现修改本地文件

头像
ECEPA_禧戏
    55416111151

    首先不使用IE的对象。我的思路是用上传的方法上传文件，让其上传到本地，而不是上传到后台，然后用js读取上传的文件和修改，最后再下载下来，不知这个方法行不行。或者有没其他方法。另外不是很了解从<input file="">到后台接收文件之间发生了什么事

    javascripthtml
    阅读 15.5k
    2 个回答
    得票最新
    社区维基
    1

    参考：http://segmentfault.com/q/101...

    读取的话用FileReaderAPI应该没有问题，存储的话可以使用下面的代码调用浏览器的另存为下载下来。如果要做到正常的覆盖保存这种的话应该得写成插件的形式了吧。

    function fake_click(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
        );
    obj.dispatchEvent(ev);
}

function export_raw(name, data) {
    var urlObject = window.URL || window.webkitURL || window;

    var export_blob = new Blob([data]);

    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    fake_click(save_link);
}
    头像
    whosesmile
      2k3410

      第一次碰到这种需求，好奇找资料，参考公子的答案，写了个DEMO，兼容确实无解，你需要借助后台上传做中转了那样。

      javascript<!doctype>
<html>
  <body>
    <input type="file" name="file" id="file" />
    <textarea cols="50" rows="20"></textarea>
    <button>保存</button>
    <script type="text/javascript">
      var name = '未命名';
      var input = document.getElementById('file');
      var textarea = document.getElementsByTagName('textarea')[0];

      input.addEventListener('change', function () {
        var files = document.getElementById('file').files;
        var file = files.item(0);
        name = file.name;
        var reader = new FileReader();
        reader.onloadend = function (e, content) {
          textarea.value = e.target.result;
        };
        reader.readAsText(file, 'utf-8');
      });

      function fake_click(obj) {
        var ev = document.createEvent("MouseEvents");
        ev.initMouseEvent(
          "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
        );
        obj.dispatchEvent(ev);
      }

      document.getElementsByTagName('button')[0].addEventListener('click', function(e) {
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([textarea.value]);
        var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        fake_click(save_link);
      });
    </script>
  </body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题