標籤:htm url substring microsoft img font gif mic div
<!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"); // 兩個坑: // 1、在設定filter屬性時,元素必須已經存在在DOM樹中,動態建立的Node,也需要在設定屬性前加入到DOM中,先設定屬性在加入,無效; // 2、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){ //Firefox7以上版本不能用上面的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>
前端圖片上傳前預覽