兼容火狐 IE的图片上传预览

<%@ page pageEncoding="UTF-8"%>
<%
    String basePath = request.getContextPath();
%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/online/resources/jsp/taglibs.jsp" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<link href="<%=basePath%>/css/admin.css" rel="stylesheet" type="text/css" />
<script src="<c:url value='/online/resources/js/jquery-1.7.2.min.js'></c:url>" type="text/javascript"></script>
<script type="text/javascript" src='<c:url value="/js/core/jquery.form.js"></c:url>'></script>
<script type="text/javascript" src="<c:url value='/online/resources/js/DatePicker/WdatePicker.js'></c:url>"></script>
<style type="text/css">
#preview_wrapper{
    width:160px;
    height:60px;
    border:0px solid #ccc;
}
#preview_fake{ /* 该对象用于在IE下显示预览图片 */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);    
    visibility:hidden;
}
#preview{ /* 该对象用于在FF下显示预览图片 */
    display: block;
    width:40;
    height:40;
}
</style>
<script type="text/javascript">
    $(function() {

        $("#preview_fake").hide();
        var photoPath=$("#photoPath").val();
        if(photoPath!=""){
            
            $("#preview_fake").show();
        }
        $("#uploadPhoto").click(function(){
            var photoFile=$("#photoFile");
            photoFile.click();
        });
        function isEmpty(str){
            if(str==null||str.length<=0)    {
                return true;
            }else{
                return false;
                }
        }
        $("#submitButton").click(function(){
            var noBlanks=['rname','sex','credentialstype','certificateno',
            'residence','politicalaffiliation','tel','email',
            'hometown','birthday'];
            for(var i=0;i<noBlanks.length;i++){
                var tempVal=$("#"+noBlanks[i]).val();
                if(isEmpty(tempVal)){
                    alert($("#"+noBlanks[i]).attr("title"));
                    return;
                }
            }
            $("#resumeform").ajaxSubmit({
                type: 'post',  
                        url: "<c:url value='/research/saveResumeform.do'></c:url>" ,  
                        success: function(data){  
                            alert("操作成功");
                            window.parent.gotoBackPage();
                        },  
                        error: function(XmlHttpRequest, textStatus, errorThrown){  
                            alert( "操作失败，请填写正确信息");  
                        }  
            });
        })
    });
</script>


<script type="text/javascript">
$(function(){
    var attachFileName=$("#attachFileName").val();
    if(attachFileName!=""){
        $("#fileSpan").html(getFileHtml(attachFileName));
        $("#addAttachfile").attr("value","修改附件");
    }
})
function getFileHtml(fileName){
    return "文件名:<span style='color:green;'>"+fileName +"</span><span style='color:red;font-weight:bold;cursor:pointer;' title='清除' id='cleanFile' onclick='javascrpit:cleanFile();'> X</span>";
}

function cleanFile(){
    $("#fileSpan").html("");
    $("#addAttachfile").attr("value","添加附件");
    $("#isAttachFileChanged").val("0");
}
//上传文件
function onUploadFileChange(sender,file){
    //单纯只为了文件名
    var filePath = sender.value;
    var fileExt = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    var fileName=filePath.substring(filePath.lastIndexOf("\\")+1,filePath.length);
    if(fileExt==""){
        $("#preview_fake").hide();
        return;
    }
    if(file=='file'){
        var html=getFileHtml(fileName);
        $("#fileSpan").html(html);
        $("#addAttachfile").attr("value","修改附件");
        $("#isAttachFileChanged").val("1");
        return;
    }
    if(!checkFileExt(fileExt)){
        alert("您上传的文件不是图片,请重新选择！");
        return;
    }
    $("#photo").val("1");
    $("#preview_fake").show();
    var objPreview = document.getElementById( 'preview' );
        objPreviewFake = document.getElementById( 'preview_fake' );
  //      objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
    try{
        //先采用HTML5方法
        if(typeof FileReader !== 'undefined'){
            var file = sender.files[0];
            var fileSize = file.fileSize || file.size;
            if(checkFileSize(fileSize)){
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    objPreview.src = this.result;
                }
            }
        }else if( sender.files){
            //非IE，不支持HTML5方法
            var file = sender.files[0];            
            fileSize = file.fileSize;
            if(checkFileSize(fileSize)){
                filePath = file.getAsDataURL();
                objPreview.src = filePath;
            }

        }else if( objPreviewFake.filters ){
            // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
            //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
            // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
            sender.select();
            var imgSrc = document.selection.createRange().text;
            objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
       //     objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;    
            autoSizePreview( objPreviewFake,40, 40 );
            objPreview.style.display = 'none';
            //读取图片文件大小        
            var sh = setInterval(function(){
                    var img = document.createElement("img");
                    img.src = imgSrc;
                    fileSize = img.fileSize;
                    if (fileSize > 0){
                        checkFileSize(fileSize);
                        clearInterval(sh);
                    }
                    img = null;
                }
            ,100);    
        }
    }catch(e){
         alert(e);
    }    
}
//检测文件类型
function checkFileExt(ext){
    if (!ext.match(/.jpg|.gif|.png|.bmp/i)) {
        return false;
    }
    return true;
}
//检测文件大小
function checkFileSize(fileSize){
    if(fileSize > 1024*1024){
        alert("子函数：您上传的文件大于1M,请重新选择！");
        return false;
    }
    return true;
}
//预览
function onPreviewLoad(sender){
    autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}
//居中显示
function autoSizePreview( objPre, originalWidth, originalHeight ){
    var zoomParam = clacImgZoomParam( 40, 40, originalWidth, originalHeight );
    objPre.style.width = zoomParam.width + 'px';
    objPre.style.height = zoomParam.height + 'px';
    objPre.style.marginTop = zoomParam.top + 'px';
    objPre.style.marginLeft = zoomParam.left + 'px';

}
//图像缩放
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
    var param = { width:width, height:height, top:0, left:0 };
    if( width>maxWidth || height>maxHeight ){
        rateWidth = width / maxWidth;
        rateHeight = height / maxHeight;
        
        if( rateWidth > rateHeight ){
            param.width =  maxWidth;
            param.height = height / rateWidth;
        }else{
            param.width = width / rateHeight;
            param.height = maxHeight;
        }
    }
    param.left = (maxWidth - param.width) / 2;
    param.top = (maxHeight - param.height) / 2;
    return param;
}
</script>
<div align="center">&nbsp;</div>
<h5 align="center" title=""><font style="font: 1.5em 幼圆; color: blue; font-weight: bold;">简历填写</font></h5>

<form action="saveResumeform.do" namespace="/research" method="post" id="resumeform" name="resumeform">
    <table class="table-info" cellpadding="0" cellspacing="1" width="98%" align="center">
        <tr>
            <th width="12%" >姓名<span style='color:red' title='必填'>*</span></th>
            <td colspan="1">
                <input type="hidden" name="resumeform.resumeformid" id="resumeformid" value="${defaultResume.resumeformid}"/>
                <input type="text" name="resumeform.name"  title="姓名不能为空" id="rname" value="${defaultResume.name}"/>
            </td>
            <th width="12%" rowspan="2">个人照片</th>
            <td rowspan="2">
                <div id="preview_wrapper">
                    <div id="preview_fake" style="clear: both;">
                        <img id="preview" src="<%=basePath%>/attachFiles/${defaultResume.photo}" onload="onPreviewLoad(this)" width="40" height="40"/>
                        <input type="hidden" value="0" id="photo" name="isPhotoChanged" />
                        <input type="hidden" value="${defaultResume.photo}" id="photoPath"/>
                    </div>
                        <input id="upload_img"  type="file" onchange="onUploadFileChange(this)" style="opacity:0;zindex:99;width:66;" name="photoFile" value="更换照片"/>
                         <img id="preview_size_fake"/>
                </div>
                <br/>
                
            </td>
        </tr>
        <tr>
            <th width="12%">性别<span style='color:red' title='必填'>*</span></th>
            <td colspan="1">
            <select name="resumeform.sex" title="性别不能为空" id="sex">
                
                <option <c:if test="${defaultResume.sex =='男'}">selected='selected'</c:if> value="男">男</option>
                <option <c:if test="${defaultResume.sex =='女'}">selected='selected'</c:if> value="女">女</option>
            </select>
            
            </td>
        </tr>
        <tr>
            <th width="12%">证件类型<span style='color:red' title='必填'>*</span></th>
            <td colspan="1"><input type="text" title="证件类型不能为空" name="resumeform.credentialstype" id="credentialstype" value="${defaultResume.credentialstype}"/></td>
            <th width="12%">证  件  号<span style='color:red' title='必填'>*</span></th>
            <td colspan="1"><input type="text" title="证 件 号不能为空" name="resumeform.certificateno" id="certificateno" value="${defaultResume.certificateno}"/></td>
        </tr>
        <tr>
            <th width="12%">居  住  地<span style='color:red' title='必填'>*</span></th>
            <td colspan="1"><input type="text" title="居 住 地不能为空" name="resumeform.residence" id="residence" value="${defaultResume.residence}"/></td>
            <th width="12%">政治面貌<span style='color:red' title='必填'>*</span></th>
            <td colspan="1"><input type="text" title="政治面貌不能为空" name="resumeform.politicalaffiliation" id="politicalaffiliation" value="${defaultResume.politicalaffiliation}"/></td>
        </tr>
        <tr>
            <th width="12%">研究方向</th>
            <td colspan="1"><input type="text" name="resumeform.researchdirection" id="researchdirection" value="${defaultResume.researchdirection}"/></td>
            <th width="12%">兴趣爱好</th>
            <td colspan="1"><input type="text" name="resumeform.interest" id="interest" value="${defaultResume.interest}"/></td>
        </tr>
        <tr>
            <th width="12%">导师</th>
            <td colspan="1"><input type="text" name="resumeform.tutor" id="tutor" value="${defaultResume.tutor}"/></td>
            <th width="12%">联系电话<span style='color:red' title='必填'>*</span></th>
            <td colspan="1"><input type="text" title="联系电话不能为空" name="resumeform.tel" id="tel" value="${defaultResume.tel}"/></td>
        </tr>
        <tr>
            <th width="12%">家庭电话</th>
            <td colspan="1"><input type="text" name="resumeform.homephone" id="homephone" value="${defaultResume.homephone}"/></td>
            <th width="12%">邮箱<span style='color:red' title='必填'>*</span></th>
            <td colspan="1"><input type="text" title="邮箱不能为空" name="resumeform.email" id="email" value="${defaultResume.email}"/></td>
        </tr>
        <tr>
            <th width="12%">户口</th>
            <td colspan="1"><input type="text" name="resumeform.hukou" id="hukou" value="${defaultResume.hukou}"/></td>
            <th width="12%">教育经历</th>
            <td colspan="1"><input type="text" name="resumeform.eduexperience" id="eduexperience" value="${defaultResume.eduexperience}"/></td>
        </tr>
        <tr>
            <th width="12%">培训经历</th>
            <td colspan="1"><input type="text" name="resumeform.trainexperience" id="trainexperience" value="${defaultResume.trainexperience}"/></td>
            <th width="12%">工作经验</th>
            <td colspan="1"><input type="text" name="resumeform.workexperience" id="workexperience" value="${defaultResume.workexperience}"/></td>
        </tr>
        <tr>
            <th width="12%">专业基础</th>
            <td colspan="1"><input type="text" name="resumeform.profbasis" id="profbasis" value="${defaultResume.profbasis}"/></td>
            <th width="12%">获奖情况</th>
            <td colspan="1"><input type="text" name="resumeform.prizesituation" id="prizesituation" value="${defaultResume.prizesituation}"/></td>
        </tr>
        <tr>
            <th width="12%">籍贯<span style='color:red' title='必填'>*</span></th>
            <td colspan="1"><input type="text" title="籍贯不能为空" name="resumeform.hometown" id="hometown" value="${defaultResume.hometown}"/></td>
            <th width="12%">出生年月<span style='color:red' title='必填'>*</span></th>
            <td colspan="1">
            <s:textfield cssClass="Wdate" title="出生年月不能为空" name="resumeform.birthday" id="birthday" theme="simple"  onclick="WdatePicker()" readonly="readonly">
            <s:param name="value" ><fmt:formatDate value='${defaultResume.birthday}' pattern='yyyy-MM-dd' /></s:param>
            </s:textfield>
    
            </td>
        </tr>
        <tr>
            <th width="12%">附件</th>
            <td colspan="3">
                 <input type="hidden" value="0" id="isAttachFileChanged" name="isAttachFileChanged" />
                <input type="hidden" id="attachFileName" value="${attachFileName}"/>
                <span id="fileSpan"></span>
                <input id="upload_attachfile"  type="file" onchange="onUploadFileChange(this,'file')" style="opacity:1;zindex:66;width:66;" name="attachFile"/>
<!--                <input type='button' value="添加附件" style="margin-left:-66;zindex:-1;" id="addAttachfile">-->
            </td>
        </tr>
        <tr>
            <th width="12%">操作</th>
            <td colspan="3">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type='button' id="submitButton"  value="确认">
                <input type='button' value="修改简历" style="display:none;">
            </td>
        </tr>
    </table>
</form>