|
參考了網(wǎng)絡(luò)上相關(guān)文章,，兼容個(gè)多瀏覽器，補(bǔ)充了使用框架時(shí)ie取不到路徑的解決方法,。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上傳文件</title> <style type="text/css"> #imgView {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} </style> <script type="text/javascript"> var allowExtention = ".jpg,.bmp,.gif,.png"; //,圖片允許上傳文件的后綴名 function PreviewImage(obj, imgPreviewId, divPreviewId) { var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase(); var browserVersion = window.navigator.userAgent.toUpperCase(); if (allowExtention.indexOf(extention) > -1) { document.getElementById(divPreviewId).style.display=""; if (browserVersion.indexOf("MSIE") > -1) { if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6 document.getElementById(imgPreviewId).setAttribute("src", obj.value); } else {//ie[7-8],、ie9以上 obj.select(); obj.blur(); var src = document.selection.createRange().text; var div = document.getElementById('divNewPreview'); if(src==""){ /* 如果當(dāng)前頁(yè)面放到框架如iframe里面，則在ie下src依然取到空值,， 因?yàn)閛bj.blur()之后,，file控件中原本被選中的文本將會(huì)失去選中的狀態(tài)，因此,，不能使用obj.blur(),。 可以讓當(dāng)前頁(yè)面上的其他元素，如div,，button等或者父頁(yè)面的body獲得焦點(diǎn)即可,。 注意,，如果是div，則要確保div有至少1像素的高和寬,，方可獲得焦點(diǎn),。 */ obj.select(); window.parent.document.body.focus(); //或者document.getElementById("upbtn").focus(); src = document.selection.createRange().text; } div.innerHTML = '<img id="imgView">'; var img = document.getElementById('imgView'); var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; div.innerHTML = "<div id=divhead style='width:"+img.offsetWidth+"px;height:" +img.offsetHeight+"px;"+sFilter+src+"\"'></div>"; } } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]); if (firefoxVersion < 7) {//firefox7以下版本 document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL()); } else {//firefox7.0+ document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0])); } } else if (obj.files) { //兼容chrome、火狐等,，HTML5獲取路徑 if (typeof FileReader !== "undefined") { var reader = new FileReader(); reader.onload = function (e) { document.getElementById(imgPreviewId).setAttribute("src", e.target.result); } reader.readAsDataURL(obj.files[0]); } else if (browserVersion.indexOf("SAFARI") > -1) { alert("暫時(shí)不支持Safari瀏覽器!"); } } else { document.getElementById(divPreviewId).setAttribute("src", obj.value); } } else { document.getElementById(divPreviewId).style.display="none"; } } function upload(){ var file = document.getElementById("file5").value; var extention = file.substring(file.lastIndexOf(".") + 1).toLowerCase(); if(file==""){ alert("您還沒(méi)有選擇文件,！"); return; }else { if (allowExtention.indexOf(extention) == -1) { alert("請(qǐng)選擇"+allowExtention+"類型的文件！"); return; } } form5.submit(); } </script> </head> <body> <form name="form5" id="form5" method="post" action="../uploadFileServlet" enctype="multipart/form-data"> <div > <div style="margin-bottom:20px;"> <span style="font-family:微軟雅黑; font-size:16px; color:red">請(qǐng)選擇文件：</span> <input type="file" name="file5" id="file5" onchange="PreviewImage(this,'imgView','divNewPreview')"/> <input type="button" value="上傳" onclick="upload();" id="upbtn" style="width:80px;height:30px;font-size:20px;background-color:#69b3f2;border: 0 none;color:#fff ;cursor:pointer"> </div> <div id="divNewPreview" style="padding-left:50px; display:none"> <img id="imgView" src="" alt="" /> </div> </div> </form> </body> </html> |
|
|
來(lái)自： 空山苦水禪人 > 《JavaScript》
