简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

js上传图片预览

大家讲道理
发布： 2016-11-10 13:25:26
原创
1245 人浏览过

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  
    <script type="text/javascript">  
    $(function(){  
        $(".file").change(function(){  
            var fileImg = $(".fileImg");  
            var explorer = navigator.userAgent;  
            var imgSrc = $(this)[0].value;  
            if (explorer.indexOf(&#39;MSIE&#39;) >= 0) {  
                if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {  
                    imgSrc = "";  
                    fileImg.attr("src","/img/default.png");  
                    return false;  
                }else{  
                    fileImg.attr("src",imgSrc);  
                }  
            }else{  
                if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {  
                    imgSrc = "";  
                    fileImg.attr("src","/img/default.png");  
                    return false;  
                }else{  
                    var file = $(this)[0].files[0];  
                    var url = URL.createObjectURL(file);  
                    fileImg.attr("src",url);  
                }  
            }  
        })  
    })  
    </script>  
</head>  
<body>  
    <form enctype="multipart/form-date" method="post">  
        <input type="file">  
        <input type="submit">  
    </form>  
    <img  src="" alt="js上传图片预览" >  
</body>  
</html>
登录后复制

相关标签：
代码片段，代码分享，PHP代码分享，Java代码分享 Ruby代码分享，Python代码分享，HTML代码分享，CSS代
来源：php.cn
上一篇：js+html实现遮罩层效果 下一篇：js检测浏览器版本方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
按照ID对MySQL结果进行分组以便循环遍历 我有一个表，其中有mysql中的航班数据。我正在编写一个php代码，它将使用codeigniter3对数据进行分组和显示journey_idair_idFlightDuration...
来自于 2024-04-06 17:27:56
0
1
406
父级的填充被粘性定位的子级忽略 如何防止粘性元素进入标题后面？当前代码片段在父级上使用填充顶部，我也尝试在额外的子级上使用margin-top或透明50px边框，但它似乎不起作用。我知道在这种情况下我可以轻松地在...
来自于 2024-04-06 11:42:51
0
1
338
如何知道Vue组件何时完全初始化完成？ 所以，在我的Vue组件中，有一个异步的created方法和几个带有异步watcher的变量。这些变量被一些组件template部分中的元素用作v-model。watcher调用其他...
来自于 2024-04-05 14:20:24
0
1
1442
重新表述的标题为：Stripe连接订阅分成费用的英文翻译是"Stripe Connect Subscription Split Fees" 嗨，我正在使用StripePHPAPI为客户构建一个平台，该平台按月销售订阅以授权内容。我与客户达成协议，分享每个订阅所收取费用的50%。我使用了以下代码片段来创建订阅：$stri...
来自于 2024-04-02 20:15:22
0
1
418
如何使用 CSS 网格对齐图像？ 我正在尝试使用CSS网格构建网站的一部分。我试图让列表和图片保持在同一行中，并在屏幕大小改变时按比例缩小/增长。代码粘贴在下面。非常感谢任何帮助。我想知道错误是否出在我的网格模板内...
来自于 2024-04-01 22:08:31
0
1
338
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！