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()]);
}

使用tp3.2和mbUploadify.js上传图片的代码,记录一下的更多相关文章

  1. c#使用js上传图片

    前几天朋友说用js上传图片过去遇到点问题,于是自己也想写一个demo这里就把自己挖的坑填了. 话不多说上代码 前台就一个file控件加按钮 <!DOCTYPE html> <html ...

  2. 富文本编辑器上传图片需要配置js,后台代码

    富文本编辑器上传图片需要配置js,后台代码

  3. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  4. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  5. Node.js 上传图片并保存

    Node.js 上传图片并保存 依赖 package.json 文件 { "name": "demo", "version": " ...

  6. js 上传图片、压缩、旋转

    亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  7. 原生 js 上传图片

    js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  8. Js上传图片并生成缩略图

    Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...

  9. 原生js上传图片遇到的坑(axios封装)

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...

随机推荐

  1. XSS防范之Encode(转)

    防范XSS有三道防火墙:数据的输入校验,数据输出Encode,浏览器安全(主要就是CSP),这里主要介绍Encode. #用于XSS防范的Encode 用户防范XSS的Encode主要有三种:Html ...

  2. C/C++内存管理详解 ZZ

    内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的 检查代码和对C++的痛恨,但内存管理在C++中无处不在,内存 ...

  3. DDD(领域驱动设计)总结

    基本概念: 领域驱动设计(简称 ddd)概念来源于2004年著名建模专家eric evans发表的他最具影响力的书籍:<domain-driven design –tackling comple ...

  4. 机器学习入门KNN近邻算法(一)

    1 机器学习处理流程: 2 机器学习分类: 有监督学习 主要用于决策支持,它利用有标识的历史数据进行训练,以实现对新数据的表示的预测 1 分类 分类计数预测的数据对象是离散的.如短信是否为垃圾短信,用 ...

  5. 乘风破浪:LeetCode真题_009_Palindrome Number

    乘风破浪:LeetCode真题_009_Palindrome Number 一.前言 如何判断一个整型数字是回文呢,我们可能会转换成String来做,但是还有更简单的方法. 二.Palindrome ...

  6. 沉淀再出发:java的文件读写

    沉淀再出发:java的文件读写 一.前言 对于java的文件读写是我们必须使用的一项基本技能,因此了解其中的原理,字节流和字符流的本质有着重要的意义. 二.java中的I/O操作 2.1.文件读写的本 ...

  7. Java编程规范[转]

    目录 1       概述.... 5 1.1      目标:.... 5 1.2      原则:.... 5 2       Java编程命名规范.... 5 2.1      包的命名标准.. ...

  8. vue实现点击目标元素外页面的其他地方隐藏弹窗。

    方法: 步骤1:给页面最外出的元素div加点击事件:@click=“popShow = false”. 步骤2:给点击目标元素加点击事件:@click=“popShow = true”. 备注:pop ...

  9. Java类修饰符的使用与作用以及常见问题

    首先明确,类是放在文件里的,在文件里面的不同位置就有不同的作用,就是不同类型的类. 1, 顶级类or外部类:包括两种,一个文件中与文件名同名称的类我们称作顶级类(也是外部类),如果在一个文件中的一个类 ...

  10. Python ,pickle

    @Python pickle模块学习   pickle提供了一个简单的持久化功能.可以将对象以文件的形式存放在磁盘上. ---------------------------------------- ...