首頁 > web前端 > js教程 > 簡易的圖片點擊上傳功能

簡易的圖片點擊上傳功能

php中世界最好的语言
發布: 2018-03-08 11:14:18
原創
8396 人瀏覽過

這次帶給大家簡易的圖片點擊上傳功能, 做出簡易的圖片點擊上傳功能注意事項有哪些,以下就是實戰案例,一起來看一下。

簡易圖片點選上傳預覽範例。 chrome,火狐等瀏覽器 下可支援拖曳預覽 

<!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>
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

angularJS的ng-bind-html指令詳解

前後端為什麼要分開寫

以上是簡易的圖片點擊上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板