图片上传预览
base64上传
单图
<html> <head> <style type="text/css"> .thumb-image{ float:left;width: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;width: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>
浙公网安备 33010602011771号