# 文件上傳 `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 |