引入需要的插件：
webuploader.css
webuploader.min.js
前端布局：
<!--自定义图片--> <div id="uploader-demo"> <div id="fileList" class="uploader-list"> <input type="hidden" id="banner-img" name="img"> </div> <div id="filePicker">选择图片</div> <p class="text-danger">必填，请上传1920*680图片</p> </div> <!--自定义图片-->
前端ajax获取数据：
$(".btn-submit").click(function(){
var name = $("input[name='name']").val();
var img = $("input[name='img']").val();
if(!name){
layer.alert('轮播图名称不能为空！',{icon:2,time:3000});
return false;
}
if(!img){
layer.msg('请上传一张缩略图！',{icon:2});
return false;
}
// 获取数据
var formdata = new FormData(document.getElementById('form'));
$.ajax({
type:'post',
dataType:"json",
url:"{:url('banner/doAdd')}",
data:formdata,
processData:false,
contentType:false,
success:function (data) {
if(data.status){
layer.alert(data.message,{icon:1,time:2000});
// setTimeout(function(){
// window.location.href = data.url;
// },2000);
}else{
layer.alert(data.message,{icon:2});
}
}, error:function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});
return false;
});注意：表单形式
<form method="post" id="form" class="form-horizontal" action="" enctype="multipart/form-data">
引入webuploader 上传图片的js验证：
//上传图片
var $list=$("#fileList"); //这几个初始化全局的百度文档上没说明，好蛋疼
var thumbnailWidth = 100; //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
var thumbnailHeight = 100;
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// 不压缩
compress:false,
// swf文件路径
swf: '__STATIC__/plugins/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: '{:url("banner/uploadpic")}',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
//限制只能上传一个文件
fileNumLimit: 1,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
//上传完成事件监听
uploader.on( 'fileQueued', function(file) {
var $li = $(
'<div id="' + file.id + '" class="file-item">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
btns = $('<div class="file-panel">' +
'<span class="cancel">删除</span>').appendTo( $li ),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
$li.on( 'mouseenter', function() {
btns.stop().animate({height: 30});
});
$li.on( 'mouseleave', function() {
btns.stop().animate({height: 0});
});
});
//上传成功返回文件名
uploader.on('uploadSuccess', function(file,response){
if(response.status == 1){
//在当前图片LI里添加图片地址
$('#'+file.id).attr('banner_img',response.msg);
$("#banner-img").val(response.msg);
}else{
layer.msg(response.msg,{icon:2});
}
});
$list.on('click','.cancel',function(){
var ID = $(this).parent().parent().attr('id');
var img = $(this).parent().parent().attr('banner_img');
var quID=uploader.getFile(ID)
uploader.removeFile(quID)
$(this).parent().parent().remove();
$("#banner-img").val('');
$.ajax({
url:"{:url('banner/delImg')}",
type:'delete',
data:{img},
success:function(res){
if(res.status==0){
layer.msg(res.msg);
}
}
});
return false;
})后端图片上传控制代码：
// banner图片上传
public function uploadpic()
{
// $getImg = $_FILES['file']['tmp_name'];
// list($width,$height) = getimagesize($getImg);
// if($width != 1920 && $height != 680){
// return json(['status'=>0,'msg'=>'图片尺寸不对！']);
// }
$file = request()->file('file');
$info = $file->validate(['size'=>1024*1024,'ext'=>'jpeg,jpg,png,gif'])->move( '../public/uploads/banner');
if($info){
$savename = str_replace("\\","/",$info->getSaveName());
return json(['status'=>1,'msg'=>$savename]);
}else{
return json(['status'=>0,'msg'=>$file->getError()]);
}
}此时，可以上传图片，在浏览器中打印图片数据
上传数据代码：
public function doAdd()
{
if(Request::isPost()){
$data = Request::param();
halt($data);
// $data['img']= request()->file('img');
try {
BannerModel::create($data);
} catch (Exception $e) {
return resMsg(0, '轮播图添加失败' . '<br>' . $e->getMessage(), url("lst"));
}
return resMsg(1, '轮播图添加成功',url("lst"));
}
}完毕。