zoukankan      html  css  js  c++  java
  • 工具系列 | 使用FormData方式上传文件

    服务端代码

    /**
     * 文件上传
     */
    public function uploadFile()
    {
        Log::error('文件上传 : '.json_encode($_FILES));
        $dir = $this->request->post('type', 'file');
        $file = $this->request->file('avatar');
        if (!empty($file)) {
            $info = $file->validate(['size' => 20480, 'ext' => 'jpg,png,gif,pfx,cer'])->move(Env::get('root_path') . 'public/upload/' . $dir);
            if ($info) {
                $file_path = str_replace("\", "/", '/upload/' . $dir . '/' . $info->getSaveName());
                return response_json(0, '上传成功',['url' => $file_path]);
            } else {
                return response_json(1, $file->getError());
            }
        } else {
            return response_json(1, '未选择文件');
        }
    }
    

     前端页面

    <span class="img_upload">点击我上传</span>
    
    <input type="file" class="avatar" style="display: none;">
    <script type="text/javascript" src="/assets/common/js/jquery.min.js"></script>
    <script type="application/javascript">
        // 上传图片
        $('.img_upload').click(function() {
            $('.avatar').click();
        });
    
        $('.avatar').change(function() {
            // 获取上传文件,拿到type为file的input的具体文件,由于可能存在多选择文件问题,所以这里是[0]取第一个。
            var _avatar = $('.avatar')[0]['files'][0];
            var _fromData = new FormData();
            _fromData.append('username', 'Tinywan');
            _fromData.append('age', 24);
            _fromData.append('avatar', _avatar);
    
            $.ajax({
                url: "{:url('/index/Test/uploadFile')}",
                type: "POST",
                cache: false,
                data: _fromData,
                dataType: "JSON",
                processData: false, // 设置 processData 选项为 false,防止自动转换数据格式。
                contentType: false, // 告诉jquery不要设置content-Type请求头
                success: function(data) {
                    // 上传成功后,清空当前文件,继续点击上传单个文件。否则不能继续点击上传
                    $('.avatar').val("");
                    console.log(data);
                },
                error: function(data) {
                    console.log(data);
                }
            });
        });
    </script>

     1、全局文件数组接受参数:$_FILES

    {
    "avatar": {
    "name": "2.png",
    "type": "image/png",
    "tmp_name": "/tmp/phppFGojm",
    "error": 0,
    "size": 11965
    }
    }
    

     以上接受的参数是通过添加文件

    var _avatar = $('.avatar')[0]['files'][0];
    _fromData.append('avatar', _avatar);  

    服务端接受

    $file = $this->request->file('avatar');  

    说明:这里传递的二进制文件名称必须和服务端接受的名称同名。其他数据可以通过POST方式接受:$post = $this->request->post();  

    2、增加第三个参数

    _fromData.append('avatar', _avatar,'tinywan.png'); 

    语法:formData.append(name, value, filename); 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候, Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。更多:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append

    服务端接受参数

    {
    "avatar": {
    "name": "tinywan.png", // 重点在这里
    "type": "image/png",
    "tmp_name": "/tmp/phpponpkP",
    "error": 0,
    "size": 11965
    }
    }

    参考

    1、https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

    2、https://www.cnblogs.com/lyr1213/p/6238026.html  

  • 相关阅读:
    Django对静态文件的处理——部署阶段
    使用Django来处理对于静态文件的请求
    Django1.7如何配置静态资源访问
    Spring WebSocket中403错误解决
    FastJSON JSONObject 字段排序 Feature.OrderedField
    国际化(i18n) 各国语言缩写
    【转】java.io.Closeable接口
    【转】spring bean 卸载
    This content should also be served over HTTPS
    Failed to close the ServletOutputStream connection cleanly, Broken pipe
  • 原文地址:https://www.cnblogs.com/tinywan/p/11942761.html
Copyright © 2011-2022 走看看