<!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){ //火狐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>
时间: 2024-10-12 06:41:13