现在的位置: 首页 > 综合 > 正文

JS实现图片上传前预览

2013年08月12日 ⁄ 综合 ⁄ 共 1514字 ⁄ 字号 评论关闭

效果如下:    

    

实现代码:

JS脚本如下:

    
<
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()
{
filename=document.getElementById('UpFile').value;
var fileText =filename.substring(filename.lastIndexOf("."),filename.length); //获取文件扩展名

var filePath =getFullPath(document.getElementById('UpFile'));

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='"+filePath+"' 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
>

抱歉!评论已关闭.