前端圖片上傳前預覽

時間  2019-11-30
標籤 前端 圖片 上傳 預覽 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html>
<head>
    <title>圖片上傳預覽</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript"> $(function() { $("#file_upload").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#preview"); if(fileObj && fileObj.files && fileObj.files[0]){ dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr('src',dataURL); }else{ dataURL = $file.val(); // $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")'); // 或var imgObj = document.getElementById("preview"); // imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")";
                var imgObj = document.getElementById("preview"); // 兩個坑: // 一、在設置filter屬性時，元素必須已經存在在DOM樹中，動態建立的Node，也須要在設置屬性前加入到DOM中，先設置屬性在加入，無效； // 二、src屬性須要像下面的方式添加，上面的兩種方式添加，無效；
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } }); }); </script>
</head>
<body>
<div id="demo">
    <input id="file_upload" type="file" />
    <div class="image_container">
        <img id="preview" style="width: 300px;height: 300px;">
    </div>
</div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <title>圖片上傳預覽</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript"> function checkType(upload){ var image = document.getElementById(upload).value; var extStart = image.lastIndexOf("."); var ext = image.substring(extStart, image.length).toUpperCase(); if ( ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") { alert("圖片限於png，gif，jpeg，jpg格式！"); return false; } return true; } function setImagePreview(upload,preview) { if(checkType(upload)){ var docObj=document.getElementById(upload); var imgObjPreview=document.getElementById(preview); imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '160px'; imgObjPreview.style.height = '120px'; if(docObj.files && docObj.files[0]){ try{ imgObjPreview.src = docObj.files[0].getAsDataURL(); }catch(e){ //火狐7以上版本不能用上面的getAsDataURL()方式獲取，須要如下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } }else{ //IE下，使用濾鏡
                docObj.select(); var imgSrc = document.selection.createRange().text; //圖片異常的捕捉，防止用戶修改後綴來僞造圖片
                try{ imgObjPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObjPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; }catch(e){ alert("您上傳的圖片格式不正確，請從新選擇!"); return false; } document.selection.empty(); } return true; } } </script>
</head>
<body>
<div id="demo">
    <input id="file_upload" type="file" onchange="setImagePreview('file_upload','preview')" />
    <div class="image_container">
        <img id="preview">
    </div>
</div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程