Question

我试图在文件上传到服务器之前构建文件预览功能。

我坚持从用户的计算机而不是服务器读取文件的问题

我正在使用jquery Fileupload来激活更改功能上的文件处理

  return $('#new_order_file').fileupload({
    change: function(e, data) {
        return $.each(data.files, function(index, file) {
            read_file(file);
            console.log(file)
        });
    },
  });

日志提供文件 - 名称，大小，类型， proto 和LastmodifiedDate

然而，这部分对我来说很棘手，我知道我必须使用FileReader()，但我不知道如何

function read_file(f){
    var reader = new FileReader();
    reader.onload = function(e) {
        $('#CO-show-model').css('display', 'block');
        loaded(f.name, e.target.result);
    };
    reader.readAsArrayBuffer(f);
}

接下来，加载的函数用于使用three.js

显示文件模型

function loaded(file) {
    var uploaded_file = file // gives 404
    // var uploaded_file = './stl/test-file.stl' // ASCII test
}

功能本身很好，我用一个测试文件的硬编码路径测试它。但问题是它在服务器上。现在，脚本为http://example.com/filename.stl提供了404，这是真的，因为我在那里传递了file.name。如果我只是通过file，则会为http://example.com/[object%20File]

提供404

编辑1： 我尝试过建议ReadAsDataUrl，但似乎是three.js不支持它。此外，FileReader（）似乎没问题

Answer 1

您的file是一个对象，因此您必须从中获取正确的属性。看看Filereader Mozilla documentation

Answer 2

这是一项安全功能。浏览器不会为您上传的文件提供实际的本地URL。

请参阅How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

编辑：也许您正在寻找的是这个问题？ What is the preferred method for loading STL files in Three.js

如何使用jQuery Fileupload获取用户type =“file”的完整路径

2 个答案: