UltraDebug

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: A C D R G Y M Z X S P
公益项目,接受捐赠
查看: 1515|回复: 0
收起左侧

[JavaScript] 通过discus配置并部署filepond,开源图片附件上传功能加载插件

[复制链接]
ultradebug

主题

0

回帖

UD

管理员

UID
1
积分
2344
注册时间
2021-12-20
最后登录
1970-1-1
2023-3-1 16:37:45 | 显示全部楼层 |阅读模式

FilePond 配置的完整JS代码

以下代码最终解释权归ultradebug团队所有。
严禁以任何形式倒卖、出售等非法利用。
站长不易,如此代码对你有用,望请理性赞助!

根据开发者协议及GitHub麻省理工学院许可证现对以下代码段进行公开开源,感谢各位站长参考学习。

<!--////////////////以下代码最终解释权归ultradebug团队所有/////////////////-->
<!--////////////////严禁以任何形式倒卖、出售等非法利用/////////////////-->
<!--////////////////站长不易,如此代码对你有用,望请理性赞助!/////////////////-->

<input type="file" class="filepond image " name="image_upload" multiple>
<input type="file" class="filepond attach" name="attach_upload" multiple >

<!--////////////////////////////整体部分///////////////////////////////////////////-->

<script src="https://sc.qingjue.cn/data/FilePond/filepond-plugin-image-preview.js" type="text/javascript"></script>
<script src="https://sc.qingjue.cn/data/FilePond/filepond-plugin-file-validate-size.js" type="text/javascript"></script>
<script src="https://sc.qingjue.cn/data/FilePond/filepond-plugin-file-validate-type.js" type="text/javascript"></script>
<script src="https://sc.qingjue.cn/data/FilePond/filepond.js" type="text/javascript"></script>

<!--{eval 
$swf_hash =  md5(substr(md5($_G['config']['security']['authkey']), 8).$_G['uid']);
 }-->
<script type="text/javascript">

    //注册插件
    FilePond.registerPlugin(    
        FilePondPluginImagePreview, 
        FilePondPluginFileValidateSize, 
        FilePondPluginFileValidateType,
    );  

    const FileinputElement = document.querySelector('input[name="attach_upload"]');
    const ImageinputElement= document.querySelector('input[name="image_upload"]');

    //Hash 表单提交的能力
    const FORMHASH = "{$swf_hash}"

    //附件上传配置选项
    const filePond = FilePond.create(FileinputElement, {
        maxFileSize: '8192KB',      //文件大小控制
        imagePreviewHeight: 88,     //图片预览高度控制
        acceptedFileTypes: ['text/plain','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.openxmlformats-officedocument.presentationml.presentation','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/pdf','application/x-msdownload','application/x-zip-compressed','application/vnd.android.package-archive'],        //txt,docx,pptx,xlsx,pdf,exe,zip,apk
        fileValidateTypeDetectType: (source, type) =>
        new Promise((resolve, reject) => {
            // 在这里进行自定义类型检测并返回 promise
            resolve(type);
        }),
    });

    //图片上传配置选项
    const imagePond = FilePond.create(ImageinputElement, {
        maxFileSize: '8192KB',
        imagePreviewHeight: 88,
        acceptedFileTypes: ['image/jpg','image/jpeg','image/gif','image/png','image/bmp'],      //允许的文件MIME扩展名
        fileValidateTypeDetectType: (source, type) =>
        new Promise((resolve, reject) => {
            // 在这里进行自定义类型检测并返回 promise
            resolve(type);
        }),
    });

    var upload_type=''

    FilePond.setOptions({   

        //汉化
        labelIdle:"通过FilePond拖拽或选择图片上传",
        labelFileLoading: "初始化...",
        labelFileProcessing: "上传中...",
        labelTapToRetry: "重新尝试",
        labelTapToCancel: "点击取消上传",
        labelFileProcessingComplete: "上传完成",
        labelFileProcessingAborted:"上传取消",
        labelTapToUndo:"点击右上角删除",

        server: {

            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {

            const formData = new FormData();

            //formData.append('uid',1);     //限制UID为1的用户才能上传
            formData.append('uid',discuz_uid);      //允许所有用户可以上传

            formData.append('hash',FORMHASH);

            formData.append('filetype',file.type);

            if(file.type.indexOf('image')!=-1&&fieldName=='image_upload'){
                formData.append('type','image');
            }else{
            formData.append('type',file.type);
            }
            formData.append('size',file.size);

            formData.append('Filedata', file, file.name);

            const request = new XMLHttpRequest();

            //上传接口
            var upload_url='/misc.php?mod=swfupload&action=swfupload&operation=upload&fid='+{$_G[fid]}

            request.open('post',upload_url);

            const num=document.getElementsByClassName('progressWrapper').length;

        if(fieldName=='attach_upload'){
            const fileProgressWrapper = document.createElement("div");

            fileProgressWrapper.className = "progressWrapper";

            fileProgressWrapper.id = "WU_FILE_"+num;

            document.getElementById('fsUploadProgress').appendChild(fileProgressWrapper)
        }else if(fieldName=='image_upload'){
            var newTr = document.createElement("TR");
                var newTd = document.createElement("TD");
                var img = new Image();
                // img.src = data.url;
                var imgObj = document.createElement("img");
                imgObj.src = img.src;
                newTd.className = 'c';
                newTd.appendChild(imgObj);
                newTr.appendChild(newTd);
                newTd = document.createElement("TD");
                newTd.innerHTML = '<strong>'+file.name+'</strong>';
                newTr.appendChild(newTd);
                newTd = document.createElement("TD");
                newTd.className = 'd';
                newTd.innerHTML = '图片描述<br/><textarea name="title['+num+']" cols="40" rows="2" class="pt"></textarea>';
                newTr.appendChild(newTd);
                // document.getElementById('imgattachlist').appendChild(newTr);

        }

            request.upload.onprogress = (e) => {
                progress(e.lengthComputable, e.loaded, e.total);

            };

            request.onload = function (res) {
                if (request.status >= 200 && request.status < 300) {

                    const aid = parseInt(request.responseText);

                    console.log(file.type)
                    //图片附件Ajax验证
                    if(fieldName=='attach_upload'){
                    ajaxget('forum.php?mod=ajax&action=attachlist&aids=' + aid + (!{$_G[fid]} ? '' : '&fid=' + {$_G[fid]})+(typeof resulttype == 'undefined' ? '' : '&result=simple'), 'WU_FILE_'+num);
                    }else if(fieldName=='image_upload'){
                        var tdObj = getInsertTdId(document.getElementById('imgattachlist'), 'image_td_'+aid);
                        ajaxget('forum.php?mod=ajax&action=imagelist&type=single&pid=0&aids=' + aid + (!{$_G[fid]} ? '' : '&fid=' + {$_G[fid]}), 'image_td_'+aid);
                    }

                    load(request.responseText);
                } else {

                    error('oh no');
                }
            };

            request.send(formData);

            return {
                abort: () => {

                    request.abort();

                    abort();
                },
            };
        },
    },

    }); 

    FilePond.parse(document.body);

</script>
<!--/////////////////////////////////////////////////////////////////////-->

editor_menu_forum.zip

6.27 KB, 下载次数: 3, 下载积分: UD -2

UltraDebug免责声明
✅以上内容均来自网友转发或原创,如存在侵权请发送到站方邮件9003554@qq.com处理。
✅The above content is forwarded or original by netizens. If there is infringement, please send the email to the destination 9003554@qq.com handle.
回复 打印

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|Archiver|站点地图|UltraDebug ( 滇ICP备2022002049号-2 滇公网安备 53032102000034号)

GMT+8, 2025-6-21 00:14 , Processed in 0.035034 second(s), 11 queries , Redis On.

Powered by Discuz X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表