zoukankan      html  css  js  c++  java
  • 图片上传前端实现

    基于bootstrap实现图片上传,具体代码实现如下

    <form id="poster_form" class="form-horizontal" method="post" enctype='multipart/form-data'>
        <div class="control-group">
            <label class="control-label" >图片上传*</label>
            <div class="controls">
                <div class="input-group">
                    <input id="img-name-box" name='poster_path' type="text" class="form-control" value="" readonly>
                    <span class="input-group-btn">
                        <button id="up-btn" class="btn btn-success" type="button">选择文件</button>
                    </span>
                </div>
            </div>
        </div>
    </form>
    <form id="imgForm" action="/phptext/php/5-img.php" method="post" enctype="multipart/form-data" target="file_upload_return">
        <input id="up-file" name="up_img" type="file" style="display: none" value="" />
    </form>
    <iframe id="file_upload_return" hidden="true" name="file_upload_return"></iframe>
    <div class="img-box">
        <img src="" id="img-show" class="img-responsive" hidden="hidden" >
    </div>

    js代码实现如下:

    $(function () {
        $("#up-btn").on('click',function(){
            $("#up-file").click();
        });
    
        //抓取选择文件事件
        $('#up-file').on('change', function(){
            // var name = $(this)[0].files[0].name;
            var ext = this.value.toLowerCase().split('.').splice(-1);
            if ( ext == 'png' || ext == 'jpg') {
                console.log(1111);
                $('#imgForm').submit();
            } else {
                alert('只能上传jpg、png格式的图片');
            }
        });
    
        //submit返回
        $("#file_upload_return").load(function(){
            var body = $(window.frames['file_upload_return'].document.body);
            var result = eval('(' + body[0].textContent + ')');
            console.log(result);
            if (result) {
                $('#img-name-box').val(result.path);
                $('#img-show').attr('src', 'http://localhost/phptext/YinLogs/Html/' + result.path).show();
            } else {
                alert(result.info);
            }
        });
    });
  • 相关阅读:
    git修改远程仓库地址
    Result Maps collection already contains value for com.miniprogram.meirong.user.dao.UserMapper.BaseResultMap
    查看微信小程序的appID和secret
    Springboot配置fastjson开发
    本地仓库上传码云
    总结分析Java常见的四种引用
    equals和hashcode 和 ==方法说明
    关于Class.forName(className).newInstance()介绍
    Java枚举
    抽象工厂模式-与-工厂方法模式区别
  • 原文地址:https://www.cnblogs.com/yeshaoxiang/p/7827538.html
Copyright © 2011-2022 走看看