网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JavsScrpt实现上传图片预览功能，兼容各大浏览器
内容
    本上传功能的实现采用iframe，这里主要写的是实现图片未上传时的实时预览功能，即在未上传图片前可看到该选择图片。兼容IE6\7\8\9、chrome、opera、firefox，不兼容safari，IE9以上版本未测试。
    代码片段一：
    <script language="javascript">
    function InitImageObj(fileObj, p_doma, p_domg, p_domd){
    var allowExtention = ".jpg,.jpeg,.bmp,.gif,.png";
    var doma = parent.document.getElementById(p_doma);
    var domg = parent.document.getElementById(p_domg);
    var domd = parent.document.getElementById(p_domd);
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if(allowExtention.indexOf(extention)>-1){
    if (browserVersion.indexOf("MSIE")>-1){
    domd.innerHTML = "";
    fileObj.select();
    domd.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    domd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileObj.value;
    doma.href = fileObj.value;
    }else if(browserVersion.indexOf("FIREFOX")>-1){
    var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
    if(firefoxVersion<7){
    doma.href = fileObj.files[0].getAsDataURL();
    domg.src = fileObj.files[0].getAsDataURL();
    }else{
    doma.href = window.URL.createObjectURL(fileObj.files[0]);
    domg.src = window.URL.createObjectURL(fileObj.files[0]);
    }
    }else if(fileObj.files){
    if(typeof FileReader !== "undefined"){
    var reader = new FileReader();
    reader.onload = function(e){
    doma.href = e.target.result;
    domg.src = e.target.result;
    }
    reader.readAsDataURL(fileObj.files[0]);
    }else if(browserVersion.indexOf("SAFARI")>-1){
    alert("图片预览暂时不支持safari浏览器!");
    return;
    }
    }else{
    alert("你的浏览器不支持图片预览!");
    return;
    }
    }else{
    fileObj.value="";
    if(browserVersion.indexOf("MSIE")>-1){
    fileObj.select();
    document.selection.clear();
    }
    fileObj.outerHTML=fileObj.outerHTML;
    alert("仅支持"+allowExtention+"为后缀名的文件!");
    return;
    }
    }
    </script>
    代码片段二（CSS）：
    .imgfix{padding-left:0; [;padding-left:2px;]; _padding-left:0;}
    .iframefix{_padding-left:0px;}
    .fontfix{font-weight: normal !important;}
    .ie6fix{display:inline-block; _zoom:1; _display:inline;}
    .imgdiv{display:inline-block; [;padding-left:2px;];}
    代码片段三：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <script language="javascript">
    function InitImageObj(fileObj, p_doma, p_domg, p_domd){
    var allowExtention = ".jpg,.jpeg,.bmp,.gif,.png";
    var doma = parent.document.getElementById(p_doma);
    var domg = parent.document.getElementById(p_domg);
    var domd = parent.document.getElementById(p_domd);
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if(allowExtention.indexOf(extention)>-1){
    if (browserVersion.indexOf("MSIE")>-1){
    domd.innerHTML = "";
    fileObj.select();
    domd.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    domd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileObj.value;
    doma.href = fileObj.value;
    }else if(browserVersion.indexOf("FIREFOX")>-1){
    var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
    if(firefoxVersion<7){
    doma.href = fileObj.files[0].getAsDataURL();
    domg.src = fileObj.files[0].getAsDataURL();
    }else{
    doma.href = window.URL.createObjectURL(fileObj.files[0]);
    domg.src = window.URL.createObjectURL(fileObj.files[0]);
    }
    }else if(fileObj.files){
    if(typeof FileReader !== "undefined"){
    var reader = new FileReader();
    reader.onload = function(e){
    doma.href = e.target.result;
    domg.src = e.target.result;
    }
    reader.readAsDataURL(fileObj.files[0]);
    }else if(browserVersion.indexOf("SAFARI")>-1){
    alert("图片预览暂时不支持safari浏览器!");
    return;
    }
    }else{
    alert("你的浏览器不支持图片预览!");
    return;
    }
    }else{
    fileObj.value="";
    if(browserVersion.indexOf("MSIE")>-1){
    fileObj.select();
    document.selection.clear();
    }
    fileObj.outerHTML=fileObj.outerHTML;
    alert("仅支持"+allowExtention+"为后缀名的文件!");
    return;
    }
    }
    </script>
    </head>
    <style>
    td{font-size:12px;}
    </style>
    <body bgcolor="#EFF3FF" leftmargin="0" topmargin="0">
    <table cellpadding="0" cellspacing="0" width="480px" height="25px">
    <form name="form1" enctype="multipart/form-data" method="post" action="upPicPost.php" onsubmit="if (document.all('fileimage').value==''){alert('请选择图片');return false;}else{this.submitUpload.disabled=true;return true;}">
    <tr>
    <td>
    <input type="file" name="fileimage" onchange="InitImageObj(this,'uploadpic_a','uploadpic_g', 'uploadpic_d');">
    <input type="submit" name="submitUpload" value="上传">
    </td>
    </tr>
    </form>
    </table>
    </html>
    代码片段四：
    <td>
    <input type="text" name="imgs" id="uploadpic_i" size="50" value="" />
    <br />
    <a id="uploadpic_a" href="/def.jpg" target="_blank">
    <div id="uploadpic_d">
    <img id="uploadpic_g" src="/def.jpg" target="blank" width="110px" height="80px" />
    </div>
    </a>
    <iframe id="UploadFiles" src="/UpPic.php" frameborder="0" scrolling="no" width="600px" height="25px"></iframe>
    </td>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/21 14:57:19