使用tp3.2和mbUploadify.js上传图片的代码,记录一下
时间:2018-12-10
本文章向大家介绍使用tp3.2和mbUploadify.js上传图片的代码,记录一下,主要包括使用tp3.2和mbUploadify.js上传图片的代码,记录一下相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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;" onchange = "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="点击上传图片" onclick="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" title="删除">✕</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:
<script src="__PUBLIC__/js/mbUploadify.js"></script> <script> 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" title="删除">✕</a>' + '</span>'; } }); $('body').on('click','.remove-uploadimg',function(){ $(this).parents('.uploadimg').remove(); }) </script>
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()]); }
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 为什么大家都说“SELECT *”效率低?
- 手把手教你如何搭建一套GPS定位系统平台
- [较难]LeetCode-4.寻找两个正序数组的中位数 利用数组扩充和二分法切割思想实现
- Go Errors 错误处理
- MySQL数据库备份实操
- spring-cloud-config:配置同步原理
- Newbe.Claptrap 框架入门,第二步 —— 简单业务,清空购物车
- 来自前端同学对后端童鞋的吐槽!@!#^$%
- Linux ADF(Atomic Display Framework)浅析---概述
- Swift进阶二:基本数据类型相关
- 控制反转与依赖注入
- 每日两题 T16
- 每日两题 T13
- 每日两题 T21
- 每日两题 T4