jquery détermine si le fichier contient des pièces jointes-Questions et réponses frontales-php.cn

jquery détermine si le fichier contient des pièces jointes

WBOY

Libérer： 2023-05-28 12:00:08

original

829 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript très populaire qui a été largement utilisée dans le développement Web. Elle peut fournir aux développeurs une multitude d'outils et de fonctions, simplifiant le travail de traitement des objets DOM, de gestion des événements et d'écriture d'effets dynamiques. Dans le développement Web, le téléchargement de fichiers est l’une des fonctions courantes. Avant de télécharger un fichier, il est souvent nécessaire de déterminer si l'utilisateur a sélectionné le fichier. Cet article explique comment utiliser jQuery pour déterminer si le fichier sélectionné contient une pièce jointe.

HTML

Tout d'abord, nous devons créer une balise d'entrée pour le téléchargement de fichiers, comme indiqué ci-dessous :

<form>
  <input type="file" id="upload_file">
  <button id="upload_btn">上传</button>
</form>

Copier après la connexion

#🎜🎜 #La balise input type="file" représente la zone de saisie pour le téléchargement du fichier, et id="upload_file" représente son ID, ce qui peut faciliter l'utilisation ultérieure de jQuery pour obtenir l'élément. La balise button est un bouton de soumission.

input type="file"

id="upload_file"

button

jQuery代码

接着，我们需要在jQuery中编写代码来判断用户是否已选择上传的文件并作出相应的操作。具体操作如下：

$(document).ready(function() {
  $("#upload_btn").click(function() {
    var file = $("#upload_file").prop("files")[0]; //获取上传文件
    if (typeof file === "undefined") { //如果没有选择文件
      alert("请选择上传的文件");
    } else { //否则已选择文件，进行文件上传的其他操作
      // ...
    }
  });
});

Copier après la connexion

我们在文档加载完成后使用了$(document).ready()函数包裹了整个代码块，以确保文档中的所有元素都已经加载完毕。然后，我们使用$("#upload_btn")指定了上传按钮，并为该元素添加了一个点击事件。之后，我们使用$("#upload_file").prop("files")[0]获取了用户选择的文件。其中，$("#upload_file")表示获取具有ID为upload_file的元素，.prop()则是获取该元素的属性，其中files属性是指用户选择的文件列表。由于一次只能上传一个文件，我们只获取了该列表的第一个元素，即[0]。

这时，我们通过typeof判断该元素是否为undefined。如果为undefined，则表示用户没有选择文件，我们就会使用JavaScript自带的alert()函数提示用户选择文件。否则，表示选择了文件，我们就可以在其中使用其他代码进行文件上传操作。

图片预览

在实际的开发中，我们往往需要在用户选择上传文件之后，能够实时地预览所选择的文件。这里，我们就以上传图片为例，介绍如何利用jQuery实现图片预览功能。

$(document).ready(function() {
  $("#upload_file").change(function() { //监听文件选择事件
    var file = $("#upload_file").prop("files")[0];
    if (typeof file === "undefined") return; //如果没有选择文件，则返回
    if (!/^image/(jpeg|png|gif)$/.test(file.type)) { //如果选择的不是图片格式
      alert("请选择jpg、png或gif格式的图片");
      return;
    }

    var reader = new FileReader();
    reader.onload = function(e) { //文件加载完毕后，执行回调函数
      $("#preview_img").attr("src", e.target.result); //使用jQuery修改图片的src属性
    }
    reader.readAsDataURL(file); //读取文件
  });
});

Copier après la connexion

我们为文件上传的input type="file"元素添加了一个change事件，用于监听文件的选择事件。当用户选择了文件之后，我们先使用同上的方式获取到文件，并通过正则表达式检测该文件是否为图片格式。如果不是，则使用alert()函数提示用户选择图片格式的文件。

对于选择的图片文件，我们需要使用FileReader()对象来读取其内容，这是HTML5提供的文件读取API。在文件读取完毕后，会自动触发回调函数。我们在回调函数中，通过$("#preview_img").attr("src", e.target.result)来实现更改图片的srcjQuery code

Ensuite, nous devons écrire du code dans jQuery pour déterminer si l'utilisateur a sélectionné le fichier téléchargé et effectuer une opération correspondante. L'opération spécifique est la suivante :

$(document).ready()

$("#upload_btn")

$("#upload_file").prop("files")[0]

$("#upload_file")

upload_file

.prop()

files

[0]

typeof

alert()

change

input type="file"