Web Uploader 文件上传的使用

Web Uploader 的使用

一、引用css

 {{-- webuploader上传样式 --}}
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/>

二、HTML部分的编写

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章封面:</label>
                <div class="formControls col-xs-4 col-sm-5">
                    <!-- 表单提交时的封面地址 方便服务器端的接收和存储 -->
                    <input type="hidden" name="pic" id="pic" value="{{ config(‘up.pic‘) }}">
                    {{--Web Uploader 要绑定的--}}
                    <div id="picker">上传文章封面</div>
                </div>
                {{--用于显示上传成功后的图片--}}
                <div class="formControls col-xs-4 col-sm-4">
                    <img src="" id="img" style="width: 50px;">
                </div>
            </div>

三、引入js

 <!-- webuploader上传js -->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>

四、js部分的编写

// 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后,是否自动上传
                auto: true,
                // swf文件路径
                swf: ‘/webuploader/Uploader.swf‘,
                // 文件接收服务端 上传PHP的代码
                server: ‘{{ route(‘admin.article.upFile‘) }}‘,
                // 文件上传是携带参数
                formData: {
                    _token: ‘{{csrf_token()}}‘
                },
                // 文件上传是的表单名称
                fileVal: ‘file‘,
                // 选择文件的按钮
                pick: {
                    id: ‘#picker‘,
                    // 是否开启选择多个文件的能力,默认true
                    multiple: false
                },
                // 压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
                resize: true
            });
            // 上传成功时的回调方法
        //file 上传成功后关于文件的信息  ret 服务器端返回的json数据
            uploader.on(‘uploadSuccess‘, function (file, ret) {
                console.log(file);
                console.log(ret);
                // 图片路径
                let src = ret.src;
                // 给表单添加value值
                $(‘#pic‘).val(src);
                // 给图片添加src
                $(‘#img‘).attr(‘src‘,src);
            });

五、服务器端代码的编写

public function upFile(Request $request)
    {
        //文件上传
        //默认封面图片
        $pic = config(‘upload.pic‘);

        if($request->hasFile(‘file‘))
        {
            //上传
            //参数2 配置的节点 名称
            $result = $request->file(‘file‘)->store(‘‘,‘article‘);
//            dump($result);
            $pic = ‘/uploads/article/‘.$result;
//            dd($pic);
        }
        $post = $request->except(‘_token‘);
        $post[‘pic‘] = $pic;
        //添加 入库操作
//        Article::create($post);
        return response()->json([‘status‘=>10001,‘msg‘=>‘上传成功!‘,‘src‘=>$pic]);
    }

六、留有bug

没有入库操作,因为不仅是上传文件,还有其他内容。。。。后续会更新。。。。

原文地址:https://www.cnblogs.com/zqblog1314/p/12708239.html

时间: 04-15

Web Uploader 文件上传的使用的相关文章

Web Uploader文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu

Web Uploader文件上传插件

http://www.jq22.com/jquery-info2665 插件描述:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率. 分片.并发 分片与并发结合,将一

springBoot(10):web开发-文件上传

一.简介 Spring Boot默认使用springMVC包装好的解析器进行上传 二.代码实现 2.1.from表单 <form method="POST" enctype="multipart/form-data" action="/file/upload">     文件:<input type="file" name="roncooFile" />     <input 

Stream - Web大文件上传插件

Stream 简介 Stream 是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他)的上传工作,当然在Html5标准下,还支持文件的断点续传功能,有效解决大文件的Web上传问题! 主要特征 1. 支持HTML5.Flash两种方式(跨域)上传 2. 多文件一起上传 3. HTML5支持断点续传,拖拽等新特性 4. 兼容性好IE7+, FF3.6+,

Fine Uploader文件上传组件

最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要求类似IE版本必须是9或是更高的IE10].在不同浏览器中提供统一用户体验.该组件基本覆盖目前所有主流浏览器.同时没有任何第三方组件依赖.相当Clear.在服务器端已经覆盖支持了ASP.NET/ColdFusion/Java/Node.js/Perl/PHP/Python. 对上传细节类似限制文件大

Win Form + ASP.NET Web Service 文件上传下载--HYAppFrame

本章节主要讲解HYAppFrame服务器端如何ASP.NET Web Service实现文件(含大文件)上传,WinForm客户端如何下载文件. 1    服务器端文件上传 1.1 上传文件 函数FileUpload(stringfileFullPath, byte[] file)用于上传文件,生成文件前检查文件路径所在文件夹是否存在,不存在则首先创建文件夹. [WebMethod(EnableSession = true,Description = "上传文件")] public i

Uploader 文件上传器类

概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由服务端存储断点信息实现断点续传的功能:支持文件拖拽上传,直接将文件拖拽到页面元素上方即可自动上传(默认元素是body):服务端采用asp.net 4.0程序开发,包含有处理程序,提供程序和视图控件,当然也可以用java或者php实现服务端程序. 浏览器兼容:IE10+.火狐.谷歌.Opera.win

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.cnblogs.com/cgzl/p/8525541.html 第四部分: https://www.cnblogs.com/cgzl/p/8536350.html 这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api. 这是

java+web+大文件上传下载

文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用HTML5的API,对文件上传进行渐进式增强:     * iframe上传  * ajax上传  * 进度条  * 文件预览  * 拖放上传 1.1 传统形式 文件上传的传统形式,是使用表单元素file,参考 http://www.ruanyifeng.com/blog/2012/08/file_

web大文件上传解决方案支持分片断点上传

一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输.关闭浏览器后保留进度信息. 支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端文件夹层级结构与本地相同. 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验:支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构. 支持断点续传,关闭浏览器或刷新浏览