首页 > php框架 > ThinkPHP > 正文

Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输

PHPz
发布: 2023-05-30 22:13:04
转载
1125人浏览过

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"  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">@@##@@</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"> @@##@@</a>
      <p class="slider-caption">{$vo.title}</p>
    </li>
    {/volist}
  </ul>
</div>
登录后复制
Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输

以上就是Thinkphp怎么结合ajaxFileUpload实现ajax异步图片传输的详细内容,更多请关注php中文网其它相关文章!

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:亿速云网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号