Javascript input.files [i] .url？

Question

我正在使用javscript来抓取用户在上传表单中选择的文件的文件名.但是,我想在他们的PC上获取文件所在的URL - 我该怎么做？

我的代码:

for (var i = 0; i < input.files.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = input.files[i].name;
    ul.appendChild(li);
}

它显示了input.files [i] .name但我不想要名称 - 我想要它所在的URL.我该怎么办？

Answer 1

好吧,我不会去窃取URL - 我想显示他们定位的文件的预览(比如,如果他们选择一个图像,我可以做它的base32并让它预览)

您无法访问/使用用户的本地文件系统路径.这意味着您无法使用其计算机上文件的真实路径进行预览.

如果您需要一个URL /路径来访问该文件,为了执行诸如显示图像预览之类的操作,您可以创建一个临时URL来让您执行此类操作.执行此操作的Javascript方法是:

window.URL.createObjectURL(myObject)(文件)

以下是使用HTML,Javascript和jQuery进行图像预览的示例...

<div id="formContainer">
    <form action="http://example.com" method="POST">
        <input id="imageUploadInput" name="imageUploadInput" type="file" accept="image/*" />
        <button id="submitButton" type="submit">Submit</button>
    </form>
</div>

<div id="imagePreviewContainer">
</div>

<script type="text/javascript">
    $("#imageUploadInput").change(function () {
        var image = this.files[0];
        $("#imagePreviewContainer").innerHTML = '';
        var imgCaption = document.createElement("p");
        imgCaption.innerHTML = image.name;
        var imgElement = document.createElement("img");
        imgElement.src = window.URL.createObjectURL(image);
        imgElement.onload = function () {
            window.URL.revokeObjectURL(this.src);
        };
        $("#imagePreviewContainer").innerHTML = ''; // clear existing content
        $("#imagePreviewContainer").append(imgCaption);
        $("#imagePreviewContainer").append(imgElement);
    });
</script>

亲自尝试一下:http://jsfiddle.net/u6Fq7/

Answer 2

由于可能存在安全隐患，您不能在 Javascript 中执行此操作；为了用户的利益，您不能这样做，因此标准没有指定访问文件 URI 的方法。

如果您确实需要此功能，则需要使用其他第三方插件（例如 Java）来执行此操作，但我不推荐这样做。