🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
ThinkCMF封装了文件上传,开发者只要在模板中使用已经封装好的 js 方法就可以了,相关方法在 `admin.js`和`frontend.js`,相关函数如下: ## 上传对话框 ``` /** * 打开文件上传对话框 * @param dialog_title 对话框标题 * @param callback 回调方法,参数有(当前dialog对象,选择的文件数组,你设置的extra_params) * @param extra_params 额外参数,object * @param multi 是否可以多选 * @param filetype 文件类型,image,video,audio,file * @param app 应用名,CMF的应用名 */ function openUploadDialog(dialog_title, callback, extra_params, multi, filetype, app) ``` ## 单个文件上传 ``` /** * 单个文件上传 * @param dialog_title 上传对话框标题 * @param input_selector 图片容器 * @param filetype 文件类型,image,video,audio,file * @param extra_params 额外参数,object * @param app 应用名,CMF的应用名 */ function uploadOne(dialog_title, input_selector, filetype, extra_params, app) ``` 比如上传一个文件: ``` <input id="file-1" type="hidden" name="file_url" > <input id="file-1-name" type="text" name="file_name" title="图片名称"> <a id="file-1-preview" target="_blank">下载</a> <a href="javascript:uploadOne('图片上传','#file-1','file');">上传</a> ``` ## 单个图片上传 ``` /** * 单个图片上传 * @param dialog_title 上传对话框标题 * @param input_selector 图片容器 * @param extra_params 额外参数,object * @param app 应用名,CMF的应用名 */ function uploadOneImage(dialog_title, input_selector, extra_params, app) ``` 比如上传一张图片 ``` <input id="photo-1" type="hidden" name="photo_url" > <input id="photo-1-name" type="text" name="photo_name" title="图片名称"> <img id="photo-1-preview" > <a href="javascript:uploadOneImage('图片上传','#photo-1');">上传</a> ``` ## 多图上传 ``` /** * 多图上传 * @param dialog_title 上传对话框标题 * @param container_selector 图片容器 * @param item_tpl_wrapper_id 单个图片html模板容器id * @param extra_params 额外参数,object * @param app 应用名,CMF 的应用名 */ function uploadMultiImage(dialog_title, container_selector, item_tpl_wrapper_id, extra_params, app) ``` ## 多文件上传 ``` /** * 多文件上传 * @param dialog_title 上传对话框标题 * @param container_selector 图片容器 * @param item_tpl_wrapper_id 单个图片html模板容器id * @param filetype 文件类型,image,video,audio,file * @param extra_params 额外参数,object * @param app 应用名,CMF 的应用名 */ function uploadMultiFile(dialog_title, container_selector, item_tpl_wrapper_id, filetype, extra_params, app) ``` ## 视频讲解 https://segmentfault.com/l/1500000011309971 (付费) 此视频是 js 文件上传的讲解