Thinkphp结合ajaxFileUpload实现ajax异步图片传输全套代码（thinkphp 3.2.3 用户管理系统）奔走相告

随心笔谈2年前发布编辑

131 0

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

目录1、引用文件2、HTML代码3、JS代码4、后台处理（PHP）5、前台调用

这篇文章主要给大家介绍了利用Thinkphp结合ajaxFileUpload实现异步图片传输的方法，文中给出了详细的示例代码，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。

使用Jquery的ajaxFileUpload的图片上传插件，感觉这种异步上传的方式非常好用接下来就介绍一下这个插件的使用。

通过查看插件的源码发现，插件的实现原理大概就是创建一个隐藏的表单和iframe然后用JS去提交，获得返回值。

先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

//异步上传
$(“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>

//单文件（包含单文件）异步上传
public function upload_image(){
//图片上传
$file=request()->file(input(‘name’));
$info=$file->move(ROOT_PATH . ‘public/uploads/images’);
if($info) {
return json_encode($info->getSaveName());
}
}

<div id=”slideshow”>
<ul class=”rslides” id=”slider”>
{volist name=”data” id=”vo”}
<li><a href=”https://www.jb51.net/article/{$vo.url}” rel=”external nofollow” rel=”bookmark” target=”_blank”> <img src=”https://www.jb51.net/article/__UPLOADS__/images/{$vo.img}” max-width=”” max-height=”” alt=”{$vo.title}”></a>
<p class=”slider-caption”>{$vo.title}</p>
</li>
{/volist}
</ul>
</div>

到此这篇关于Thinkphp结合ajaxFileUpload实现ajax异步图片传输全套代码的文章就介绍到这了,更多相关Thinkphp加ajaxFileUpload实现图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:ajaxFileupload实现多文件上传功能jQuery插件ajaxFileUpload使用详解jQuery插件ajaxFileUpload异步上传文件jQuery插件ajaxfileupload.js实现上传文件ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法ajaxFileUpload.js插件支持多文件上传的方法