通过discus配置并部署filepond，开源图片附件上传功能加载插件
**FilePond 配置的完整JS代码**
> 以下代码最终解释权归ultradebug团队所有。
> 严禁以任何形式倒卖、出售等非法利用。
> 站长不易，如此代码对你有用，望请理性赞助！
根据开发者协议及GitHub麻省理工学院许可证现对以下代码段进行公开开源，感谢各位站长参考学习。
```html
<!--////////////////以下代码最终解释权归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');
const ImageinputElement= document.querySelector('input');
//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}
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=' + {$_G})+(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=' + {$_G}), 'image_td_'+aid);
}
load(request.responseText);
} else {
error('oh no');
}
};
request.send(formData);
return {
abort: () => {
request.abort();
abort();
},
};
},
},
});
FilePond.parse(document.body);
</script>
<!--/////////////////////////////////////////////////////////////////////-->
```
页:
[1]