Comment utiliser jQuery pour demander et télécharger des fichiers-Questions et réponses frontales-php.cn

Comment utiliser jQuery pour demander et télécharger des fichiers

PHPz

Libérer： 2023-04-24 15:27:14

original

4382 Les gens l'ont consulté

Dans le développement de sites Web ou d'applications, il est parfois nécessaire de mettre en œuvre la fonction de téléchargement de fichiers. Le téléchargement de fichiers peut généralement être effectué en définissant des en-têtes de réponse pertinents côté serveur, mais jQuery peut réaliser une opération plus pratique. Cet article explique comment utiliser jQuery pour demander et télécharger des fichiers.

Utilisation de jQuery.get()

La méthode jQuery.get() est une méthode de requête GET simple grâce à laquelle vous pouvez demander des données au serveur. Lorsque vous demandez un téléchargement de fichier, vous pouvez utiliser cette méthode pour envoyer un lien de téléchargement au serveur. Une fois que le serveur a défini l'en-tête de réponse, le fichier peut être téléchargé.

Exemple de code :

$("#downloadBtn").click(function () {
    var url = "download_file.xlsx";
    $.get(url, function(data) {
        window.location.href = url;
    });
});

Copier après la connexion

Dans cet exemple de code, lorsque vous cliquez sur le bouton de téléchargement, le fichier est d'abord demandé au serveur via la méthode $.get. Après avoir obtenu le fichier avec succès, définissez le lien de téléchargement du navigateur via window.location.href. $.get方法向服务器请求文件。在成功获取文件后，通过window.location.href设置浏览器的下载链接。

使用jQuery.ajax()

jQuery.ajax()方法可以处理更为复杂的请求场景，并能够实现更为细致的控制。通常在下载时，使用$.get方法即可满足需求。但是，有时需要在下载过程中进行一些特殊的处理，比如显示下载进度、自定义请求头等。此时可以使用jQuery.ajax()来实现。

示例代码：

$("#downloadBtn").click(function () {
    var url = "download_file.xlsx";
    $.ajax({
        url: url,
        type: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = "download_file.xlsx";
            a.click();
            window.URL.revokeObjectURL(url);
        }
    });
});

Copier après la connexion

在该示例代码中，通过jQuery.ajax()方法发送GET请求，并设置响应类型为blob，表示响应数据是一个二进制流。在请求成功后，创建一个<a>标签，并使用window.URL.createObjectURL(data)方法将响应数据转换为URL地址。将<a>标签的href属性设置为URL地址，设置download属性为文件名，并调用a.click()方法来触发文件下载。最后，使用window.URL.revokeObjectURL(url)方法来释放URL对象，防止内存泄露。

需要注意的是，不同的浏览器在处理文件下载时的实现可能存在差异，可能需要根据具体场景进行适当的调整。

总结

本文介绍了使用jQuery实现文件下载的两种方法，分别是$.get()和jQuery.ajax()

$.get

blob

<a>

window.URL.createObjectURL(data)

href

<a>

download

a.click ()

window.URL.revokeObjectURL(url)