js 图片预览

//显示选择的图片缩略图

function showImage(inputId,imageConfirmId,imageConfi){
    var image=document.getElementById(inputId).value.toLowerCase();
    if(!image){
        return;
    }
    
    var fileExtend=image.substr(image.lastIndexOf(".", image.length)+1);
    if(!(fileExtend=="jpg"||fileExtend=="png"||fileExtend=="gif"||fileExtend=="bmp"||fileExtend=="jpeg")){
        Dialog.tip("请选择以下图片格式的文件：jpg，gif，png，bmp，jpeg！");
        document.getElementById(inputId).value="";
        return;
    }
    //检查文件大小
    var fileSize = document.getElementById(inputId).files[0].size;
    if(fileSize > 4194304){
        Dialog.tip("您选择的文件大于4M,请重新选择！");
        document.getElementById(inputId).value="";
        return;
    }
    //显示缩略图
    var objUrl = getObjectURL(document.getElementById(inputId).files[0]) ;
    if(!objUrl){
        document.getElementById(imageConfirmId).src="";
        document.getElementById(imageConfi).src="";
        document.getElementById(imageConfirmId).style.display="none";
        document.getElementById(imageConfi).style.display="none";
    }
    else{
        document.getElementById(imageConfi).src=objUrl;
        document.getElementById(imageConfi).style.display="";
        document.getElementById(imageConfirmId).src=objUrl;
        document.getElementById(imageConfirmId).style.display="";
    }
}


//获取选择图片的本地路径
function getObjectURL(file) {
    if(!file){
        return null;
    }
    var url = null ; 
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } 
    else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } 
    else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

 

<table>
							       		 	<tbody>
								       		 	<tr>
								       		 		<td>
								       		 			行驶证影像：
								       		 		</td>
								       		 		<td style="text-align:left;height:30px;border-bottom:1px solid #d3d3d3;" id="wxDriversLicenseImgTd">
											        	<img id="imgDriver" src="" style="display:none;margin-left:5px;width:50px"/>
											        </td>
								       		 	</tr>
								       		 	<tr>
								       		 		<td style="text-align:left;">
								       		 			<input style="max-width:160px" data-role="none" data-mini="true" type="file" name="wxDriversLicenseImage" id="wxDriversLicenseImage" onchange="showImage('wxDriversLicenseImage','imgDriversLicense2','imgDriver');">
								       		 		</td> 
								       		 	</tr>
								       		 </tbody>
								       	</table>