原生JS加jQuery实现拖拽和单击上传文件资源-CSDN下载

共27个文件

css：5个

png：4个

js：3个

javascript

上传文件

jquery

需积分: 10 170 浏览量 2022-12-08 09:54:13 上传评论 1 收藏 176KB ZIP 举报

在前端开发中，拖放（Drag and Drop）和文件上传是常见的交互功能，尤其是在现代Web应用中。本文将深入探讨如何使用原生JavaScript和jQuery库来实现这两种功能。我们要明白JavaScript提供了拖放API，而jQuery则可以简化DOM操作，使代码更简洁。一、原生JavaScript实现拖放 1. **注册事件监听器**：在HTML元素上添加`dragenter`, `dragover`, `dragleave`, `drop`等事件监听器。例如，为一个`<div>`元素设置监听器： ```html <div id="dropzone" draggable="true"></div> ``` ```javascript document.getElementById('dropzone').addEventListener('dragenter', function(e) { e.preventDefault(); // 入口效果 }); document.getElementById('dropzone').addEventListener('dragover', function(e) { e.preventDefault(); // 高亮显示 }); document.getElementById('dropzone').addEventListener('dragleave', function(e) { e.preventDefault(); // 恢复常态 }); document.getElementById('dropzone').addEventListener('drop', function(e) { e.preventDefault(); handleDrop(e.dataTransfer.files); // 处理拖放的文件 }); ``` 2. **处理拖放文件**：`drop`事件触发时，可以从`dataTransfer`对象中获取到拖放的文件，然后进行后续处理。例如，读取文件内容： ```javascript function handleDrop(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; readFile(file); } } function readFile(file) { const reader = new FileReader(); reader.onload = function(e) { console.log('文件内容:', e.target.result); }; reader.readAsText(file); } ``` 二、jQuery实现点击上传文件 1. **创建HTML结构**：通常我们会在`<input type="file">`元素上实现点击上传，通过CSS隐藏真实元素，用其他元素触发点击： ```html <input type="file" id="uploadInput" style="display: none;"> <button id="uploadButton">选择文件</button> ``` 2. **绑定jQuery事件**：在按钮上绑定`click`事件，使其触发文件选择对话框： ```javascript $('#uploadButton').on('click', function() { $('#uploadInput').trigger('click'); }); // 监听文件选择 $('#uploadInput').on('change', function() { const files = this.files; handleFiles(files); }); ``` 3. **处理上传的文件**：与前面的拖放处理类似，我们可以读取文件内容或直接上传到服务器： ```javascript function handleFiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (file.type.startsWith('image/')) { displayImage(file); } else { uploadFile(file); } } } function displayImage(file) { const reader = new FileReader(); reader.onload = function(e) { const img = document.createElement('img'); img.src = e.target.result; document.body.appendChild(img); }; reader.readAsDataURL(file); } function uploadFile(file) { // 这里可以实现向服务器发送文件 // 例如使用XMLHttpRequest或fetch API console.log('文件准备上传:', file); } ``` 以上就是使用原生JavaScript和jQuery实现拖放以及点击上传文件的基本步骤。在实际项目中，还需要考虑错误处理、文件类型限制、进度显示、多文件上传等复杂情况。此外，知勤者笔记（https://www.zhiqinzhe.com）提供了一个很好的资源分享平台，可以从中获取更多相关的学习资料和实践案例。

资源推荐

资源详情

资源评论

收起资源包目录

FileUpload.zip （27个子文件）

FileUpload

css

fonts

icomoon.woff 1KB

icomoon.svg 812B

icomoon.eot 1KB

icomoon.ttf 1KB

FileUpload.css 6KB

demo.css 5KB

style.css 2KB

JavaScript

FileUpload.js 34KB

jquery-3.6.0.js 292KB

FileUpload.txt 4KB

image

file.png 3KB

zip.png 3KB

txt.png 3KB

rar.png 3KB

icomoon

fonts

icomoon.woff 16KB

icomoon.svg 48KB

icomoon.eot 16KB

icomoon.ttf 16KB

Read Me.txt 755B

demo-files

demo.js 996B

demo.css 2KB

selection.json 62KB

demo.html 52KB

style.css 4KB

FileUpload.php 951B

FileUpload.html 11KB

README.md 7KB

# FileUpload ## 介绍原生js写的文件上传程序，支持单击打开文件选择框上传和将文件拖拽到某一区域上传，版本：v1.0.01 ## 安装教程无需安装，直接在页面中直接使用script标签引用 ## 使用说明 ### 1. 默认参数 ``` let FileUploadDP = { //默认参数 ClickElement: null, //单击元素 DragElement: null, //拖拽元素 OPPattern: null, //操作模式 ReturnButtom: null, //返回元素 QuantityLimit: 1024, //数量限制 ConsoleAutograph: true, //是否开启版权提示 OutputWarning: true, //是否输出警告 FormatList: [, 'svg+xml', 'avif', 'bmp', 'gif', 'ico', 'cur','jpg', 'jpeg', 'jfif', 'pjpeg','pjp','png','svg', 'tif', 'tiff', 'webp', 'ogg', 'mp3', 'wav', 'flac', 'mpeg', 'mp4', 'webm', 'avi', 'ogv'], OPState: function(OPState) { console.log("OPState:" + OPState); }, //操作状态 ResultSet: function(ResultSet) { console.log(ResultSet); } //操作结果 }; ``` ### 2. 调用示例 ``` FileUpload({ DragElement: '.UploadDiv', ClickElement: '#UploadDiv', OPPattern: 'DragandClick', ReturnButtom: '.FileDiv>div>input[type="button"]', ConsoleAutograph: true, OutputWarning: false, FormatList: ['png','jpg','jpeg','gif], QuantityLimit: 500, OPState: function(OPState) { console.log("OPState:" + OPState); }, ResultSet:function(ResultSet) { console.log(ResultSet); } }); ``` ### 3. 删除文件示例 ``` FileUpload.Delete({ FileName:（获得的文件名）, FileFormat: （获得的文件格式）, FileRoute: （获得的文件路径）, SubmitTime: （返回的提取文件时的时间戳）, lastModified: （文件最后的格式化时间）, FileSize: （文件大小）, DeleteOPState: function(DeleteOPState) { console.log(DeleteOPState); },//返回删除操作状态码 DeleteResultSet: function(DeleteResultSet) { console.log(DeleteResultSet); }//返回删除后的结果 }); ``` ## 状态码 ``` 100：初始状态 101：鼠标拖动文件进入操作区域 102：已打开文件选择框 103：鼠标将文件移入但未松开或 104：鼠标将文件移出 105：已将文件放置到操作区域 106：文件选择框选择文件后关闭 107：文件选择框单击“取消”按钮已关闭 108：开始读取文件 109：文件读取中止或失败 110：文件读取数量超出限制 111：文件读取成功 112：开始查找（调用DeleteOPState函数返回） 113：删除成功（调用DeleteOPState函数返回） 114：删除失败（调用DeleteOPState函数返回） 115：开始上传文件 116：文件上传中止或失败 117：文件上传成功 ``` ## 返回示例 ### 1.过程中返回 ``` ResultObject{ AttributeList: 0: FileFormat: "image/png" FileName: "捕获.PNG" FileRoute: "捕获.PNG" FileSize: "34.3KB" PreviewFileFR: FileReader error: null onabort: null onerror: null onload: null onloadend: null onloadstart: null onprogress: null readyState: 2 result: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABlc... [[Prototype]]: FileReader PreviewFileWin: "blob:http://127.0.0.1/1c8eb893-46c0-4fb0-aad8-7833f9a521d8" TimeDate: 1653576606526 TormatTime: "2022/4/29 00:02:49" lastModified: 1651161769543 [[Prototype]]: Object [[Prototype]]: Object ResultType: "部分结果" UploadList: 0: File: File lastModified: 1651161769543 lastModifiedDate: Fri Apr 29 2022 00:02:49 GMT+0800 (中国标准时间) {} name: "捕获.PNG" size: 35122 type: "image/png" webkitRelativePath: "" [[Prototype]]: File FileName: "捕获.PNG" FileRoute: "捕获.PNG" SubmitTime: 1653576606526 [[Prototype]]: Object [[Prototype]]: Object [[Prototype]]: Object } ``` ### 2.全部结束后返回 ``` ResultObject{ AttributeList: 0: FileFormat: "image/png" FileName: "捕获.PNG" FileRoute: "捕获.PNG" FileSize: "34.3KB" PreviewFileFR: FileReader { readyState: 2, result: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABl...', error: null, onloadstart: null, onprogress: null, …} PreviewFileWin: "blob:http://127.0.0.1/1c8eb893-46c0-4fb0-aad8-7833f9a521d8" TimeDate: 1653576606526 TormatTime: "2022/4/29 00:02:49" lastModified: 1651161769543 [[Prototype]]: Object [[Prototype]]: Object ResultType: "全部结果" UploadList: 0: File: File { name: '捕获.PNG', lastModified: 1651161769543, lastModifiedDate: Fri Apr 29 2022 00:02:49 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 35122, … } FileName: "捕获.PNG" FileRoute: "捕获.PNG" SubmitTime: 1653576606526 formData: FormData {} [[Prototype]]: Object [[Prototype]]: Object WholeSize: 35122 WholeformData: FormData [[Prototype]]: FormData [[Prototype]]: Object } ``` ## 说明 1. DragElement和ClickElement都是非必须的，但必须有一个存在；同时，他们受OPPattern影响 2. ReturnButtom也是非必须的；但如果它不存在，那么只能增加文件，不能删除文件 3. QuantityLimit、ConsoleAutograph和OutputWarning都是非必须的；须注意OutputWarning，它可能在控制台输出很多警告 4. FormatList非必须的；如果它存在，那么它必须是数组 5. OPState、ResultSet和DeleteOPState、DeleteResultSet都是非必须的；如果它存在，那么它必须是函数（方法）；否则将有可能被默认参数替代或报错，亦或无法得到操作状态和结果 6. 想要调用FileUpload.Delete函数（方法），必须先调用FileUpload函数（方法），否则会报错 7. FileName、FileFormat、FileRoute必须存在，且格式必须为String 8. SubmitTime必须存在，且格式必须为String或Number 9. lastModified和FileSize至少存在一个，且必须为函数（方法） 10. 返回的数据类型将是整数或对象 11. 被调用的两个方法都只接受规定的属性，不接受外来属性 12. 版本为v1.0.01，第一次试着写，欢迎指教

评论收藏

内容反馈