图片上传预览

base64上传

单图

<html>
<head>
<style type="text/css">
.thumb-image{
 float:left;100px;
 position:relative;
 padding:5px;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;"><input id="fileUpload" type="file"/> 
<div id="image-holder"></div>
</div>

<script>
$(document).ready(function() {
     $("#fileUpload").on('change', function () {

        if (typeof (FileReader) != "undefined") {

            var image_holder = $("#image-holder");
            image_holder.empty();

            var reader = new FileReader();
            reader.onload = function (e) {
                $("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image"
                }).appendTo(image_holder);

            }
            image_holder.show();
            reader.readAsDataURL($(this)[0].files[0]);
        } else {
            alert("This browser does not support FileReader.");
        }
    });   
});
</script>
</body>
</html>
View Code

多图

<html>
<head>
<style type="text/css">
.thumb-image{
 float:left;100px;
 position:relative;
 padding:5px;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;"><input id="fileUpload" multiple="multiple" type="file"/> 
<div id="image-holder"></div>
</div>

<script>
$(document).ready(function() {
        $("#fileUpload").on('change', function() {
          //Get count of selected files
          var countFiles = $(this)[0].files.length;
          var imgPath = $(this)[0].value;
          var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
          var image_holder = $("#image-holder");
          image_holder.empty();
          if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {
              //loop for each file selected for uploaded.
              for (var i = 0; i < countFiles; i++) 
              {
                var reader = new FileReader();
                reader.onload = function(e) {
                  $("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image"
                  }).appendTo(image_holder);
                }
                image_holder.show();
                reader.readAsDataURL($(this)[0].files[i]);
              }
            } else {
              alert("This browser does not support FileReader.");
            }
          } else {
            alert("Pls select only images");
          }
        });
      });
</script>
</body>
</html>
View Code

 上传限制大小类型

<p>
    <?=Html::a('清空图片', ['clear-pic'], ['class' => 'btn  btn-default',
        'data' => [ 'confirm' => '确认要清除吗?',
                    'method' => 'post',
    ],]);?>
</p>
<style>
    .thumbnail{
        height: 140px;
    }

</style>
<div>
    <div class="container my-padding">
        <div class="row">
            <div class="col-md-12  text-center">
                <div class="center-heading">
                    <h2>广告设置</h2>
                    <span class="my-line"></span>
                    <p>下面添加图片</p>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">

            <div class="col-xs-6 col-md-2 col-md-offset-1 text-center" >
                <a href="#" class="thumbnail">
                    <img src="" alt="...">
                </a>
                <div class="form-group">
                    <input type="text" class="form-control" value="" name="title" placeholder="请输入标题">
                </div>
                <label >
                    <input id="left_1" onchange="upload(this)" type="file" name="file"
                           style="left: -9999px; position: absolute;">
                    <span class="btn btn-default">上传left_1</span>
                </label>
            </div>
            <div class="col-xs-6 col-md-2 text-center">
                <a href="#" class="thumbnail">
                    <img src="" alt="...">
                </a>
                <div class="form-group">
                    <input type="text" class="form-control" value="" name="title" placeholder="请输入标题">
                </div>
                <label>
                    <input id="right_1" onchange="upload(this)" type="file" name="file"
                           style="left: -9999px; position: absolute;">
                    <span class="btn btn-default">上传right_1</span>
                </label>
            </div>
            <div class="col-xs-6 col-md-2 text-center">
                <a href="#" class="thumbnail">
                    <img src="" alt="...">
                </a>
                <div class="form-group">
                    <input type="text" class="form-control" value="" name="title" placeholder="请输入标题">
                </div>
                <label>
                    <input id="right_2" onchange="upload(this)" type="file" name="file"
                           style="left: -9999px; position: absolute;">
                    <span class="btn btn-default">上传right_2</span>
                </label>
            </div>
            <div class="col-xs-6 col-md-2 text-center">
                <a href="#" class="thumbnail">
                    <img src="" alt="...">
                </a>
                <div class="form-group">
                    <input type="text" class="form-control" value="" name="title" placeholder="请输入标题">
                </div>
                <label>
                    <input id="right_3" onchange="upload(this)" type="file" name="file"
                           style="left: -9999px; position: absolute;">
                    <span class="btn btn-default">上传right_3</span>
                </label>
            </div>
            <div class="col-xs-6 col-md-2 text-center">
                <a href="#" class="thumbnail">
                    <img src="" alt="...">
                </a>
                <div class="form-group">
                    <input type="text" class="form-control" value="" name="title" placeholder="请输入标题">
                </div>
                <label>
                    <input id="right_4" onchange="upload(this)" type="file" name="file"
                           style="left: -9999px; position: absolute;">
                    <span class="btn btn-default">上传right_4</span>
                </label>
            </div>

        </div>

    </div>
</div>



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

    //初始化加载图片
    $(function () {
        $.post("midview", function (data, status) {
            data = JSON.parse(data);
            $.each(data, function (k, v) {
                $("#" + k).parent().siblings('a').children('img').attr('src', 'http://baidu.com/' + v.path);
                $("#" + k).parent().prev('div').children().val(v.title);
                if (v.path) {
                    $("#" + k).parent().siblings('a').children('img').show();
                }
            })
        })
    });


    function upload(m) {
        var base64_pic;
        var img_type=['gif','png','jpg','jpeg'];
        var file_max_size=500;
        var file = $(m)[0].files[0];
        var name = $(m).attr('id');
        var title=$(m).parent().prev('div').children().val();
        var imgPath=file.name;
        extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();//截取扩展名
        if (img_type.indexOf(extn)==-1) {
            alert("只能上传图片");
        return false;
        }
        if(!title){
            alert("请输入标题");
            return false;
        }
        if(!name){
            alert("参数异常");
            return false;
        }
        if(!file){
            alert("参数异常");
            return false;
        }
        if(file.size/1024>file_max_size){
            alert("图片超过1M");
        return false;
        }

        if (file) {
            var reader = new FileReader();
            reader.onload = function () {
                $(m).parent().siblings('a').children('img').attr("src", this.result).show();
                base64_pic = this.result.split(',')[1];
                saveUser2(name,title,base64_pic,extn);
            }

            reader.readAsDataURL(file);
        }

    }

    //上传
    function saveUser2(name,title,file_base64) {
        var formData = new FormData();
        formData.append('file', file_base64);
        formData.append('name', name);
        formData.append('title', title);
        formData.append('extn', extn);
        $.ajax({
            url: "index-mid",
            type: "post",
            data: formData,
            contentType: false,//告诉服务端请求类型
            processData: false,//不允许对数据进行序列化处理
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
        });
    }

</script>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huay/p/11545602.html