html5拖拽排序多图片上传插件特效源码.zip资源-CSDN文库

共5个文件

js：2个

html：1个

css：1个

版权申诉

194 浏览量 2022-11-04 23:43:20 上传评论收藏 45KB ZIP 举报

HTML5是一种先进的Web技术，它在原有的HTML基础上引入了许多新的特性和功能，极大地提升了Web应用的交互性和用户体验。其中，拖放（Drag and Drop）功能是HTML5的一大亮点，允许用户通过直观的拖动操作来处理网页上的元素，如文件、图片等。本插件就是基于这一特性，实现了图片的拖拽排序和多图片上传功能。我们来详细了解一下HTML5的拖放API。在HTML5中，拖放功能主要由以下几部分构成： 1. **dataTransfer对象**：当用户开始拖动一个元素时，浏览器会创建一个`dataTransfer`对象，用于存储拖动过程中涉及的数据，比如文件、文本或图像数据。 2. **dragstart事件**：当用户开始拖动一个元素时，该元素会触发`dragstart`事件。在事件处理函数中，我们可以设置`dataTransfer`对象的数据，以及拖动效果，如允许拖动的类型。 3. **dragover事件**：当被拖动的元素悬停在可接受拖放目标上时，目标元素会触发`dragover`事件。为了允许元素接收拖放，我们需要阻止默认的处理行为，并通过`event.preventDefault()`设置允许数据传输。 4. **drop事件**：当用户释放鼠标键，将元素放下时，目标元素会触发`drop`事件。在`drop`事件处理函数中，我们可以访问`dataTransfer`对象，获取拖动的数据，并执行相应的操作，如文件上传。在这个插件中，拖拽排序功能通过监听这些事件，动态调整图片元素的位置，实现拖动改变图片顺序的效果。多图片上传则是利用HTML5的File API，可以方便地读取和处理用户选择的文件，包括图片。通过`FileReader`对象，可以预览图片，然后通过AJAX或者Fetch API向服务器发送POST请求，将图片数据上传。在文件`132686923732169530`中，可能包含了实现这些功能的JavaScript代码、CSS样式以及HTML结构。JavaScript部分可能包括了事件监听、数据处理和AJAX请求；CSS部分用于美化拖拽的图片以及上传过程中的反馈；HTML部分则构建了可拖动的图片元素和上传界面。这个插件的实现原理是结合HTML5的拖放API和File API，提供了一个交互性强、用户体验好的图片管理方案。无论是前端开发者还是对HTML5技术感兴趣的用户，都可以通过研究这个插件的源码，深入理解HTML5的新特性，并应用于自己的项目中。

资源推荐

资源详情

资源评论

收起资源包目录

html5拖拽排序多图片上传插件特效源码.zip （5个子文件）

132686923732169530

likecs.com_132686923734161440

jquery.min.js 82KB

jQuery.upload.min.js 16KB

1.png 7KB

index.html 4KB

upload.css 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.min.js"></script> <script src="jQuery.upload.min.js"></script> <link rel="stylesheet" href="upload.css"> <style> html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} body{padding:100px;font-size: 14px;} h1{font-size: 26px;} p{font-size: 14px; margin-top: 10px;} pre{background:#eee;border:1px solid #ddd;border-left:4px solid #f60;padding:15px;margin-top: 15px;} h2{font-size: 20px;margin-top: 20px;} .case{margin-top: 15px;width:800px;} td{padding:5px;} table{margin-top: 20px;} </style> </head> <body> <h1>upload h5图片文件上传插件</h1> <p> 实现多图多文件上传与拖拽上传，拖拽排序功能。<br /> 该插件是自己在项目中使用的，由于自己项目组的习惯，所有参数都写在标签上的。 </p> <h2>案例一：默认无参数</h2> <div class="case"> <div class="upload" action='upload.html' id='case1'></div> </div> <h2>案例二：单个图片上传</h2> <div class="case"> <div class="upload" action='upload.html' data-num='1' id='case2'></div> </div> <h2>案例三：查看图片信息</h2> <div class="case"> <div class="upload" action='upload.html' data-value='1.png' id='case3'></div> </div> <h2>引用文件：</h2> <pre> <script src="jquery.min.js"></script> <script src="jQuery.upload.mini.js"></script> <link rel="stylesheet" href="upload.css"> </pre> <h2>调用代码：</h2> <pre> <div class="upload" id="case" data-num="10" data-type="zip,pdf,doc,docx"></div> <script type="text/javascript"> $(function(){ $("#case").upload( //该函数为点击放大镜的回调函数，如没有该函数，则不显示放大镜 function(_this,data){ console.log(data) } ); }) </script></pre> <h2>参数配置：</h2> <table border='1' cellspacing="0" bordercolor="#d7d7d7" style="border-collapse:collapse;"> <tr> <td width='120'>标签</td> <td width="300">默认值</td> <td>说明</td> </tr> <tr> <td>data-height</td> <td>0</td> <td>图片上传压缩最大高度，0则根据宽度等比例压缩</td> </tr> <tr> <td>data-width</td> <td>1920</td> <td>图片上传压缩最大宽度，0则根据高度等比例压缩</td> </tr> <tr> <td>data-type</td> <td>png,jpg,jpeg,gif</td> <td>允许上传文件的扩展名，多个扩展名用逗号分割，支持非图片格式的文件上传</td> </tr> <tr> <td>data-file</td> <td>file</td> <td>上传提交服务器的表单名</td> </tr> <tr> <td>data-name</td> <td>uoload</td> <td>最终表单提交图片路径的表单名</td> </tr> <tr> <td>action</td> <td>/upload.php</td> <td>服务器接收上传文件的地址，服务器需返回{"code":1,"msg":"/upload/1.jpg"}的JSON字符串，code为上传状态，1为成功，0为失败，msg为成功的文件路径或失败原因提示！</td> </tr> <tr> <td>data-num</td> <td>10</td> <td>最多可以上传多少个文件，如为1，上传插件为单个文件上传样式</td> </tr> <tr> <td>data-size</td> <td>20480</td> <td>文件上传单个文件最大容量，图片不传不受该属性限制</td> </tr> <tr> <td>data-value</td> <td>null</td> <td>已经上传成功的文件名，多个文件用英文逗号分割</td> </tr> </table> </body> <script> $(function(){ $("#case1").upload(); $("#case2").upload(); $("#case3").upload( function(_this,data){ alert(data) } ) }) </script> </html>

评论收藏

内容反馈

版权申诉