jQuery带预览可拖拽文件上传代码资源-CSDN文库

共25个文件

png：11个

js：5个

css：4个

需积分: 15 28 浏览量 2018-08-18 10:44:39 上传评论 1 收藏 114KB ZIP 举报

**jQuery带预览可拖拽文件上传代码**是一种利用HTML5技术实现的现代网页文件上传功能，它结合了jQuery库的便利性和HTML5的新特性，提供了用户友好的交互体验。以下将详细介绍这一技术的关键知识点： 1. **jQuery库**：jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。在这个项目中，jQuery用于处理用户与页面元素的交互，如监听拖放事件和文件选择事件。 2. **HTML5拖放API**：HTML5引入了拖放(Drag and Drop)功能，允许用户通过鼠标或触摸设备直接拖动元素到目标位置。在文件上传场景中，用户可以将文件从桌面或其他位置拖放到指定的区域，从而实现文件选择。 3. **FileReader API**：这是HTML5中的另一个关键特性，用于读取和处理本地文件。在这个项目中，FileReader用于预览选定的文件，特别是图片文件，通过`readAsDataURL()`方法将文件内容转化为数据URL，然后插入到页面中预览。 4. **File对象**：当用户选择或拖放文件时，浏览器会创建一个File对象，包含有关文件的信息，如文件名、大小等。这些信息可以用来显示预览或者上传进度。 5. **FormData对象**：用于在Ajax请求中发送文件数据。创建一个FormData对象，然后使用`append()`方法添加文件，最后通过XMLHttpRequest或fetch API发送到服务器。 6. **事件处理**：jQuery的事件处理函数如`on('drop')`和`on('change')`用于监听文件拖放和文件选择事件。在拖放事件中，需要阻止默认的浏览器行为（如打开文件），并获取拖放的文件列表。在文件选择事件中，通常在用户点击文件输入框后触发，获取选中的文件。 7. **CSS样式**：为了实现美观的界面，`css`文件通常包含上传区域的样式定义，如边框、背景色、提示文字等。这有助于提升用户体验，使拖放区域更加显眼。 8. **JavaScript逻辑**：`js`文件中包含了主要的业务逻辑，包括初始化事件监听、文件预览、文件上传的逻辑处理。这部分代码可能包含对jQuery的选择器、事件绑定、动画等方法的调用。 9. **源码结构**：`src`目录可能包含了更细粒度的代码组织，如分离出专门处理预览的脚本、处理上传的脚本等，便于代码维护和复用。 "jQuery带预览可拖拽文件上传代码"涉及到的技术点包括jQuery的事件处理、HTML5的新特性（如拖放API、FileReader API、FormData对象）以及良好的前端代码组织结构。这些知识点的结合为用户提供了直观且高效的文件上传体验。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery带预览可拖拽文件上传代码.zip （25个子文件）

css

images

sprite.png 2KB

bootstrap.min.css 118KB

ssi-uploader.css 9KB

zzsc.css 1KB

ssi-uploader.min.css 6KB

ssi-uploader.min.css.map 12KB

index.html 2KB

ssi-uploader.min.js 18KB

ssi-uploader.min.js.map 27KB

bootstrap.min.js 36KB

ssi-uploader.js 40KB

jquery-2.1.1.min.js 82KB

src

ssi-uploader

ssi-uploader.js 40KB

styles

images

Check-23.png 1KB

ban-23.png 1KB

Exclamation23.png 1KB

Exclamation-7.png 1024B

ban-7w.png 1KB

ban-7.png 216B

trash-7.png 1KB

trash-10.png 1KB

Check-7.png 1000B

ban-10.png 1KB

ssi-uploader.scss 7KB

sprite.scss 1KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery带预览可拖拽文件上传代码</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/zzsc.css"> <link rel="stylesheet" href="css/ssi-uploader.css"/> </head> <body> <div class="zzsc-container"> <div class="container"> <h3>注意：因为演示中没有后台上传程序的支持，点击上传按钮时会返回错误信息！</h3> <div class="row"> <div class="col-md-12"> <h3>基本演示（支持jpg、gif、txt、png和pdf格式文件）</h3> <input type="file" multiple id="ssi-upload"/> </div> </div> <div class="row"> <div class="col-md-12"> <h3>无预览图效果：</h3> <input type="file" multiple id="ssi-upload2"/> </div> </div> <div class="row"> <div class="col-md-12"> <h3>不带拖放区域：</h3> <input type="file" multiple id="ssi-upload3"/> </div> </div> </div> </div> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="js/ssi-uploader.js"></script> <script type="text/javascript"> $('#ssi-upload').ssi_uploader({url:'#',maxFileSize:6,allowed:['jpg','gif','txt','png','pdf']}); $('#ssi-upload2').ssi_uploader({url:'#',preview:false,allowed:['jpg','gif','txt','png','pdf']}); $('#ssi-upload3').ssi_uploader({url:'#',dropZone:false,allowed:['jpg','gif','txt','png','pdf']}); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p> </div> </body> </html>

评论收藏

内容反馈