这篇文章主要介绍“Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输”文章能帮助大家解决问题。
先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。
计算
安全
数据库
网络和加速
企业服务
<script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script>
<script src="__ADMIN__/js/ajaxfileupload.js"></script><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" 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}" alt=""></div>
</div> <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> //单文件（包含单文件）异步上传
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="{$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>关于“Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
