Maison > Article > interface Web > Fonction de téléchargement d'image simple en cliquant sur

Fonction de téléchargement d'image simple en cliquant sur

php中世界最好的语言original: 2018-03-08 11:14:188383parcourir

Cette fois, je vais vous proposer une fonction simple de téléchargement d'images. Quelles sont les précautions Voici les cas pratiques. jetez un oeil.

Exemple d'aperçu de téléchargement de clic d'image simple. Chrome, Firefox et d'autres navigateurs peuvent prendre en charge l'aperçu par glisser-déposer

<!DOCTYPE>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript"> 
//--从 file 域获取 本地图片 url
function getFileUrl(sourceId) {
    var url;
    if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
        url = document.getElementById(sourceId).value;
    } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    }
    return url;
}
var ss=null
var ImgType=["gif", "jpeg", "jpg", "bmp", "png","ico"];
//--将本地图片 显示到浏览器上 
function preImg(obj, targetId) { 
    ss=obj;
        if (!RegExp("\.(" +  ImgType.join("|") + ")$", "i").test(obj.value.toLowerCase())) {
            alert("选择文件错误,图片类型必须是" +  ImgType.join(","));
            this.value = "";
            return false
        }
    var sourceId=obj.id
    var url = getFileUrl(sourceId);
    var imgPre = document.getElementById(targetId);
    imgPre.src = url;
     
} 
</script>
</head>
 
<body>
    <form action="">
        <label style="position: relative;width:100px;height:100px;display: block;line-height:100px; " align="center">
             <input type="file"  accept="image/*" name="imgOne" id="imgOne" onchange="if(this.value){preImg(this, &#39;imgPre&#39;);}" style="height: 100%;width: 100%;position: absolute;z-index: 9;left: 0;right: 0;opacity: 0;"/>
             <img id="imgPre" src=""   style="display: block;position: absolute;width:100%;height:100%;border: 1px solid #999;"/>
             上传图片
        </label> 
    </form>
</body>
 
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le. Site Web chinois PHP !

Lecture connexe :

Explication détaillée de la directive ng-bind-html d'angularJS

Pourquoi le front et les back-ends doivent être écrits séparément

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

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

Article précédent：JS peut-il capturer la vignette vidéo balisée d'une vidéo ?Article suivant：JS peut-il capturer la vignette vidéo balisée d'une vidéo ?

Articles Liés

Voir plus