Fonction de téléchargement d'image simple en cliquant sur-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-08 11:14:18

original

8355 Les gens l'ont consulté

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>

Copier après la connexion

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!