图片上传 html demo
直接粘贴本地运行查看效果即可，有看不懂的直接喂给 deepseek 会解释的很清晰
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粘贴图片上传示例 - 使用场景，粘贴桌面图片上传、粘贴word 文档中图片上传、直接截图上传等</title><style>body {font-family: Arial, sans-serif;padding: 20px;}.upload-area {width: 100%;height: 200px;border: 2px dashed #ccc;display: flex;align-items: center;justify-content: center;color: #666;font-size: 18px;margin-bottom: 20px;}.file-list {margin-top: 20px;}.file-item {margin-bottom: 10px;padding: 10px;border: 1px solid #ddd;background-color: #f9f9f9;}.file-item.uploading {background-color: #e0f7fa;}.file-item.done {background-color: #e8f5e9;}.file-item.error {background-color: #ffebee;}</style>
</head>
<body><h1>粘贴图片上传示例</h1><div class="upload-area">请在此区域粘贴图片</div><div class="file-list"><h2>文件列表</h2><div id="file-list-container"></div></div><script>// 模拟语言包const t = (key) => {const translations = {'examination.pasteNoContent': '粘贴内容为空',};return translations[key] || key;};// 生成唯一 IDconst uuidv4 = () => {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {const r = (Math.random() * 16) | 0;const v = c === 'x' ? r : (r & 0x3) | 0x8;return v.toString(16);});};// 文件上传前的校验const onBeforeUpload = async (file, { maxHeight, maxWidth, size, maxCount, t, fileList }) => {if (fileList.length >= maxCount) {alert(`最多只能上传 ${maxCount} 张图片`);return false;}if (file.size > size) {alert(`文件大小不能超过 ${size / 1024 / 1024}MB`);return false;}return true;};// 模拟文件上传函数const fileUpload = (file, { onSuccess, onError }) => {setTimeout(() => {if (Math.random() > 0.5) {onSuccess({ url: 'https://example.com/uploaded-image.jpg' });} else {onError('上传失败，请重试');}}, 2000); // 模拟 2 秒上传时间};// 数据处理函数const dataHandle = ({ file, fileList }) => {return { file, fileList };};// 粘贴图片上传处理函数const handelPasteImageUpload = async (event, {t,resource = { images: [] },onStartUpload,onUploadSuccess,onUploadError,imageUploadLimitConfig,}) => {const fileList = resource.images || [];const clipboardData = event.clipboardData;if (clipboardData) {const items = clipboardData.items || [];if (items.length <= 0) {alert(t('examination.pasteNoContent'));return;}for (let i = 0; i < items.length; i++) {const item = items[i];if (item.type.indexOf('image') !== -1) {event.preventDefault(); // 阻止默认行为const originFileObj = item.getAsFile(); // 获取文件对象// 构建文件数据对象const fileDataObj = {originFileObj,uid: uuidv4(),lastModified: originFileObj.lastModified,name: originFileObj.name,size: originFileObj.size,type: originFileObj.type,};const { maxHeight, maxWidth, size, maxCount } = imageUploadLimitConfig;// 文件上传前的校验const flag = await onBeforeUpload(originFileObj, {maxHeight,maxWidth,size: size.image,maxCount: maxCount.image,t,fileList,});if (flag) {const newFileList = [...fileList, fileDataObj].map((item) => {if (item.uid === fileDataObj.uid) {return { ...item, status: 'uploading' };}return item;});// 调用开始上传回调onStartUpload(dataHandle({ file: fileDataObj, fileList: newFileList }));// 模拟文件上传fileUpload(originFileObj, {onSuccess: (response) => {const updatedFileList = newFileList.map((item) => {if (item.uid === fileDataObj.uid) {return { ...item, status: 'done', response };}return item;});onUploadSuccess(dataHandle({ file: fileDataObj, fileList: updatedFileList }));},onError: (error) => {const updatedFileList = newFileList.map((item) => {if (item.uid === fileDataObj.uid) {return { ...item, status: 'error', response: error };}return item;});onUploadError(dataHandle({ file: fileDataObj, fileList: updatedFileList }));},});}}}}};// 初始化document.addEventListener('paste', (event) => {handelPasteImageUpload(event, {t,resource: { images: [] },onStartUpload: (data) => {console.log('开始上传:', data);renderFileList(data.fileList);},onUploadSuccess: (data) => {console.log('上传成功:', data);renderFileList(data.fileList);},onUploadError: (data) => {console.error('上传失败:', data);renderFileList(data.fileList);},imageUploadLimitConfig: {maxHeight: 1000,maxWidth: 1000,size: { image: 5 * 1024 * 1024 }, // 5MBmaxCount: { image: 10 },},});});// 渲染文件列表const renderFileList = (fileList) => {const container = document.getElementById('file-list-container');container.innerHTML = fileList.map((file) => `<div class="file-item ${file.status}"><strong>${file.name}</strong> - ${file.status}${file.response ? `<br>响应: ${JSON.stringify(file.response)}` : ''}</div>`).join('');};</script>
</body>
</html>
