jquery ermittelt, ob die Datei Anhänge hat-Front-End-Fragen und Antworten-php.cn

jQuery ist eine sehr beliebte JavaScript-Bibliothek, die in der Webentwicklung weit verbreitet ist. Sie kann Entwicklern eine Fülle von Tools und Funktionen bieten und die Arbeit bei der Verarbeitung von DOM-Objekten, der Verarbeitung von Ereignissen und dem Schreiben dynamischer Effekte vereinfachen. In der Webentwicklung ist das Hochladen von Dateien eine der häufigsten Funktionen. Vor dem Hochladen einer Datei muss häufig festgestellt werden, ob der Benutzer die Datei ausgewählt hat. In diesem Artikel wird erläutert, wie Sie mit jQuery feststellen, ob die ausgewählte Datei einen Anhang hat.

HTML

Zuerst müssen wir ein Eingabe-Tag für den Datei-Upload erstellen, wie unten gezeigt:

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

Nach dem Login kopieren

#🎜🎜 #Das input type="file"-Tag stellt das Eingabefeld für den Datei-Upload dar, und id="upload_file" stellt seine ID dar, die die spätere Verwendung von jQuery zum Abrufen erleichtern kann das Element. Das button-Tag ist ein Senden-Button.

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 { //否则已选择文件，进行文件上传的其他操作
      // ...
    }
  });
});

Nach dem Login kopieren

我们在文档加载完成后使用了$(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); //读取文件
  });
});

Nach dem Login kopieren

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

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

Als nächstes müssen wir Code in jQuery schreiben, um festzustellen, ob der Benutzer die hochgeladene Datei ausgewählt hat und Machen Sie eine entsprechende Operation. Der spezifische Vorgang ist wie folgt:

$(document).ready()

$("#upload_btn")

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

$("#upload_file")

upload_file

.prop()

files

[0]

typeof

alert()

change

input type="file"

alert()

FileReader()

src

$("#preview_img").attr("src", e.target.result)

Das obige ist der detaillierte Inhalt vonjquery ermittelt, ob die Datei Anhänge hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!