1.引入文件
<!-- 引入uploadify条件 -->
<script type="text/javascript" src="__HOME__/style/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>
<!-- layer -->
<script src="/layer/layer.js" type="text/javascript"></script>
2.前端代码
<div class="form-group">
<label for="username" class="col-sm-2 control-label no-padding-right">缩略图</label>
<div class="col-sm-6">
<label>
<div id="file_upload"></div>
<input type="hidden" value="" name="pic" />
</label>
<label>
<div id="file_del" class="uploadify-button btn btn-info btn-sm">
<span class="glyphicon glyphicon-refresh"></span>
撤销上传</div>
</label>
</div>
<p class="help-block col-sm-4 red">* 必填</p>
</div>
js代码
<script type="text/javascript">
$(function() {
// 上传图片
$('#file_upload').uploadify({
//指定swf文件
'swf' : '/uploadify/uploadify.swf',
//后台处理页面
'uploader' : "{:url('Article/upimg')}",
//设置上传进度显示方式,percentage显示上传百分比,speed显示上传速度
'progressData':'speed',
//设置按钮文本
'buttonText' : '上传图片',
'buttonClass':'btn btn-info btn-sm',
//只允许上传图像
'fileTypeDesc' : 'Image Files',
//限制允许上传的图片后缀
//'fileTypeExts' : '*.gif; *.jpg; *.png',
//限制上传的图片大小
// 'fileSizeLimit' : '2000KB',
//设定发送数据的name值
'fileObjName' : 'img',
//每次成功上传后执行的回调函数,从服务端返回数据到前端
'onUploadSuccess' : function(file, data, response) {
$("input[name='pic']").val(data);
var artimg = data;
var showart = "<img src='"+artimg+"' height='70' alt=''>";
$("#artimgdiv").show();//设置div可见
$("#artimg").html(showart);
layer.alert('上传成功!', {icon: 1});
}
});
$('#file_upload-button').prepend('<span class="glyphicon glyphicon-open"></span> ');
$('#file_upload-button').removeAttr('style');//删除style防止css重复出错
// 撤销图片
$("#file_del").click(function(){
var img = $("#artimg").find('img');
var imgurl = img.attr('src');
if(!imgurl){
layer.alert('你还没有上传图片!', {icon: 2});
}else{
$("#artimgdiv").hide();//隐藏div
$("input[name='img']").val('');
$.ajax({
type:"post",
dataType:"json",
data:{imgurl:imgurl},
url:"{:url('article/delimg')}",
success:function(data){
if(data==1){
layer.alert('撤销成功!', {icon: 1});
}else{
layer.alert('撤销失败!', {icon: 2});
}
}
});
}
});
});
</script>
2.后台代码
//uploadify上传照片
public function upimg()
{
$file = request()->file('img');
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public/uploads/article');
if($info){
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
//echo $info->getSaveName();
$savename = str_replace("\\", "/", $info->getSaveName());//把路径中的\转换为/
$pic = '/uploads/article' . '/'.$savename;
echo $pic;
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}