TP5 intègre webuploader pour réaliser un aperçu, un glisser-déposer, une recherche et une suppression-tutoriel php-php.cn

TP5 intègre webuploader pour réaliser un aperçu, un glisser-déposer, une recherche et une suppression

*文

Libérer： 2023-03-19 06:56:02

original

2768 Les gens l'ont consulté

Cet article présente principalement un exemple de thinkphp5 intégrant webuploader et l'encapsulant dans un composant de téléchargement, qui est fourni pour votre référence. J'espère que cela aide tout le monde.

WebUploader est un composant simple et moderne de téléchargement de fichiers développé par l'équipe Baidu WebFE (FEX) basé sur HTML5 et complété par FLASH. Il peut exploiter pleinement les avantages du HTML5 dans les navigateurs modernes sans abandonner le navigateur IE traditionnel. Il utilise le runtime FLASH d'origine et est compatible avec IE6+, iOS 6+, Android 4+. Les deux ensembles de runtimes ont la même méthode d'appel et peuvent être sélectionnés par l'utilisateur. L'utilisation du téléchargement simultané de fichiers volumineux par fragments améliore considérablement l'efficacité du téléchargement de fichiers.

Récemment, de nombreux navigateurs ont été mis à niveau pour prendre entièrement en charge HTML5 et Flash désactivé. De nombreux plug-ins de téléchargement nécessitent Flash, comme uploadify utilisé dans notre projet, qui peut être consulté dans la dernière version. Google Firefox Il n'est pas compatible avec la version précédente, je l'ai donc finalement remplacé par webuploader, qui se sent très bien et est compatible avec les téléchargements HTML5 et flash. Il prend également en charge le téléchargement en plusieurs parties de fichiers volumineux. Les amis intéressés peuvent continuer à optimiser. et améliorer. Prenez quelques captures d'écran ci-dessous pour voir l'effet

<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>

Copier après la connexion

Recommandations associées :

Explication détaillée de la façon dont ThinkPHP génère et vérifie les codes de vérification

thinkphp5 Méthodes de téléchargement d'images et de génération de vignettes

Exemples détaillés d'URL thinkphp5 et de fonctions de routage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!