您现在的位置是:首页 > 文章详情文章详情
html5+ajax实现文件拖拽上传
会飞的猪
2018-09-13
1239人已围观
简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,jquery插件,插件下载,JS/CSS在线压缩。)-白码驿站
使用HTML5的文件API,可以将操作系统中的文件直接拖放到浏览器的指定区域,实现文件上传到服务器。
实现步骤可以分为以下几步:
1、监听拖拽:监听页面元素的拖拽事件,包括:dragenter、dragover、dragleave和drop,一定要将dragover的默认事件取消掉,不然无法触发drop事件。如需拖拽页面里的元素,需要给其添加属性draggable=”true”;
2、获取拖拽文件:在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表,.length属性获取文件数量,.type属性获取文件类型。
3、发送图片:使用FormData模拟表单数据AJAX提交文件流。
下面就来看看代码如何实现吧
Html代码:
<div> <div id="drop_area" style="border: 1px #ccc solid; height: 300px; width: 500px;"> 请将图片拖拽到此区域</div> <div id="preview"> </div> </div>
Jquery代码:
<script type="text/javascript"> $(function () { HoldbackBorwser(); //阻止浏览器默认行。 MonitorDrop(); //监听拖拽事件 }); //阻止浏览器默认行。 function HoldbackBorwser() { $(document).on({ dragleave: function (e) { //拖离 e.preventDefault(); }, drop: function (e) { //拖后放 e.preventDefault(); }, dragenter: function (e) { //拖进 e.preventDefault(); }, dragover: function (e) { //拖来拖去 e.preventDefault(); } }); } //监听拖拽事件 function MonitorDrop() { var box = document.getElementById('drop_area'); //拖拽区域 box.addEventListener("drop", function (e) { e.preventDefault(); //取消默认浏览器拖拽效果 var fileList = e.dataTransfer.files; //获取文件对象 //循环遍历文件对象 for (var i = 0; i < fileList.length; i++) { //检测文件是不是图片 if (fileList[i].type.indexOf('image') === -1) { alert("您拖的不是图片!"); return false; } //拖拉图片到浏览器,可以实现预览功能 var img = window.URL.createObjectURL(fileList[i]); var filename = fileList[i].name; //图片名称 var filesize = Math.floor((fileList[0].size) / 1024); if (filesize > 10240) { alert("上传大小不能超过10M."); return false; } var str = "<img src='" + img + "'><p>图片名称:" + filename + "</p><p>大小:" + filesize + "KB</p>"; $("#preview").append(str); //上传 UploadFile(fileList[i]); } }, false); } //上传图片 function UploadFile(fileArray) { var formData1 = new FormData(); formData1.append('fileName1', fileArray); // 提交图片数量 formData1.append('count', 1); //开始上传图片 $.ajax({ url: 'Handler.ashx', type: 'POST', data: formData1, contentType: false, processData: false, async: false, success: function (json) { if (json.status == "true") { alert("上传成功!文件名为:" + json.data); } else { alert(json.msg); return false; } }, error: function () { } }) } </script>
Tags: JavaScript/Jquery 、 插件
很赞哦! (1)
点击排行
文章分类
- C# (211)
- Excel操作 (7)
- Ext.Net (1)
- FTP (7)
- Git (1)
- Html (7)
- JavaScript/Jquery (173)
- Json (5)
- PhotoShop (60)
- Sql Server (48)
- SVN (5)
- Tesseract-ocr图片识别 (5)
- UML (1)
- VS代码折叠插件 (1)
- winform (2)
- 操作IP地址 (5)
- 操作PDF (5)
- 插件 (166)
- 发送邮件 (2)
- 过滤HTML标签 (2)
- 缓存 (1)
- 跨域 (1)
- 目录操作 (14)
- 软件 (25)
- 视屏操作 (2)
- 数据库恢复 (2)
- 数据库优化 (5)
- 图片操作 (16)
- 文件操作 (24)
- 序列化 (3)
- 压缩 (5)
- 验证码 (4)
- 正则表达式 (21)
- 字符串加密 (11)
猜你喜欢
- SQL Prompt 免费下载 (SQL自定义插件的安装与激活:新版)
- Tesseract-OCR 中文识别
- 大公司为什么还在采用过时的技术
- C# 操作Excel , 支持超链接 跳转Sheet 页面,HSSFHyperlink函数
- SQL SERVER 2012 误删数据恢复过程
- X-UA-Compatible 解决IE浏览器样式不兼容问题
- sql Service 海量数据查询,如何提高查询效率--数据库分区
- LoadRunner 安装+汉化+破解
- sql Service 海量数据查询,如何提高查询效率--数据库设计
- C#中构造函数的执行序列(构造函数初始化器 this base)
- html5+ajax实现文件拖拽上传
- sql Service 海量数据查询,如何提高查询效率--SQL语句优化
评 论