专栏首页编程微刊前端上传照片实现可预览功能

前端上传照片实现可预览功能

在写项目的时候,遇到了上传照片的功能,根据项目的需要,有很多种写法,有些需要上传之前对图片进行裁剪,有些直接上传到页面预览即可,再次之前,用过插件写了两次。用到的都是不同的插件,今天用jquery直接写了一个简单的功能。

bootstrap+fileinput插件实现可预览上传照片功能 https://www.jianshu.com/p/8df97db49798

基于cropper.js的图片上传和裁剪 https://www.jianshu.com/p/f9986bd52ec6

<!DOCTYPE HTML>
<html>

    <head>
        <title>新增地图配置</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <style>
            #img {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <form id="dialogForm">
            <div class="row">
                <div class="col-md-12 col-sm-12  col-xs-12">
                    <div class="form-group">
                        <label class="col-md-3 col-sm-3  col-xs-3 control-label">图标</label>
                        <div class="col-md-6 col-sm-6  col-xs-6">
                            <img src="" id="img" class="hide">
                            <input type="file" name="file" id="file" multiple="multiple" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <script>
            $("#file").change(function() {
                var objUrl = getObjectURL(this.files[0]);

                if(objUrl) {
                    $("#img").attr("src", objUrl);
                    $("#img").removeClass("hide");
                }
            });
            //建立一个可存取到file的url
            function getObjectURL(file) {
                var url = null;
                url = window.webkitURL.createObjectURL(file);
                return url;
            }
        </script>
    </body>
</html>

关于浏览器兼容问题,上面写道的是在谷歌浏览器可用,要在火狐ie浏览器里面同样适用只需要在代码里面加上一段适配的代码,判断使用哪个浏览器打开即可。

//建立一个可存取到file的url
    function getObjectURL(file) 
    {
        var url = null ;
        url = window.webkitURL.createObjectURL(file) ;
        if (window.createObjectURL!=undefined) 
        {  // basic
            url = window.createObjectURL(file) ;
        }
        else if (window.URL!=undefined) 
        {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } 
        else if (window.webkitURL!=undefined) {
            // webkit or chrome
            
        }
        return url ;
    }


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React基础语法03-引入本地图片和服务器图片的方法

    祈澈菇凉
  • 进阶攻略|前端最全的框架总结

    前端的技术日渐更新,最近得空,花了一上午的时间,将前端常见的UI框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多...

    祈澈菇凉
  • jQuery点击按钮,生成input输入框

    需求,点击添加按钮,生成input输入框,如果上一个输入框为空,则弹出提示框提示,若不为空,则生成一行input框。

    祈澈菇凉
  • 一文读懂原码、反码、补码

    本文转载自: https://blog.csdn.net/u011488256/article/details/52204074 作者:僵尸男孩

    我的小碗汤
  • 不到一半的医院运行物联网演示,但更多的是在途中

    虽然40%的公司正在运行项目,但IDC表示,今年有73%的高管准备启动物联网工作。 ? 根据IDC咨询公司的一份新报告,大多数医疗行政人员预计,物联网今年将成为...

    首席架构师智库
  • 定时取指定进程内存脚本

    格式(利用了awk给外部变量赋值,请参考博文http://blog.chinaunix.net/uid-20682147-id-3024853.html):

    一见
  • Linux Shell从入门到删除根目录跑路指南

    shell 作为一门 linux 下使用广泛的系统语言,语法简单,上手容易,但是想要用好,少犯错误,也不是那么容易的一件事,可谓虽是居家旅行之良药,但也是杀人灭...

    三哥
  • Linux Shell从入门到删除根目录跑路指南

    shell 作为一门 linux 下使用广泛的系统语言,语法简单,上手容易,但是想要用好,少犯错误,也不是那么容易的一件事,可谓虽是居家旅行之良药,但也是杀人灭...

    三哥
  • Linux Shell从入门到删除根目录跑路指南

    三哥
  • AOF持久化

    由于需要记录Redis的每条写命令,因此AOF不需要触发,下面介绍AOF的执行流程。 AOF的执行流程包括: 命令追加(append):将Redis的写命令...

    用户5546570

扫码关注云+社区

领取腾讯云代金券