HTML:
<div class=\"form-group\"> <label class=\"col-sm-1 control-label no-padding-right\" for=\"form-field-4\"> 图片: </label> <div class=\"col-sm-9\"> <input type=\"file\" name=\"files\" id=\"imgfile\" multiple style=\"display:none;\" = \"imgpath.value=this.value\" > <input type=\"textfield\" id=\"imgpath\" style=\"border: 0px;outline:none;cursor: pointer;width:100px;display:none;\"> <input type=\"button\" class=\"btn btn-white btn-info btn-sm\" value=\"点击上传图片\" =\"imgfile.click()\"> <div class=\"space-4\"></div> <div id=\"img-data\" class=\"img-data\"> <if condition=\"$data[\'savepath\'] neq \'\'\"> <span class=\"uploadimg\"> <img src=\"{$data[\'savepath\']}\" style=\"max-width: 300px;\"> <input type=\"hidden\" name=\"img\" value=\"{$data[\'img\']}\"> <a class=\"remove-uploadimg\" =\"删除\">✕</a> </span> </if> </div> <div class=\"space-4\"></div> <div id=\"imgError\" class=\"msg\"></div> </div> </div>
CSS:
<style> .remove-uploadimg{ cursor:pointer;} .uploadimg{ display: inline-block; position: relative; } .uploadimg .remove-uploadimg{ position: absolute; font-size: 20px; top:-10px; right: -6px; } .remove-uploadimg{ width:30px; height:30px; background-color:#ccc; border-radius:50%; color:red; text-align:center; } .remove-uploadimg:hover{ text-decoration: none; } </style>
JS:
< src=\"__PUBLIC__/js/mbUploadify.js\"></ >
< >
var upload1 = new mbUploadify({
file: document.getElementById(\'imgfile\'),
/*ajax 上传地址*/
url: \"{:U(\'Upload/mbUploadImg\')}\",
//上传进度
progress: function(){
$(\'#imgpath\').show();
$(\'#imgpath\').val(\'上传中...\');
},
/*上传失败*/
error: function(file, msg){
document.getElementById(\'imgError\').innerHTML = msg;
},
/*ajax上传成功*/
uploadSuccess: function(res){
$(\'#imgpath\').hide();
$(\'#imgpath\').val(\'\');
var data = JSON.parse(res);
document.getElementById(\'img-data\').innerHTML = \'<span class=\"uploadimg\">\' +
\'<img src=\"\'+ data.savepath +\'\" style=\"max-width: 300px;\">\' +
\'<input type=\"hidden\" name=\"img\" value=\"\'+data.id+\'\">\'+
\'<a class=\"remove-uploadimg\" =\"删除\">✕</a>\' +
\'</span>\';
}
});
$(\'body\').on(\'click\',\'.remove-uploadimg\',function(){
$(this).parents(\'.uploadimg\').remove();
})
</ >
PHP:
public function mbUploadImg(){ $upload = new Upload(); // 实例化上传类 $upload->maxSize = 5242880 ; // 设置附件上传大小 $upload->exts = array(\'jpg\', \'gif\', \'png\', \'jpeg\'); // 设置附件上传类型 $upload->rootPath = \'./Public/\'; // 上传文件 $info = $upload->uploadOne($_FILES[\'files\']); if($info) { // 上传成功 $data[\'name\'] = $info[\'name\']; $data[\'ext\'] = $info[\'ext\']; $data[\'type\'] = $info[\'type\']; $data[\'savename\'] = $info[\'savename\']; $data[\'savepath\'] = \"/Public/\".$info[\'savepath\'].$info[\'savename\']; $imgId = M(\'upload_img\')->add($data); if($imgId){ $resData[\'code\'] = 200; $resData[\'msg\'] = \'成功\'; $resData[\'id\'] = $imgId; $resData[\'name\'] = $data[\'name\']; $resData[\'savepath\'] = $data[\'savepath\']; echo json_encode($resData); return; } } // 上传错误提示错误信息 return $this->ajaxReturn([\'code\'=>400,\'msg\'=>$upload->getError()]); }
继续阅读与本文标签相同的文章
上一篇 :
扫码登录的安全性分析
下一篇 :
Mysql自动化快速安装部署
-
《21天学通JavaScript(第5版)》| 每日读本书
2026-05-19栏目: 教程
-
Unity火爆插件Behavior Designer行为树插件学习
2026-05-19栏目: 教程
-
结合 Mybatis,探讨 Oracle 中 in 与 not in 的陷阱
2026-05-19栏目: 教程
-
阿里云文件网关备份
2026-05-19栏目: 教程
-
UITableView 组件化
2026-05-19栏目: 教程
