Thinkphp结合ajaxFileUpload实现ajax异步图片传输全套代码
发布时间:2023-06-14 04:01:53
标签:Thinkphp,ajaxFileUpload,ajax,图片上传
这篇文章主要给大家介绍了利用Thinkphp结合ajaxFileUpload实现异步图片传输的方法,文中给出了详细的示例代码,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
使用Jquery的ajaxFileUpload的图片上传插件,感觉这种异步上传的方式非常好用接下来就介绍一下这个插件的使用。
通过查看插件的源码发现,插件的实现原理大概就是创建一个隐藏的表单和iframe然后用JS去提交,获得返回值。
1、引用文件
先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。
<script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script>
<script src="__ADMIN__/js/ajaxfileupload.js"></script>
2、HTML代码
<div class="form-group">
<label class="col-sm-2 control-label">缩略图</label>
<div class="col-sm-8">
<div id="file-pretty">
<div>
<input type="file" id="file_thumb" name="thumb" class="form-control" style="display: none;" value="">
<div class="input-append input-group">
<span class="input-group-btn">
<button id="btn_thumb" class="btn btn-white" type="button">选择图片</button>
</span>
<input id="info_thumb" name="thumb" class="input-large form-control" type="text" value="{$info.img}">
</div>
</div>
</div>
</div>
<div class="col-sm-2"><img id="show_thumb" src="/uploads/image/{$info.thumb}" style="height: 30px;" alt=""></div>
</div>
3、JS代码
<script type="text/javascript">
$(function(){
$("#btn_thumb").click(function(){
$("#file_thumb").click();
});
//异步上传
$("body").delegate('#file_thumb', 'change', function(){
var filepath = $("input[name='thumb']").val();
var arr = filepath.split('.');
var ext = arr[arr.length-1];
//alert(filepath);exit();
if('gif|jpg|png|bmp'.indexOf(ext)>=0){
$.ajaxFileUpload({
url: '/admin/slide/upload_image',
secureurl: false,
fileElementId: 'file_thumb', //file标签ID
dataType: 'json', //返回数据类型
data:{name:'thumb'},
success:function (data,status){
$("#info_thumb").val(data);
$("#show_thumb").attr('src','/uploads/images/'+data);
$("#info_thumb").focus();
},
complete:function (XMLHttpRequest){
},
error:function (data,status,e){
layer.alert('上传失败!');
},
});
} else {
//清空file
$("#file_thumb").val("");
layer.alert('请上传合适的图片类型!');
}
});
});
</script>
4、后台处理(PHP)
//单文件(包含单文件)异步上传
public function upload_image(){
//图片上传
$file = request()->file(input('name'));
$info = $file->move(ROOT_PATH . 'public/uploads/images');
if($info) {
return json_encode($info->getSaveName());
}
}
5、前台调用
<div id="slideshow">
<ul class="rslides" id="slider">
{volist name="data" id="vo"}
<li><a href="{$vo.url}" rel="external nofollow" rel="bookmark" target="_blank"> <img src="__UPLOADS__/images/{$vo.img}" max-width="" max-height="" alt="{$vo.title}"></a>
<p class="slider-caption">{$vo.title}</p>
</li>
{/volist}
</ul>
</div>
0
投稿
猜你喜欢
- 有空余的时候自己写了一下,代码没有进行很好的规整。如果发现bug请及时通告我,谢谢 主要功能:1、点击插入表情,可选
- 一、 网页设计中的对比原则一件网页设计作品由许多元素构成,它们的重要性各不相同,其中一些元素的重要性要高于其它元素。一些相互关联,而另一些则
- 我们大家都知道CSS功能的强大,而有关CSS基本的排版控制虽然已有详细的使用说明和参考教程,但还有许多丰富的CSS排版能力,是很少能查到的。
- 本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识。作者通过实践,认为在有些情况下css的代码是可以更加简
- 在学习与运用ASP中,response对象涉及到的方面也比较多,想全部都掌握也并非一两天的事,我也是最近才发现response对象中居然有这
- 近期,MSN、江民等知名网站相继受到了黑客的威胁和攻击,一时间网络上风声鹤唳。本报编辑部接到本文作者(炽天使)的电话,他详细讲述了发现国内最
- 由于笔者最近在做一个跨数据库操作的测试,开始做IBatisNet (IBatis.DataMapper.1.6.2/IBatis.DataA
- 目前SQL INJECTION的攻击测试愈演愈烈,很多大型的网站和论坛都相继被注入。这些网站一般使用的多为SQL SERVER数据库,正因为
- XML Web Service 是在 Internet 上进行分布式计算的基本构造块。开放的标准以及对用户和应用程序之间的通信和协作的关注产
- 这阵子没有精力完整翻译和发到译言( 现下正渐入状态,预计写博客量会逐步提升回来),简短做一个概要翻译,为近期工作需要做一个参考。
- 今天在群(CSS森林:30247792)里讨论了border的样式写法,发现border的写法还真是灵活,做了一下总结,希望对大家有用:bo
- 在整个产品设计的过程中,视觉设计与交互设计的“工序”非常紧密,两者关系也是相辅相成,互相影响。而视觉界面作为最直接与用户交流的层面,如何把交
- 【先锋缓存类】Ver2004作者:孙立宇、apollosun、ezhonghua官方网站:http://www.lkstar.com 技术支
- 触发器权限和所有权CREATE TRIGGER 权限默认授予定义触发器的表所有者、sysadmin 固定服务器角色成员以及 db_owner
- 在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p
- 从小的方面讲,帮助一般是指:手册、说明书、文档、FAQ 等等。从大的方面讲,可以是交互过程中的提示、指引、演示等信息,帮助无处不在!这一切,
- 现在的垃圾留言越来越智能,并且从留言内容几乎看不出来是垃圾留言,而大量的垃圾留言会导致文章可读性下降,并可能会被搜索引擎惩罚,经过一段时间的
- IE6下浮出层常会需要增加一个iframe来解决浮出层被Obj穿透的问题,这个是目前最有效的方案,不过这个方案本身有个缺陷,就是iframe
- 尽管XML还处在开发阶段,其标准正在由W3C组织制定,但是已经有许多公司表示全力支持XML,并开发了不少XML工具。Adobe公司的Fram
- asp使用SQL语句,查询数据库中的第10-20条记录的l方法,两种sql语句写法如下:1、select top 10 * from tab