简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > php教程 > PHP开发 > le corps du texte

input file上传 图片预览功能实例代码

高洛峰
Libérer： 2016-12-09 09:55:19
original
1228 Les gens l'ont consulté

input file上传图片预览其实很简单，只是没做过的感觉很神奇，今天我就扒下她神秘的面纱，其实原理真的很简单，下面通过一段代码大家都明白了。

具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" multiple id="inputs"/> //multiple(多文件上传)
<div id=&#39;dd&#39;></div>
<script>
$(document).ready(function () {
$("#inputs").change(function () {
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img src=&#39;"+reader.result+"&#39;>";
};
}
</script>
</body>
<html>
Copier après la connexion

实现上传图片直接预览，避免提交后在读取图片的冗余过程

Étiquettes associées：
input file
source：php.cn
Article précédent：jQuery实现的小图列表，大图展示效果幻灯片示例 Article suivant：jQuery通过ajax快速批量提交表单数据
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Augmenter la taille de téléchargement des fichiers dans la configuration Apache Bonjour à tous! Je suis aux prises avec ce problème de configuration car j'essaie d'augmen...
Depuis 2023-11-11 11:00:33
0
1
287
Préserver la position du curseur dans le contenu HTML modifiable lorsque le HTML interne change J'ai un div qui fait office d'éditeur WYSIWYG. Il agit comme une zone de texte mais y rest...
Depuis 2023-11-08 22:38:23
0
2
285
Vue js : Dépannage - Lecture de la propriété '$refs' de undefined Obtention de l'erreur Impossible de lire la propriété non définie (lecture de '$refs') mêm...
Depuis 2023-11-07 23:34:12
0
1
305
Comment déclencher un événement de focus d'entrée dans la méthode dans Vue.js ? J'ai une entrée qui utilise l'événement suivant : <b-nputclass="input"id=&quo...
Depuis 2023-10-29 23:56:42
0
2
270
Apache - Autorisations manquantes pour un composant du chemin Bien que le chemin soit correct, aucune des images de mon site Web ne se charge. Dans mes ...
Depuis 2023-10-19 08:52:40
0
2
175
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！