本文首先发表在 码蜂笔记 ： http://coderbee.net/index.php/web/20130703/266
html5 文件拖拽上传是个老话题了，网上有很多例子，我一开始的代码也是网上找来改的，只是踩了几个坑之后就想把过程记录下来。
功能实现
下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现。 首先会介绍一些必须的基础。
拖拽事件
拖拽事件有下面这些：
-
dragstart：当用户开始拖动对象时触发。 -
dragenter： 当鼠标第一次经过目标元素，且有拖动发生时触发。此事件的监听者应指明在这个位置上是否允许drop，或者监听者不执行任何操作，那么drop默认是不允许的。 -
dragover：当鼠标经过一个元素时，且有拖动发生时触发 。 -
dragleave：当鼠标离开一个元素，且有拖动在发生时触发。 -
drag： 当对象被拖动，每次移动鼠标时触发。 -
drop：在drag操作的最后发生drop时，在元素上触发此事件。监听者应该负责检索拖动的数据，并插入drop的位置。 -
dragend： 在拖动对象时放开鼠标按键时触发。
从浏览器外拖拽文件到浏览器时，必须要绑定的事件有 dragover 和 drop，其他的都可以不绑定。dragover 和 drop 事件的处理函数内必须调用事件的 preventDefault() 函数，要不然浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
DataTransfer对象
拖拽对象用来传递数据的媒介，通过拖拽事件的 event.dataTransfer 获取。
-
dataTransfer.dropEffect [ = value ]：返回当前选择的操作类型，可以设置新的值来修改已选择的操作。可选的值有：none, copy, link, move。 -
dataTransfer.effectAllowed [ = value ]：返回允许的操作类型，可修改。可选的值有：none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized。 -
dataTransfer.types：返回一个DOMString，列出在dragstart事件里设置的所有格式。另外，如果有文件被拖动，那么其中一个类型的字符串将是“Files”。 -
dataTransfer.clearData( [ format ] )：移除指定格式的数据。如果忽略参数则移除所有数据。 -
dataTransfer.setData(format, data)：添加指定的数据。 -
data = dataTransfer.getData(format)：返回指定的数据。如果没有这样的数据，则返回空字符串。 -
dataTransfer.files：返回被拖拽的FileList，如果有。 -
dataTransfer.setDragImage(element, x, y)：用指定的元素来更新drag反馈，替换之前指定的反馈（feedback）。 -
dataTransfer.addElement(element)：添加指定元素到用于渲染drag反馈的元素列表。
在这个用例里，最重要的就是 dataTransfer.files 属性，它是用户拖拽进浏览器的文件列表，是个 FileList 对象，有 length 属性，可以通过下标访问。
FormData
FormData 代表一个表单，可以通过 append('fieldName', value) 函数往表单里添加参数，参数的只不仅可以是字符串，还可以是File对象，甚至二进制数据。
XMLHttpRequest level 2
新版本的XMLHttpRequest对象，这里说的XMLHttpRequest都是指新版的。
XMLHttpRequest可以向不同域名的服务器发出HTTP请求。这叫做 “跨域资源共享”（Cross-origin resource sharing，简称CORS）。
浏览器有个著名的同源策略，这里浏览器安全的基础，CORS 除了需要浏览器支持外，还要服务器同意。
XMLHttpRequest 支持直接发送FormData，就像浏览器进行表单提交一样。
XMLHttpRequest 还支持进度信息（progress事件），进度分为上传进度和下载进度，上传进度的事件是在 XMLHttpRequest.upload 对象上，下载进度的事件是在 XMLHttpRequest 对象。每个进度事件都有三个属性：
-
lengthComputable：可计算的已上传字节 数 -
total：总的字节 数 -
loaded：到目前为止上传的字节 数
除了进度事件，还支持下面五个事件：
-
load事件：传输成功完成。 -
abort事件：传输被用户取消。 -
error事件：传输中出现错误。 -
loadstart事件：传输开始。 -
loadend事件：传输结束，但是不知道成功还是失败。
同 progress事件一样，属于上传操作的事件处理函数绑定在XMLHttpRequest.upload对象上，属性下载的直接绑定在 XMLHttpRequest 对象。
具体代码
本机测试时要注意把下面代码里的路径改为自己本机的。
服务器端
服务器端需要写个Servlet来接收上传的表单。 /html5/FileUploadServlet
用servlet3的 @MultipartConfig 注解就可以很快实现。
客户端代码
<html>
<head>
<title> drag drop upload demo
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id= "progressBarZone">请将文件拖拽进浏览器内！ <br/></ div>
</body>
<script>
var progressBarZone = document.getElementById('progressBarZone');
function sendFile(files) {
if (!files || files.length < 1) {
return;
}
var percent = document.createElement('div' );
progressBarZone.appendChild(percent);
var formData = new FormData(); // 创建一个表单对象FormData
formData.append( 'submit', '中文' ); // 往表单对象添加文本字段
var fileNames = '' ;
for ( var i = 0; i < files.length; i++) {
var file = files[i]; // file 对象有 name, size 属性
formData.append( 'file[' + i + ']' , file); // 往FormData对象添加File对象
fileNames += '《' + file.name + '》， ' ;
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener( 'progress',
function uploadProgress(evt) {
// evt 有三个属性：
// lengthComputable – 可计算的已上传字节数
// total – 总的字节数
// loaded – 到目前为止上传的字节数
if (evt.lengthComputable) {
percent.innerHTML = fileNames + ' upload percent :' + Math.round((evt.loaded / evt.total) * 100) + '%
' ;
}
}, false); // false表示在事件冒泡阶段处理
xhr.upload.onload = function() {
percent.innerHTML = fileNames + '上传完成。
' ;
};
xhr.upload.onerror = function(e) {
percent.innerHTML = fileNames + ' 上传失败。
' ;
};
xhr.open( 'post', 'http://cross.site.com:8080/html5/FileUploadServlet' , true);
xhr.send(formData); // 发送表单对象。
}
document.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault(); // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
}, false);
document.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault(); // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
sendFile(e.dataTransfer.files);
}, false);
</script>
</html>
如果上面的代码都部署在同一个网站下，那是没有问题的。可是我要做的上传操作是要把文件传到另一个网站上，坑也就产生了。
由于一般情况下都不需要跨站点上传文件，所以跨域有关的就不贴这里了，有兴趣的看以看完整的文章： http://coderbee.net/index.php/web/20130703/266
欢迎关注我的微信公众号: coderbee笔记。
相关推荐
内容概要：本文详细介绍了如何利用Matlab构建、优化和应用决策分类树。首先，讲解了数据准备阶段，将数据与程序分离，确保灵活性。接着，通过具体实例展示了如何使用Matlab内置函数如fitctree快速构建决策树模型，并通过可视化工具直观呈现决策树结构。针对可能出现的过拟合问题，提出了基于成本复杂度的剪枝方法，以提高模型的泛化能力。此外，还分享了一些实用技巧，如处理连续特征、保存模型、并行计算等，帮助用户更好地理解和应用决策树。 适合人群：具有一定编程基础的数据分析师、机器学习爱好者及科研工作者。 使用场景及目标：适用于需要进行数据分类任务的场景，特别是当需要解释性强的模型时。主要目标是教会读者如何在Matlab环境中高效地构建和优化决策分类树，从而应用于实际项目中。 其他说明：文中不仅提供了完整的代码示例，还强调了代码模块化的重要性，便于后续维护和扩展。同时，对于初学者来说，建议从简单的鸢尾花数据集开始练习，逐步掌握决策树的各项技能。
《营销调研》第7章-探索性调研数据采集.pptx
Assignment1_search_final(1).ipynb
美团优惠券小程序带举牌小人带菜谱+流量主模式，挺多外卖小程序的，但是都没有搭建教程 搭建： 1、下载源码，去微信公众平台注册自己的账号 2、解压到桌面 3、打开微信开发者工具添加小程序-把解压的源码添加进去-appid改成自己小程序的 4、在pages/index/index.js文件搜流量主广告改成自己的广告ID 5、到微信公众平台登陆自己的小程序-开发管理-开发设置-服务器域名修改成
《计算机录入技术》第十八章-常用外文输入法.pptx
基于Andorid的跨屏拖动应用设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。
《网站建设与维护》项目4-在线购物商城用户管理功能.pptx
区块链_房屋转租系统_去中心化存储_数据防篡改_智能合约_S_1744435730
《计算机应用基础实训指导》实训五-Word-2010的文字编辑操作.pptx
《移动通信(第4版)》第5章-组网技术.ppt
ABB机器人基础.pdf
《综合布线施工技术》第9章-综合布线实训指导.ppt
很不错的一套站群系统源码,后台配置采集节点，输入目标站地址即可全自动智能转换自动全站采集!支持 https、支持 POST 获取、支持搜索、支持 cookie、支持代理、支持破解防盗链、支持破解防采集 全自动分析,内外链接自动转换、图片地址、css、js，自动分析 CSS 内的图片使得页面风格不丢失: 广告标签，方便在规则里直接替换广告代码 支持自定义标签，标签可自定义内容、自由截取、内容正则截取。可以放在模板里，也可以在规则里替换 支持自定义模板，可使用标签 diy 个性模板，真正做到内容上移花接木 调试模式，可观察采集性能，便于发现和解决各种错误 多条采集规则一键切换，支持导入导出 内置强大替换和过滤功能，标签过滤、站内外过滤、字符串替换、等等 IP 屏蔽功能，屏蔽想要屏蔽 IP 地址让它无法访问 ****高级功能*****· url 过滤功能，可过滤屏蔽不采集指定链接· 伪原创，近义词替换有利于 seo· 伪静态，url 伪静态化，有利于 seo· 自动缓存自动更新，可设置缓存时间达到自动更新，css 缓存· 支持演示有阿三源码简繁体互转· 代理 IP、伪造 IP、随机 IP、伪造 user-agent、伪造 referer 来路、自定义 cookie，以便应对防采集措施· url 地址加密转换，个性化 url，让你的 url 地址与众不同· 关键词内链功能· 还有更多功能等你发现…… 程序使用非常简单，仅需在后台输入一个域名即可建站，不限子域名，站群利器，无授权，无绑定限制，使用后台功能可对页面进行自定义修改，在程序后台开启生 成功能，只要访问页面就会生成一个本地文件。当用户再次访问的时候就直接访问网站本地的页面，所以目标站点无法访问了也没关系，我们的站点依然可以访问， 支持伪静态、伪原创、生成静态文件、自定义替换、广告管理、友情链接管理、自动下载 CSS 内的图。
【自然语言处理】文本分类方法综述：从基础模型到深度学习的情感分析系统设计
基于Andorid的下拉浏览应用设计实现源码，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。
内容概要：本文详细介绍了一个原创的P2插电式混合动力系统Simulink模型，该模型基于逻辑门限值控制策略，涵盖了多个关键模块如工况输入、驾驶员模型、发动机模型、电机模型、制动能量回收模型、转矩分配模型、运行模式切换模型、档位切换模型以及纵向动力学模型。模型支持多种标准工况（WLTC、UDDS、EUDC、NEDC）和自定义工况，并展示了丰富的仿真结果，包括发动机和电机转矩变化、工作模式切换、档位变化、电池SOC变化、燃油消耗量、速度跟随和最大爬坡度等。此外，文章还深入探讨了逻辑门限值控制策略的具体实现及其效果，提供了详细的代码示例和技术细节。 适合人群：汽车工程专业学生、研究人员、混动汽车开发者及爱好者。 使用场景及目标：①用于教学和科研，帮助理解和掌握P2混动系统的原理和控制策略；②作为开发工具，辅助设计和优化混动汽车控制系统；③提供仿真平台，评估不同工况下的混动系统性能。 其他说明：文中不仅介绍了模型的整体架构和各模块的功能，还分享了许多实用的调试技巧和优化方法，使读者能够更好地理解和应用该模型。
内容概要：本文详细介绍了基于ADMM（交替方向乘子法）算法在电力系统分布式调度中的应用，特别是并行（Jacobi）和串行（Gauss-Seidel）两种不同更新模式的实现。文中通过MATLAB代码展示了这两种模式的具体实现方法，并比较了它们的优劣。并行模式适用于多核计算环境，能够充分利用硬件资源，尽管迭代次数较多，但总体计算时间较短；串行模式则由于“接力式”更新机制，通常收敛更快，但在计算资源有限的情况下可能会形成瓶颈。此外，文章还讨论了惩罚系数rho的自适应调整策略以及在电-气耦合系统优化中的应用实例。 适合人群：从事电力系统优化、分布式计算研究的专业人士，尤其是有一定MATLAB编程基础的研究人员和技术人员。 使用场景及目标：①理解和实现ADMM算法在电力系统分布式调度中的应用；②评估并行和串行模式在不同应用场景下的性能表现；③掌握惩罚系数rho的自适应调整技巧，提高算法收敛速度和稳定性。 其他说明：文章提供了详细的MATLAB代码示例，帮助读者更好地理解和实践ADMM算法。同时，强调了在实际工程应用中需要注意的关键技术和优化策略。
内容概要：本文深入研究了交错并联Buck变换器的工作原理、性能优势及其具体实现。文章首先介绍了交错并联Buck变换器相较于传统Buck变换器的优势，包括减小输出电流和电压纹波、降低开关管和二极管的电流应力、减小输出滤波电容容量等。接着，文章详细展示了如何通过MATLAB/Simulink建立该变换器的仿真模型，包括参数设置、电路元件添加、PWM信号生成及连接、电压电流测量模块的添加等。此外，还探讨了PID控制器的设计与实现，通过理论分析和仿真验证了其有效性。最后，文章通过多个仿真实验验证了交错并联Buck变换器在纹波性能、器件应力等方面的优势，并分析了不同控制策略的效果，如P、PI、PID控制等。 适合人群：具备一定电力电子基础，对DC-DC变换器特别是交错并联Buck变换器感兴趣的工程师和技术人员。 使用场景及目标：①理解交错并联Buck变换器的工作原理及其相对于传统Buck变换器的优势；②掌握使用MATLAB/Simulink搭建交错并联Buck变换器仿真模型的方法；③学习PID控制器的设计与实现，了解其在电源系统中的应用；④通过仿真实验验证交错并联Buck变换器的性能，评估不同控制策略的效果。 其他说明：本文不仅提供了详细的理论分析，还给出了大量可运行的MATLAB代码，帮助读者更好地理解和实践交错并联Buck变换器的设计与实现。同时，通过对不同控制策略的对比分析，为实际工程应用提供了有价值的参考。
《综合布线施工技术》第8章-综合布线工程案例.ppt
内容概要：本文详细介绍了基于STM32F103C8T6的K型热电偶温度控制仪的设计与实现。硬件部分涵盖了热电偶采集电路、OLED显示模块、蜂鸣器电路、风扇控制电路以及EEPROM存储模块。软件部分则涉及ADC配置、OLED刷新、PID控温算法、EEPROM参数存储、风扇PWM控制等多个方面的具体实现。文中不仅提供了详细的代码示例，还分享了许多调试经验和注意事项，如冷端补偿、DMA传输优化、I2C时钟配置、PWM频率选择等。 适合人群：具有一定嵌入式系统开发经验的工程师和技术爱好者。 使用场景及目标：适用于需要进行温度监测与控制的应用场景，如工业自动化、实验室设备等。目标是帮助读者掌握STM32F103C8T6在温度控制领域的应用技巧，提升硬件设计和软件编程能力。 其他说明：本文提供的工程文件包含Altium Designer的原理图PCB文件，便于二次开发。此外，文中还提到了一些扩展功能，如加入Modbus通信协议，供有兴趣的读者进一步探索。