文件管理 · 2024年1月14日

web实现文件拖拽上传|网页图片拖拽功能的实现

A. 网页图片拖拽功能的实现

document.onmousemove=function(e){if(isDraging===true){varnowX=e.pageX-startX;varnowY=e.pageY-startY;oDrag.style.left=nowX+'px';oDrag.style.top=nowY+'px';returnfalse;//重新触抄发}}

addEventListener有兼袭容问题换document.onmousemove这种形式也可以自己试下问题不大

B. web前端上传图片的几种方法

下面给你介绍3种web前端上传图片的方法:

1.表单上传

最传统的图片上传方式是form表单上传,使用form表单的input[type=”file”]控件,打开系统的文件选择对话框,从而达到选择文件并上传的目的。

ajax无刷新上传

Ajax无刷新上传的方式,本质上与表单上传无异,只是把表单里的内容提出来采用ajax提交,并且由前端决定请求结果回传后的展示结果。

3.各类插件上传

当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等,这时传统的表单上传很难实现这些功能,我们可以借助现有插件完成。

如网络上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等,大家可根据项目实际需求选择适合的插件。