打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
JS实现图片上传前预览

效果如下:    

    

实现代码:

JS脚本如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->    <script language="javascript" type="text/javascript">
        
function getFullPath(obj)
        {
            
if(obj)
            {
                
//ie
                if (window.navigator.userAgent.indexOf("MSIE")>=1)
                {
                    obj.select();
                    
return document.selection.createRange().text;
                }
            
//firefox
                else if(window.navigator.userAgent.indexOf("Firefox")>=1)
                {
                    
if(obj.files)
                    {
                        
return obj.files.item(0).getAsDataURL();
                    }
                        
return obj.value;
                 }
                
return obj.value;
            }
        }
        
function yulan()
        { 
            
var filePath =getFullPath(document.getElementById('UpFile'));
            
var fileText =filePath.substring(filePath.lastIndexOf("."),filePath.length);
            
var fileName =fileText.toLowerCase();
            
if ((fileName!='.jpg')&&(fileName!='.gif')&&(fileName!='.jpeg')&&(fileName!='.png')&&(fileName!='.bmp'))
            {
                alert(
"对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
                document.form1.UpFile.focus();
            }
            
else
            {
                document.getElementById(
"preview").innerHTML="<img src='"+getFullPath(document.getElementById('UpFile'))+"' width=120 style='border:6px double #ccc'>";
            }
        }
</script>
 
ASPX页面代码:
<input type="file" id="UpFile" class="stylebtn" name="UpFile" onchange="yulan()" />;
<asp:Button ID="btnUpload" runat="server" Text="上  传" 
onclick
="btnUpload_Click" Height="22px" CssClass="stylebtn"/>
<div id="preview"></div>
  
 
在IE7下测试正常 !
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
html5加js实现本地文件读取和写入并获取本地文件路径
js大小写转换
asp.net 2的文件上传
JavaWeb上传下载文件
JS控制CSS
JS:attachEvent和addEventListener 使用方法
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服