表单上传图片实现选择图片后预览

最新推荐文章于 2021-01-26 23:35:57 发布

Sacredness

最新推荐文章于 2021-01-26 23:35:57 发布

阅读量4.9k

点赞数 3

分类专栏：前端文章标签：图片上传预览 BootStrap jquery 图片上传

本文链接：https://blog.csdn.net/Sacredness/article/details/86746334

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

写在前边

现在的时间：2019-2-1
如题，想实现这样一个功能，但我的前端是个菜鸟中菜鸟，这个例子是我查阅了好多资料与博客后自己写的，感谢各位大佬的无私奉献。
具体是怎么实现的我也不清楚，只知道用到了jquery、bootstrap、fileinput，如果有和我一样的菜鸟直接拿去用就好。

效果

未选择图片

选择图片

代码

新建一个文本文件，把扩展名改成.html，把下边这段代码复制进去，用浏览器打开这个文件即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">

        <title>添加一个软件</title>

        <!-- jquery -->
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

        <!-- bootstrap核心 js 与 css 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <!-- bootstrap 图片上传相关文件 -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/piexif.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/sortable.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/purify.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/themes/fa/theme.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/locales/(lang).js"></script>

        <style>
            #main-form
            {
                margin-top: 20px;
            }
        </style>
    </head>

    <body>
        <div id="main-form" class="col-md-4 col-md-offset-4">
            <form id="form"
                  action="#" class="form-horizontal">

                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">*</span>软件图标：</label>
                    <div class="col-md-10 has-success">
                        <input id="pic" name="pic" type="file" class="form-control"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">*</span>软件名称：</label>
                    <div class="col-md-10 has-success">
                        <input name="name" type="text" class="form-control" placeholder="最多8个字符"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">*</span>软件介绍：</label>
                    <div class="col-md-10 has-success">
                        <textarea name="introduction" type="password" class="form-control" placeholder="最多256个字符"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">*</span>官方网站：</label>
                    <div class="col-md-10 has-success">
                        <input name="officialWeb" type="text" class="form-control"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <button id="submitData" type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </div>
                </div>

            </form>
        </div>
    
        <script>
            // 图上传与预览相关控制
            $('#pic').fileinput
            (
                {
                    showUpload : false, //是否显示上传按钮,跟随文本框的那个

                    showRemove : false, //显示移除按钮,跟随文本框的那个

                    showCaption : true,//是否显示标题,就是那个文本框

                    showPreview : true, //是否显示预览,不写默认为true

                    dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域

                    //minImageWidth: 50, //图片的最小宽度

                    //minImageHeight: 50,//图片的最小高度

                    //maxImageWidth: 1000,//图片的最大宽度

                    //maxImageHeight: 1000,//图片的最大高度

                    //maxFileSize: 0, //文件最大大小，单位为kb，如果为0表示不限制文件大小

                    //minFileCount: 0, //文件最小大学， 单位为kb，如果为0表示不限制文件大小

                    maxFileCount : 1, //表示允许同时上传的最大文件个数

                    enctype : 'multipart/form-data',

                    validateInitialCount : true,

                    previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",

                    allowedFileTypes : [ 'image' ],//配置允许文件上传的类型

                    allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型

                    allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型

                    language : 'zh'
                }
            )

            // 控制生成的代码的样式
            $('input.file-caption-name').attr('placeholder', '点击右方的选择图片按钮选择图片');
            $('span.hidden-xs').text("选择图片");
        </script>
    </body>
</html>