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>
多图
<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>
上传限制大小类型
<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>