【问题标题】:Download file from input type file javascript从输入类型文件 javascript 下载文件
【发布时间】:2019-03-20 16:32:30
【问题描述】:

我正在创建一个网络应用程序,我希望我的用户在其中下载他们在input type="file" 中选择的文件

这是我的html

<input type='file' id='fieldID' onchange="return ValidateFileUpload('fieldID')"/>

现在是我的 JS

function ValidateFileUpload(ID) {

    var fuData = $('#' + ID);
    var FileUploadPath = fuData[0].value;

    //To check if user upload any file
    if (FileUploadPath == '') {

    } else {
        var Extension = FileUploadPath.substring(
            FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

        //The file uploaded is an image

        if (Extension == "gif" || Extension == "png" || Extension == "bmp"
            || Extension == "jpeg" || Extension == "jpg" || Extension == "pdf" || Extension == "ppt" || Extension == "pptx" || Extension == "doc" ||Extension == "docx"
            || Extension == "xls" || Extension == "xlsx") {

            var file = $('#' + ID)[0].files[0];
            var filename = $('#' + ID)[0].files[0].name;
            var blob = new Blob([file]);
            var url = URL.createObjectURL(blob);

            $(this).attr({ 'download': FileUploadPath, 'href': url });
            filename = "";
        }

        //The file upload is NOT an image
        else {
            alert("Document is not the correct format: pdf,ppt,pptx,doc,docx,xls,xlsx and txt are the only document types allowed for upload. Please try again.");

        }
    }
}

但我无法下载所选文件,请您帮我下载文件上传中选择的文件

【问题讨论】:

  • 下载前需要上传服务器
  • 您是否要将此文件上传到您的服务器?您当前的术语没有意义,因为它暗示您希望用户下载他们已经拥有的文件。

标签: javascript jquery file-upload download


【解决方案1】:

这应该可以解决问题。

<script>
    function DownloadFile() {
        file = input.files[0];
        fr = new FileReader();
        fr.readAsDataURL(file);

        var blob = new Blob([file], { type: "application/pdf" });

        var objectURL = window.URL.createObjectURL(blob);
        console.log(objectURL);

        if (navigator.appVersion.toString().indexOf('.NET') > 0) {
            window.navigator.msSaveOrOpenBlob(blob, 'myFileName.pdf');
        } else {
            var link = document.createElement('a');
            link.href = objectURL;
            link.download = "myFileName.pdf";
            document.body.appendChild(link);
            link.click();
            link.remove();
        }
    }
</script>

<input type="file" id="input" />
<input type='button' value='Download' onclick='DownloadFile();'>

检查:https://utilitiesforprogrammers.blogspot.com/2019/01/download-file-from-input-type-file.html

【讨论】:

  • 嗨@Nuno 我尝试这个例子。我读了理论上它应该工作的代码,但它对我不起作用你知道为什么它不起作用吗?我也尝试了 URL 中的 href 链接,但它不起作用
  • 输入 id 错误(我的错)。我还更改了脚本并添加了代码以在 IE 中工作。
  • 我使用的是 firefox 67.0.4 (64-bit) 它不工作,在 IE 中,我尝试上传 pdf 并尝试打开它。它没有打开它说文件中有一些错误
  • 问题是在 JS 中的 firefox 中点击 ... 这样做: ... link.download = "myFileName.pdf"; document.body.appendChild(link);链接.click();链接.删除(); ...我也修改了代码:)
猜你喜欢
  • 2012-12-21
  • 2016-09-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-02-16
  • 2017-07-17
  • 1970-01-01
  • 2012-10-03
相关资源
最近更新 更多