zoukankan      html  css  js  c++  java
  • js :实现图片上传前,预览客户端图片(兼容IE6和IE7)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        
    <title>无标题页</title>
           
    <script type="text/javascript" src="../js/jquery.js" charset="gb2312"></script>
     
    <script type="text/javascript">
    function preview()   
    {   
        
    var picId = $("#picId").val();   
        alert(picId);
        
    var fileext=picId.substring(picId.lastIndexOf("."),picId.length);   
        fileext
    =fileext.toLowerCase();   
        $(
    "#fileext").val(fileext);   
        
    if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.bmp'))   
        {   
            alert(
    "对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");   
            $(
    "#picId").focus();   
        }   
        
    else  
        {   
            $(
    "#newPreview").html('');   
            
    var newPreview =$("#newPreview")[0];     
            
    var imgDiv = document.createElement("div");    
            document.body.appendChild(imgDiv);   
            imgDiv.style.width 
    = "180px";    imgDiv.style.height = "140px";   
            imgDiv.style.filter
    ="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";      
            imgDiv.filters.item(
    "DXImageTransform.Microsoft.AlphaImageLoader").src = picId;   
            newPreview.appendChild(imgDiv);   
        }   

    </script>
    </head>
    <body>
    <input name="uploadFile" type="file" class="input_width" id="picId" maxlength="50" onchange="preview()"/>  
    (推荐上传图片像素大小为180*140)   
    <div id="newPreview"></div>  
    </body>
    </html>
  • 相关阅读:
    TDSCDMA手机(WM系统)信号的采集?
    vc2008 + libpq + postgresql 8.4 配置
    code complete 2阅读笔记(第二章)
    Python 学习笔记(一)语句,变量,函数
    CS通用模型设计,socket,tcp实现()
    VS2005,VS2008编辑器设置
    设计模式之个人理解单例模式
    请教:C#网络编程相关的知识,建立socket服务器时向客户端连接,就建立不了了?
    服务器开发
    年终总结
  • 原文地址:https://www.cnblogs.com/Fooo/p/1580375.html
Copyright © 2011-2022 走看看