# 文件上传 `YznCMS`开发框架支持将文件、图片、视频、压缩包等文件快速的上传至本地服务器或云存储。 ### 上传示例 ``` <div class="layui-form-item"> <label class="layui-form-label layui-form-item-required">图片</label> <div class="layui-input-block"> <div class="layui-col-xs4"> <input type="text" name="row[pic]" id="c-pic" value="" class="layui-input"> </div> <button type="button" class="layui-btn faupload" id="faupload-pic" data-multiple="false" data-input-id="c-pic" data-preview-id="p-pic" data-type="image"><i class="layui-icon layui-icon-upload"></i> 上传</button><button type="button" class="layui-btn fachoose" data-multiple="false" data-mimetype="image" data-input-id="c-pic" id="fachoose-c-pic"><i class="iconfont icon-other"></i> 选择</button> <ul class="layui-row list-inline plupload-preview" id="p-pic"></ul> </div> </div> ``` 以上代码会生成一个input文本框、一个上传按钮、一个选择按钮和一个预览的DIV | 类型 | 说明 | | --- | --- | | input文本框 | 用于回传上传后返回的图片链接，文本框`id`属性是必填，这里的`id`是`c-pic` | | 上传按钮 | 用于点击后上传文件，参数请参考下方的上传按钮属性介绍| | 选择按钮 | 用于点击后选择已经上传的文件，参数请参考下方的选择按钮属性介绍 | | 预览区域 | 用于预览上传或选择文件后的预览。`id`属性是必选的，这里的`id`是`p-pic` | ## 大附件上传，方式一（修改配置） 要上传100MB的附件，你需要同时配置PHP和Nginx。 首先，配置PHP的php.ini文件， 找到以下配置项，并进行相应的修改： * `upload_max_filesize`：设置为100M或更大的值，例如：`upload_max_filesize = 100M` * `post_max_size`：设置为比`upload_max_filesize`更大的值，例如：`post_max_size = 105M` * `max_execution_time`：设置为较大的值，以确保上传过程不会超时，例如：`max_execution_time = 300` 接下来，配置Nginx的nginx.conf文件，找到server块，并添加以下配置项：`client_max_body_size 100M;` ## 大附件上传，方式二（分片上传） 如果需要启用分片上传，必须客户端和服务端同时开启。首先找到`application/config/app.php`，修改其中的`chunking`值为`true`。 其次给按钮添加`data-chunking=true`属性即可，如果提示文件过大，可以再添加`data-maxsize="1024M"`来控制允许上传的文件大小。 ### 按钮属性 上传按钮支持属性 | 属性 | 示例值 | 说明 | | --- | --- | --- | | data-multipart | {"key1":"value1"} | 用于上传时附加额外的参数信息 | | data-input-id | c-pic | 用于填充返回URL地址的设文本框 | | data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 | | data-multiple | false | 是否支持多图或多文件模式 | | data-preview-id | p-pic | 用于预览返回URL地址的DIV | | data-maxsize | 10M | 用于限制最大可上传的文件大小 | | data-maxcount | 1 | 用于限制最大可上传的文件数量 | | data-timeout | 60000 | 用于设定上传超时时长，`60000`表示`60`秒，默认为`30000`，表示`30`秒 | | data-chunking | true | 是否启用分片上传 | | data-chunk-size | 2097152 | 分片单片文件大小 | | data-resize-quality | 0.8 | 默认不压缩，只有当设置`resizeWidth`或`resizeHeight`时才压缩，设置上传图片的压缩品质 | | data-resize-width | 1024 | 默认为`null`不剪裁 | | data-resize-height | 768 | 默认为`null`不剪裁 | 选择按钮支持属性 | 属性 | 示例值 | 说明 | | --- | --- | --- | | data-input-id | c-pic | 用于填充返回URL地址的设文本框 | | data-mimetype | image/gif,image/jpeg,image/png,image/jpg,image/bmp | 用于过滤允许上传的文件类型，支持mimetype或文件后缀名 | | data-multiple | false | 是否支持多图或多文件模式 | | data-preview-id | p-pic | 用于预览返回URL地址的DIV |