js拖拽上传文件夹|如何用JS实现文件拖拽事件

❶ 求助:文件拖拽上传,全浏览器都兼容方法

这种文件拖拽方法都是用HTML5写的,不可能所有浏览器都兼容,我们当时处理的办法是做成既可以拖拽又可以点击上传的模式.可以看一下115网盘怎么做的,他们就是只有IE8不支持,其他都支持

❷ WEB页面如何实现拖拽文件夹上传

目前用户要通过Web上传一个文件是通过 <input type="file /"> 这个标记。具体过程需要在一个很傻的对话框里定位文件夹 -> 在大量的文件里找到目标文件 -> 确定 -> 点“上传”按钮。我们能不能把这个步骤简化,实现拖拽上传呢?比如说,1. 在 资源管理器 里选择一个图片2. 拖拽到一个网页,比如说一个正在编辑的博客3. 后台AJXJ自动上传这个图片4. 在正在编辑的博客的当前位置直接插入并显示图片。我想用javascript实现。(跟AJAX一样,有一点hack的味道。)原理很简单。首先用户拖拽一个图片到浏览器,浏览器会自动跳转到这个图片。比如说我拖拽 D:\test\1.jpg 到浏览器,浏览器会跳转当前页面到 file:///D:/test/1.jpg。那么我们要做的就是在浏览器跳转之前:1. 截获body.onunload事件,并取消浏览器的跳转2. 获知浏览器将要跳转到的页面3. 自动填写 <input type="file" />的地址4. AJAX后台上传图片5. 把图片插入当前的正在编辑位置。发这个帖子的目的,想跟大家探讨这个设想的可能性。最后希望得出一个结论:可行,还是不可行。如果可行的话我希望深入探讨出一个固定的模式。(像AJAX那样)

❸ js如何判断火狐拖拽的是文件还是文件夹

您好!很高兴为您答疑。这个问题没有尝试过,但是如果可以正确获取对象的话,拖拽的文件和文件夹的对象主体应该是有区别的,您可以尝试使用js遍历一下该对象主体试一试。如果对我们的回答存在任何疑问,欢迎继续问询。

❹ MyEclipse中如何直接将js拖拽到jsp实现js的导入,解决了吗

myeclipse中无法通过拖拽的方式把js导入jsp:通过在jsp上写<script src="js文件路径" type="text/javascript"></script>来导入js。通常是在页面控件的事件中使用js方法,比如onclick事件,onchange事件。

❺ js通过ID上传文件到文件夹。求代码!!

如果只是前台的话

简单的你就用表单提交就行了啊

formid="form1"name="form1"action=""method="post"enctype="multipart/form-data"><tableclass="pedit_edit"width="100%"border="0"cellspacing="0"><tr><tdcolspan="2"></td></tr><tr><tdclass="tit">文件:</td><tdclass="cnt"><inputtype="file"name="file"size="45"value=""id="file"style="width:250px"/></td></tr></table></form>

然后js里面直接form1.submit();就好了

后台看你是用什么写了,如果是java 的话有Apache的第三方包,如果是asp.net那估计也有包支持

❻ 几种js实现的动态多文件上传

方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。 html<p><a href='#' onclick='javascript:viewnone(more1)'> 添加附件 </a><div id='more1' style='display:none'> <input type="file" name="attach1" size="50"javascript:viewnone(more2)> </span></div><div id='more2' style='display:none'> <input type="file" name="attach2" size="50"'></div></p>js<SCRIPT language="javascript"> function viewnone(e){ e.style.display=(e.style.display=="none")?"":"none"; }</script>方式二:这种方式的动态多文件上传是实现了的,很简单的,不说废话看codehtml<input type="button" name="button" value="添加附件" onclick="addInput()"><input type="button" name="button" value="删除附件" onclick="deleteInput()"><span id="upload"></span>js<script type="text/javascript"> var attachname = "attach"; var i=1; function addInput(){ if(i>0){ var attach = attachname + i ; if(createInput(attach)) i=i+1; } } function deleteInput(){ if(i>1){ i=i-1; if(!removeInput()) i=i+1; } } function createInput(nm){ var aElement=document.createElement("input"); aElement.name=nm; aElement.id=nm; aElement.type="file"; aElement.size="50"; //aElement.value="thanks"; //aElement.onclick=Function("asdf()"); if(document.getElementById("upload").appendChild(aElement) == null) return false; return true; } function removeInput(nm){ var aElement = document.getElementById("upload"); if(aElement.removeChild(aElement.lastChild) == null) return false; return true; } </script>方式三:动态多文件上传,只是在oFileInput.click();这个地方,这样做就不能上传这个文件了,因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧!另外还有一点就是说,click()只有在ie中才能正常运行。虽说这种方式最终没能实现上传,但还是留下来参考,看看是否有人可以真正实现上传。 html<A href="javascript:newUpload();">添加附件</A><TABLE width="100%" border="0" cellpadding="0" cellspacing="1"> <TBODY id="fileList"></TBODY></TABLE><DIV id="uploadFiles" style="display:block"></DIV>js<SCRIPT language="javascript"> //—新建上传 function newUpload(){ var oFileList = document.getElementById("fileList"); var fileCount = oFileList.childNodes.length + 1; var oFileInput = newFileInput("upfile_" + fileCount); if(selectFile(oFileInput)){ addFile(oFileInput); } }//—-选择文件 function selectFile(oFileInput){ var oUploadFiles = document.getElementById("uploadFiles"); oUploadFiles.appendChild(oFileInput); oFileInput.focus(); oFileInput.click();//不能这样做,可能是为了安全着想吧! var fileValue = oFileInput.value; if(fileValue == ""){ oUploadFiles.removeChild(oFileInput); return false; } else return true; } //—新建一个文件显示列表 function addFile(oFileInput){ var oFileList = document.getElementById("fileList"); var fileIndex = oFileList.childNodes.length + 1; var oTR = document.createElement("TR"); var oTD1 = document.createElement("TD"); var oTD2 = document.createElement("TD"); oTR.setAttribute("id","file_" + fileIndex); oTR.setAttribute("bgcolor","#FFFFFF"); oTD1.setAttribute("width","6%"); oTD2.setAttribute("width","94%"); oTD2.setAttribute("align","left"); oTD2.innerText = oFileInput.value; oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ');">删除</A>'; oTR.appendChild(oTD1); oTR.appendChild(oTD2); oFileList.appendChild(oTR); } //—移除上传的文件 function removeFile(fileIndex){ var oFileInput = document.getElementById("upfile_" + fileIndex); var oTR = document.getElementById("file_" + fileIndex); uploadFiles.removeChild(oFileInput); fileList.removeChild(oTR); } //—创建一个file input对象并返回 function newFileInput(_name){ var oFileInput = document.createElement("INPUT"); oFileInput.type = "file"; oFileInput.id = _name; oFileInput.name = _name; oFileInput.size="50"; //oFileInput.setAttribute("id",_name); //oFileInput.setAttribute("name",_name); //oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>'; //alert(oFileInput.outerHTML); return oFileInput; } </SCRIPT>

❼ 用js怎么实现简单拖拽文件上传

拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自内己做一些操作,所容谓自定义。例如:①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能,如下图:类似的效果我们可以在QQ精要新闻弹出框中看到,见下图:②把内容放在自己喜欢的位置上这个在桌面软件上见到的最多,比如视频播放器,Adobe系列软件(CS3+)等。

❽ 如何用JS实现文件拖拽事件

在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能 在拖动目标上触内发事容件 (源元素): ondragstart – 用户开始拖动元素时触发 ondrag – 元素正在拖动时触发 ondragend – 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter – 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover – 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave – 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop – 在一个拖动过程中,释放鼠标键时触发此事件

❾ JS实现图片上传到我指定的文件夹的代码

可能不行吧 还是要用Java、php等语言来实现上传和插入数据库的因为上传要用到表单或者拿到路径的

❿ js 大文件分片上传处理如何实现

推荐采用webuploader控件来解决。关于WebUploader的功能说明:大文件上传续传支持超大文件上传(100G+)和续传,可以关闭浏览器,重启系统后仍然继续上传。开源提供ASP.NET,JSP,PHP示例和源代码,其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。分片、并发分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。预览、压缩支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。解析jpeg中的meta信息,对于各种orientation做了正确的处理,同时压缩后上传保留图片的所有原始meta数据。多途径添加文件支持文件多选,类型过滤,拖拽(文件&文件夹),图片粘贴功能。上传本地指定路径的文件,不需要通过点击按钮选择文件。粘贴功能主要体现在当有图片数据在剪切板中时(截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制),Ctrl + V便可添加此图片文件。HTML5 & FLASH兼容主流浏览器和低版本浏览器,接口一致,实现了两套运行时支持,用户无需关心内部用了什么内核。而且支持IE6,IE8浏览器。同时Flash部分没有做任何UI相关的工作,方便不关心flash的用户扩展和自定义业务需求。基于内存映射模式进行IO操作,充分发挥操作系统性能。MD5秒传当文件体积大、量比较多时,支持上传前做文件md5值验证,一致则可直接跳过。如果服务端与前端统一修改算法,取段md5,可大大提升验证性能,耗时在20ms左右。易扩展、可拆分采用可拆分机制, 将各个功能独立成了小组件,可自由搭配。采用AMD规范组织代码,清晰明了,方便高级玩家扩展。


赞 (0)