TP5 は Webuploader を統合し、プレビューのドラッグ検索と削除を実現します-PHPチュートリアル-php.cn

TP5 は Webuploader を統合し、プレビューのドラッグ検索と削除を実現します

*文

リリース： 2023-03-19 06:56:02

オリジナル

2810 人が閲覧しました

この記事では主に、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(&#39;Uploadify/delupload&#39;)}",
            "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^=&#39;fileurl_tmp&#39;]").each(function(index,dom){
                    fileurl_tmp[index] = dom.value;
                 });    
            }else{
                fileurl_tmp = $("input[name^=&#39;fileurl_tmp&#39;]").val();    
            }
            eval(&#39;window.parent.&#39;+callback+&#39;(fileurl_tmp)&#39;);
            window.parent.layer.closeAll();
            return;
        }                     
        if(num > 1){
                var fileurl_tmp = "";
                $("input[name^=&#39;fileurl_tmp&#39;]").each(function(){
                    fileurl_tmp += &#39;<li rel="&#39;+ this.value +&#39;"><input class="input-text" type="text" name="{$info.input}[]" value="&#39;+ this.value +&#39;" /><a href="javascript:void(0);" onclick="ClearPicArr(\&#39;&#39;+ this.value +&#39;\&#39;,\&#39;\&#39;)">删除</a></li>&#39;;    
                });            
                $(window.parent.document).find("#{$info.input}").append(fileurl_tmp);
        }else{
                $(window.parent.document).find("#{$info.input}").val($("input[name^=&#39;fileurl_tmp&#39;]").val());
        }
        window.parent.layer.closeAll();
    });
    
});
</script>
</body>
</html>

ログイン後にコピー