圖片上傳 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>
![[生活雜項][運動教程]自由泳](http://pic.xiahunao.cn/[生活雜項][運動教程]自由泳)
