この記事では主に、thinkphp5 が webuploader を統合し、アップロード コンポーネントにカプセル化する例を紹介します。参考のために提供します。お役に立てれば幸いです。
WebUploader は、HTML5 に基づいて Baidu WebFE (FEX) チームによって開発され、FLASH によって補完されたシンプルでモダンなファイル アップロード コンポーネントです。主流の IE ブラウザを放棄することなく、最新のブラウザで HTML5 の利点を最大限に活用でき、オリジナルの FLASH ランタイムを使用し、IE6 以降、iOS 6 以降、Android 4 以降と互換性があります。 2 つのランタイム セットの呼び出し方法は同じであり、ユーザーが選択できます。大きなファイルを断片的に同時にアップロードすると、ファイルのアップロード効率が大幅に向上します。
最近、多くのブラウザが HTML5 を完全にサポートするようにアップグレードされ、多くのアップロード プラグインは Flash を必要とします。たとえば、私たちのプロジェクトで使用されている Uploadify は、最新の Google Firefox と互換性がありません。これは非常に優れた代替品であり、HTML5 と Flash の両方のアップロードと互換性があり、大きなファイルのマルチパート アップロードもサポートしています。興味のある方は引き続き最適化と改善を行うことができます。効果を確認するには、以下の写真をいくつか撮ってください
<html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>文件管理</title> <link rel="stylesheet" type="text/css" href="/public/plugins/webuploader/webuploader.css"> <link rel="stylesheet" type="text/css" href="/public/plugins/webuploader/css/style.css"> </head> <body> <p class="upload-box"> <ul class="tabs"> <li class="checked" id="upload_tab">本地上传</li> <li id="manage_tab">在线管理</li> <li id="search_tab">文件搜索</li> </ul> <p class="container"> <p class="area upload-area area-checked" id="upload_area"> <p id="uploader"> <p class="statusBar" style="display:none;"> <p class="progress"> <span class="text">0%</span> <span class="percentage"></span> </p><p class="info"></p> <p class="btns"> <p id="filePicker2"></p><p class="uploadBtn">开始上传</p> <p class="saveBtn">确定使用</p> </p> </p> <p class="queueList"> <p id="dndArea" class="placeholder"> <p id="filePicker"></p> <p>或将文件拖到这里,本次最多可选{$info.num|default=1}个</p> </p> </p> </p> </p> <p class="area manage-area" id="manage_area"> <ul class="choose-btns"> <li class="btn sure checked">确定</li> <li class="btn cancel">取消</li> </ul> <p class="file-list"> <ul id="file_all_list"> <!--<li class="checked"> <p class="img"> <img src="" /> <span class="icon"></span> </p> <p class="desc"></p> </li>--> </ul> </p> </p> <p class="area search-area" id="search_area"> <ul class="choose-btns"> <li class="search"> <p class="search-condition"> <input class="key" type="text" /> <input class="submit" type="button" hidefocus="true" value="搜索" /> </p> </li> <li class="btn sure checked">确定</li> <li class="btn cancel">取消</li> </ul> <p class="file-list"> <ul id="file_search_list"> <!--<li> <p class="img"> <img src="" /> <span class="icon"></span> </p> <p class="desc"></p> </li>--> </ul> </p> </p> <p class="fileWarp" style="display:none;"> <fieldset> <legend>列表</legend> <ul> </ul> </fieldset> </p> </p> </p> <script type="text/javascript" src="/public/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/public/plugins/webuploader/webuploader.min.js"></script> <script type="text/javascript" src="/public/plugins/webuploader/upload.js"></script> <script> $(function(){ var config = { "swf":"/public/plugins/webuploader/Uploader.swf", "server":"{$info.upload}", "filelistPah":"{$info.fileList}", "delPath":"{:U('Uploadify/delupload')}", "chunked":false, "chunkSize":524288, "fileNumLimit":{$info.num|default=1}, "fileSizeLimit":209715200, "fileSingleSizeLimit":2097152, "fileVal":"file", "auto":true, "formData":{}, "pick":{"id":"#filePicker","label":"点击选择图片","name":"file"}, "thumb":{"width":110,"height":110,"quality":70,"allowMagnify":true,"crop":true,"preserveHeaders":false,"type":"image\/jpeg"} }; Manager.upload($.extend(config, {type : "Images"})); /*点击保存按钮时 *判断允许上传数,检测是单一文件上传还是组文件上传 *如果是单一文件,上传结束后将地址存入$input元素 *如果是组文件上传,则创建input样式,添加到$input后面 *隐藏父框架,清空列队,移除已上传文件样式*/ $(".statusBar .saveBtn").click(function(){ var callback = "{$info.func}"; var num = {$info.num|default=1}; var fileurl_tmp = []; if(callback != "undefined"){ if(num > 1){ $("input[name^='fileurl_tmp']").each(function(index,dom){ fileurl_tmp[index] = dom.value; }); }else{ fileurl_tmp = $("input[name^='fileurl_tmp']").val(); } eval('window.parent.'+callback+'(fileurl_tmp)'); window.parent.layer.closeAll(); return; } if(num > 1){ var fileurl_tmp = ""; $("input[name^='fileurl_tmp']").each(function(){ fileurl_tmp += '<li rel="'+ this.value +'"><input class="input-text" type="text" name="{$info.input}[]" value="'+ this.value +'" /><a href="javascript:void(0);" onclick="ClearPicArr(\''+ this.value +'\',\'\')">删除</a></li>'; }); $(window.parent.document).find("#{$info.input}").append(fileurl_tmp); }else{ $(window.parent.document).find("#{$info.input}").val($("input[name^='fileurl_tmp']").val()); } window.parent.layer.closeAll(); }); }); </script> </body> </html>
関連する推奨事項:
ThinkPHP が検証コードを生成および検証する方法の詳細な説明
以上がTP5 は Webuploader を統合し、プレビューのドラッグ検索と削除を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。