FilePond 实例
<!DOCTYPE html>
<html>
<head>
<title>FilePond from CDN</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Filepond stylesheet -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<style>
.filepond--root {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
.filepond--root {
/*max-height: 10em;*/
}
/* use a hand cursor intead of arrow for the action buttons */
.filepond--file-action-button {
cursor: pointer;
}
/* the text color of the drop label*/
.filepond--drop-label {
color: #555;
}
/* underline color for "Browse" button */
.filepond--label-action {
text-decoration-color: #aaa;
}
/* the background color of the filepond drop area */
.filepond--panel-root {
background-color: #eee;
}
/* the border radius of the drop area */
.filepond--panel-root {
border-radius: 0.5em;
}
/* the border radius of the file item */
.filepond--item-panel {
border-radius: 0.5em;
}
/* the background color of the file and file panel (used when dropping an image) */
.filepond--item-panel {
background-color: #555;
}
/* the background color of the drop circle */
.filepond--drip-blob {
background-color: #999;
}
/* the background color of the black action buttons */
.filepond--file-action-button {
background-color: rgba(0, 0, 0, 0.5);
}
/* the icon color of the black action buttons */
.filepond--file-action-button {
color: white;
}
/* the color of the focus ring */
.filepond--file-action-button:after {
border-color: #fff;
}
/* the text color of the file status and info labels */
.filepond--file {
color: white;
}
/* error state color */
[data-filepond-item-state*='error'] .filepond--item-panel,
[data-filepond-item-state*='invalid'] .filepond--item-panel {
background-color: red;
}
[data-filepond-item-state='processing-complete'] .filepond--item-panel {
background-color: green;
}
/* bordered drop area */
.filepond--panel-root {
background-color: transparent;
border: 2px solid #2c3340;
}
</style>
</head>
<body>
<!-- We'll transform this input into a pond -->
<input type="file" class="filepond">
<!-- Load FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<!-- Turn all file input elements into ponds -->
<script>
// FilePond.parse(document.body);
var inputElement = document.querySelector('input[type="file"]');
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize
);
FilePond.setOptions({
allowFileTypeValidation: true,
acceptedFileTypes: "image/png",
labelFileTypeNotAllowed: "type error",
name: 'uploadfile',
labelFileWaitingForSize: "Waiting #for# size",
labelFileLoading: "#Loading#",
labelFileProcessing: "#Uploading#",
labelTapToRetry: "重新尝试",
labelTapToCancel: "#tap to cancel#",
server: {
process: 'http://www.baidu.com/process',
revert: './revert',
restore: './restore/',
load: './load/',
fetch: './fetch/'
},
});
var pond = FilePond.create( inputElement,{
maxFiles: 10,
allowBrowse: true,
allowDrop: false,
allowPaste: false,
allowMultiple: false,
labelIdle: '上传头像 <span class="filepond--label-action"> 选择 </span> <img src="https://oscimg.oschina.net/oscnet/up-127bb2617988996d96a5411d6967ad5b.jpeg!/both/50x50?t=1533268943000"/>'
} );
console.log(pond.name); // 'filepond'
console.log(pond.maxFiles); // 10
console.log(pond.required); // true
console.log(pond.allowMultiple); // true
// document.addEventListener('FilePond:loaded', e => {
// console.log('FilePond ready for use', e.detail);
// });
// pond.addEventListener('FilePond:addfile', e => {
// console.log('File added', e.detail);
// });
</script>
</body>
</html>