您现在的位置是:首页 > Jquery > JQ图片上传预览图片网站首页 Jquery

JQ图片上传预览图片

简介以下是使用jquery来实现图片上传过程时做到可预览图片的方法,这样可以直观看到上传的图片,更人性化的进行开发。

图片预览功能来了,以下代码可直接复制使用,喜欢的点个赞。


<img id="img" width="120" height="70">

 注意:这个是用于预览图片用到的标签


<input type="file" name="pic" class="form-control" onchange="yuLan(this)">

注意:这个是用于上传图片的文本框


<script src=".jquery.min.js"></script>

 注意:引进js文件,重点!!必须先检查是否引用到。


<script type="text/javascript">

    //图片预览

    function yuLan(img) {

        var file = img.files[0];

        window.FileReader

        var fr = new FileReader();

        fr.onloadend = function(e) {

        document.getElementById("img").src = e.target.result;

    };

        fr.readAsDataURL(file);

    }

</script>


分享给朋友吧:

微信里点“发现”,扫一下
二维码便可将文本分享至朋友圈

声明:

1,如果您发现本文有错误或者有疑问,请 联系站长 修正或 留言
2,本站提供的知识或者学习方法均为博主学习工作过程中所遇到的问题的解决办法积累!
3,部分文章是引用借鉴其他优秀个人博客的知识,学习如逆水行舟,不进则退!
4,本站推荐的资源均经由站长检测或者个人发布,不包含恶意软件病毒代码等,如果你发现此类问题,请向站长举报!
5,本站仅提供文件的免费下载服务,如果你对代码程序软件的使用有任何疑惑,请留言。
6,本网站在文章内容仅供于学习参考使用,请勿作为商业通途使用,版权归原作者所有。如您对内容、版权等问题存在异议请与本站联系,我们会及时进行处理解决。

文章评论

Top