简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

js上传图片预览

大家讲道理
Libérer： 2016-11-10 13:25:26
original
1245 Les gens l'ont consulté

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  
    <script type="text/javascript">  
    $(function(){  
        $(".file").change(function(){  
            var fileImg = $(".fileImg");  
            var explorer = navigator.userAgent;  
            var imgSrc = $(this)[0].value;  
            if (explorer.indexOf(&#39;MSIE&#39;) >= 0) {  
                if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {  
                    imgSrc = "";  
                    fileImg.attr("src","/img/default.png");  
                    return false;  
                }else{  
                    fileImg.attr("src",imgSrc);  
                }  
            }else{  
                if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {  
                    imgSrc = "";  
                    fileImg.attr("src","/img/default.png");  
                    return false;  
                }else{  
                    var file = $(this)[0].files[0];  
                    var url = URL.createObjectURL(file);  
                    fileImg.attr("src",url);  
                }  
            }  
        })  
    })  
    </script>  
</head>  
<body>  
    <form enctype="multipart/form-date" method="post">  
        <input type="file">  
        <input type="submit">  
    </form>  
    <img  src="" alt="js上传图片预览" >  
</body>  
</html>
Copier après la connexion

Étiquettes associées：
代码片段，代码分享，PHP代码分享，Java代码分享 Ruby代码分享，Python代码分享，HTML代码分享，CSS代
source：php.cn
Article précédent：js+html实现遮罩层效果 Article suivant：js检测浏览器版本方法
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
Regrouper les résultats MySQL par ID pour effectuer une boucle J'ai une table avec des données de vol dans MySQL. J'écris un code php qui regroupera et a...
Depuis 2024-04-06 17:27:56
0
1
406
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Comment savoir quand un composant Vue est complètement initialisé ? Ainsi, dans mon composant Vue, j'ai une méthode créée de manière asynchrone et plusieurs v...
Depuis 2024-04-05 14:20:24
0
1
1442
Le titre reformulé est : La traduction anglaise des frais fractionnés d'abonnement Stripe Connect est "Frais fractionnés d'abonnement Stripe Connect". Bonjour, je construis une plate-forme pour les clients utilisant StripePHPAPI qui vend des...
Depuis 2024-04-02 20:15:22
0
1
418
Comment aligner les images en utilisant la grille CSS ? J'essaie de créer une partie d'un site Web en utilisant une grille CSS. J'essaie de faire ...
Depuis 2024-04-01 22:08:31
0
1
338
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！