TP5 基于Bootstrap 3可预览的HTML5文件上传插件（单文件测试成功）

最新推荐文章于 2021-06-28 21:43:24 发布

苦艾酒丶

最新推荐文章于 2021-06-28 21:43:24 发布

阅读量696

点赞数

分类专栏： TP5 文章标签： TP5 基于Bootstrap 3可预览的HTML5文件

本文链接：https://blog.csdn.net/php12345679/article/details/79931990

版权

TP5 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

view上传页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>头部-有点</title>
      <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
        <link href="/css/admin/fileinput.css" media="all" rel="stylesheet" type="text/css" />
        <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="/js/admin/fileinput.js" type="text/javascript"></script>
        <script src="/js/admin/fileinput/locales/zh.js" type="text/javascript"></script>
        <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js" type="text/javascript"></script>       
</head>
<body>

                <form action="{:url('Coupon/coupon_add')}" method="post"  enctype="multipart/form-data">  
                    <input name="coupon_imageurl" id="img" type="hidden" value=""><!-用于把上传的图片地址放到隐藏框 提交更新到数据库-!>
                <div class="bbD" >
                    <div class="form-group">
                    图片 ：<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false"  name="file">

                    </div>
                </div>


                <div class="bbD">
                    <p class="bbDP">
                        <button class="btn_ok btn_yes" href="#"  type="submit">提交</button>
                        <a class="btn_ok btn_no" href="#">取消</a>
                    </p>
                </div>
                </form>
     
        <!-- 上传广告页面样式end -->
<script>
    $("#file-1").fileinput({
        language: 'zh', //设置语言 中文
        uploadUrl: "{:url('coupon/upload_images')}", // 必须设置个路径进入php代码部分
        uploadAsync:true,//用异步上传
        allowedFileExtensions : ['jpg', 'png','gif','txt','zip','ico','jpeg','js','css','java','mp3','mp4','doc','docx'],//允许的文件类型
        overwriteInitial: false,
        maxFileSize: 1500,//文件的最大大小 单位是k
        maxFileCount:1,  //最多文件数量
        // allowedFileTypes: ['image', 'video', 'flash'],
    }).on("fileuploaded", function (event,data) {
            if(data.response)
            {
                document.getElementById("img").value=data.response.image_url;//这一步必须要用js赋值  不能用jQuery来写
            }

        //$("#img").val(event.image_url);
    });
</script>
</body>
</html>

后台控制器里写的方法

 /**
     * 优惠券添加
     *
     */
    public function coupon_add()
    {
       $request =  Request::instance();
        if($request->isPost())
        {
            dump($request->post('coupon_imageurl'));
        }
        return $this->fetch();
    }
    /**
     *
     * 文件上传
     */
    public function  upload_images()
    {

        $request = Request::instance();
        if($request->isPost()) {
            $file = $request->file('file');
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            //上传成功
            if ($info) {
                $data['image_url'] = str_replace("\\", "/", "http://" . $_SERVER['SERVER_NAME'] . "/uploads/" . $info->getSaveName());
               echo json_encode($data);
            } else {
                //上传失败获取错误信息
                die('{"flag" : "0"}');
            }
        }


    }

html里要引入的文件资源地址

https://download.csdn.net/download/php12345679/10347248

可以参考的一些网址https://blog.csdn.net/u012526194/article/details/69937741

苦艾酒丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TP5 基于Bootstrap 3可预览的HTML5文件上传插件（单文件测试成功）

view上传页面&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; ..
复制链接

扫一扫

专栏目录