HTML5拖拽上传简单效果

最新推荐文章于 2022-10-06 10:57:15 发布
最新推荐文章于 2022-10-06 10:57:15 发布
阅读量1.4k 收藏
点赞数
分类专栏： HTML5 文章标签： javascript html5 xmlhttprequest
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forthemyth/article/details/39642415
版权

简单的HTML5拖拽上传

注：不考虑低版本浏览器支持情况，最好在Chrome/FF/IE10+测试。
参考资料： 点击
一、简单而又原始的Servlet（Web3.0） 
@WebServlet(description = "html5拖拽上传处理", urlPatterns = { "/DragUploadServlet" })
public class DragUploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw = response.getWriter();
		if(ServletFileUpload.isMultipartContent(request)){
			FileItemFactory factory = new DiskFileItemFactory();
			ServletFileUpload upload = new ServletFileUpload(factory);
			Iterator<?> items;
			try{
				items = upload.parseRequest(request).iterator();
				while(items.hasNext()){
					FileItem item = (FileItem)items.next();
					if(!item.isFormField()){
						String name = item.getName();
						String fileName = name.substring(name.lastIndexOf("\\")+1);
						String path  =request.getServletContext().getRealPath("/") + File.separatorChar + fileName;
						System.out.println(path);
						item.write(new File(path));
						System.out.println("文件保存地址："+path);
						pw.write("文件保存地址："+path);
					}else{
						System.out.println("Form Field！");
					}
				}
			}catch(Exception e){
				e.printStackTrace(pw);
			}
		}
		pw.write("upload complete");
		pw.close();
	}
 }
其中用到了jar包：commons-fileupload-1.2.1.jar和commons-io.1.4.jar
因此，我本地部署在tomcat上映射的地址为:localhost:8080/{项目根路径}/DragUploadServlet。
二、WebContent下前端页面index.html 
<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>练习BOM</title>
    <script type="text/javascript">
        function readyExe() {
            var rate = document.getElementById('rate');
            document.addEventListener('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
            }, false);
            document.addEventListener('drop', function (e) {
                e.stopPropagation();
                e.preventDefault();
                sendFile(e || window.event);
            }, false);

            function sendFile(e) {
                var files = e.dataTransfer.files;
                if (!files || files.length < 1) {
                    return;
                }
                var formData = new FormData();
                var fileNames = '';
                for (var i = 0; i < files.length; ++i) {
                    formData.append('userfile' + i, files[i]);
                    fileNames += '《' + files[i].name + '》';
                }
                var url = 'http://localhost:8080/JavaScript/DragUploadServlet';

                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('process', function uploadRate(event) {
                    //lengthComputable是否可上传 	total 总字节数	loaded 已上传字节数
                    if (event.lengthComputable) {
                    	rate.innerHTML = fileNames + ' upload percent: '
                                + Math.round((event.loaded / event.total) * 100) + '%';
                    }
                }, false);//

                xhr.upload.onload = function () {
                	rate.innerHTML = fileNames + ' 上传完成';
                };
                xhr.open('post', url, true);
                xhr.send(formData);
                xhr.upload.onload = function () {
                	rate.innerHTML = fileNames + '上传完成。';
                };
                xhr.upload.onerror = function (e) {
                	rate.innerHTML = fileNames + ' 上传失败。';
                };
            }
        }
        window.onload = readyExe;
    </script>
</head>
<body>
    <div id="rate" style="min-width: 300px; min-height: 150px; border: 1px solid #ccc; border-radius:3px;">
    	将文件拖拽到此处开始上传！
    </div>
</body>
</html>
//进度事件监听没出来，暂时没找出原因
 
 
 


                

        

        

    




    

      

        

            

              
                
                  风中仙
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html+jquery 实现拖拽/点击上传文件

				
			

			

				

					njihkj的博客
				

				

					06-17
					
					678
					
				

			

		

		

			
				
点击文件框drop-area，触发对标签的点击效果，这里需要注意 标签要放到文件框#drop-area外面隐藏，否则对#drop-area点击后再触发的点击效果会造成无限循环。#fileName为文件列表，由于这里设置了只上传一个文件，所以这里只写了简单的显示一个名字，右侧显示上传成功图标。#fileMassage为文件的校验提示。

			
		

	



                

              
                



	

		

			

				
					
html5js拖拽和点击上传

				
			

			

				

					08-10
				

			

		

		

			
				
file文件上传的两种方式，点击按钮上传与拖放文件上传

			
		

	



                


  
              

                


	

		

			

				
					
HTML5文件实现拖拽上传

				
			

			

				

					讲不出再见
				

				

					01-05
					
					960
					
				

			

		

		

			
				
通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件，并上传到服务器。

     相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS（内容管理系统）也将会从中受益。     

     让我们看一下Firefox

			
		

	





	

		

			

				
					
人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、FormData)

				
			

			

				

					kopolwu的专栏
				

				

					02-06
					
					1179
					
				

			

		

		

			
				
http://fed.renren.com/archives/391



早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。本文将重点介绍实现拖拽上传的几个HTML5技术：Drag&Drop、FileReader API和FormData。

　　关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖

			
		

	



		

			
		



	

		

			

				
					
html5拖拽上传.

				
			

			

				

					09-16
				

			

		

		

			
				
此文档主要如何实现拖拽上传，欢迎大家下载查看！

			
		

	





	

		

			

				
					
HTML5拖拽文件上传

					
热门推荐

				
			

			

				

					CSDNzhaojiale的博客
				

				

					12-31
					
					1万+
					
				

			

		

		

			
				
上传文件
HTML5新增了文件API,提供客户端本地操作文件的可能.
我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.
file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.

可以使用accept属性规定文件上传的MIME类型 例如’image/jpeg’

<form action="#">
        <div class="for

			
		

	





	

		

			

				
					
HTML5.zip_html5 拖拽_拖拽上传

				
			

			

				

					09-22
				

			

		

		

			
				
HTML5是现代网页开发的关键技术之...总的来说，HTML5的拖拽上传功能为开发者提供了一种创新且直观的方式来处理文件上传，提高了用户体验。通过理解和正确使用HTML5的拖放API，开发者可以创建更加友好和高效的网页应用。

			
		

	





	

		

			

				
					
HTML5拖拽效果Demo

				
			

			

				

					05-01
				

			

		

		

			
				
这个“HTML5拖拽效果Demo”展示了一个使用HTML5和JavaScript实现的简单拖放操作，使得用户可以方便地将元素从一个区域拖动到另一个区域。这个功能在构建交互式网页应用时非常实用，比如文件上传、图片排序或者构建可...

			
		

	





	

		

			

				
					
HTML5 canvas实现移动端上传头像拖拽裁剪效果

				
			

			

				

					09-28
				

			

		

		

			
				
在本文中，我们将探讨如何使用HTML5的canvas元素实现移动端的头像上传并进行拖拽裁剪的功能。这个功能允许用户选择一张图片，然后在预览区域通过拖动和调整来裁剪出所需的头像部分。  首先，HTML部分创建了一个基本...

			
		

	





	

		

			

				
					
html5拖拽图片调整截图代码

				
			

			

				

					04-06
				

			

		

		

			
				
在HTML5中，拖放（Drag and Drop）功能是一项重要改进，它允许用户通过简单的鼠标操作来移动元素，实现更加直观的交互。在这个场景中，“html5拖拽图片调整截图代码”是一个利用HTML5拖放API和画布（Canvas）API实现...

			
		

	





	

		

			

				
					
HTML5开发 拖拽文件上传

				
			

			

				

					weixin_30345577的博客
				

				

					09-15
					
					138
					
				

			

		

		

			
				
Drag&Drop 拖拽功能的处理
关于HTML5拖拽文件上传，其实国外已经有很多网站有这样的应用，最早推出拖拽上传应用的是 Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送，但其实现在利用HTML5的功能实现，主要借助于新版支持的浏览器来实现，IE还是弱很多。

拖拽上传应用主要使用了以下 HTML5技术：
Drag&Drop:HTML5基于拖拽...

			
		

	





	

		

			

				
					
html页面实现拖拽上传完整实例源码.zip

				
			

			

				

					11-28
				

			

		

		

			
				
支持拖拽上传的完整实例源码，

			
		

	





	

		

			

				
					
vue_upload图片上传支持拖拽

				
			

			

				

					10-26
				

			

		

		

			
				
vue_upload图片上传支持拖拽，vue_upload图片上传支持拖

			
		

	





	

		

			

				
					
web拖拽上传

				
			

			

				

					06-23
				

			

		

		

			
				
基于web实现的拖拽上传，在firfox上有用，IE上无效

			
		

	





	

		

			

				
					
JS实现的文件拖拽上传功能示例

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了JS实现的文件拖拽上传功能,涉及javascript事件触发、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
Html5 新特性——拖放、文件上传

				
			

			

				

					io_123io_123的博客
				

				

					02-17
					
					3129
					
				

			

		

		

			
				
HTML5——拖放

			
		

	





	

		

			

				
					
html5简单实现拖拽上传文件（直接上代码）

				
			

			

				

					gongweixin2018的博客
				

				

					02-20
					
					1081
					
				

			

		

		

			
				
拖拽上传文件

			
		

	





	

		

			

				
					
HTML5 新特性 - 基于拖拽实现文件上传

				
			

			

				

					欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
				

				

					12-09
					
					653
					
				

			

		

		

			
				
基于拖拽实现文件上传


	准备一个页面, 02_upload.html. 提供一个div, 监听drop事件. 在该事件的处理函数中接收用户拖拽进来的文件信息.
	
	
	一旦获取到文件信息, 需要遵守http协议规范下上传文件的标准, 发送上传文件请求, 将文件数据发给服务端.
	
	
	服务端接收并存储该文件, 保存在服务器文件系统内部(/home/a.jpg)
	
	
	保存完毕后, 即上传成功, 之后浏览器可以通过链接地址访问该资源.
	


如何获取拖拽文件的信息？

当用户把文...

			
		

	





	

		

			

				
					
html实现拖拽上传

				
			

			

				

					LueLueLue77的博客
				

				

					10-06
					
					1337
					
				

			

		

		

			
				
最近公司需要有一个拖拽上传的功能，但是由于在开发前，某某人规定了只能使用某个组件库😅，而组件库内没有拖拽上传的例子，所以我在这里写一个拖拽上传的功能😁.3. 这里有用到Bootstrap5的class，所以html部分的样式需要自己更改。1. 这里上传成功后的提示用的是primevue组件库，可以不用管。2. 目前这里只是单文件上传，如果有需求可以自行更改。4. 目前这边就是按钮上传以及拖拽上传。

			
		

	





	

		

			

				
					
html拖拽垃圾桶,html5拖放-垃圾桶效果

					
最新发布

				
			

			

				

					06-03
				

			

		

		

			
				
好的，这个问题涉及到HTML5的拖放功能。您可以通过HTML5的drag和drop事件实现这个垃圾桶效果。

具体实现步骤如下：

1. 创建一个垃圾桶图标的元素，例如一个div元素。

2. 给垃圾桶元素添加一个drop事件监听器，用于接收被拖拽元素的放置操作。

3. 给需要被拖拽的元素添加一个dragstart事件监听器，用于标记被拖拽的元素。

4. 给需要被放置的容器元素添加一个dragover事件监听器，用于防止浏览器默认的放置行为。

5. 给需要被放置的容器元素添加一个drop事件监听器，用于处理被拖拽元素的放置操作。

6. 在dragstart事件中设置被拖拽元素的数据，例如设置一个dataTransfer对象的数据类型和数据值。

7. 在drop事件中获取被拖拽元素的数据，并根据数据值进行相应的操作，例如删除被拖拽元素。

下面是一个示例代码，供您参考：

```
<!DOCTYPE html>
<html>
<head>
	<title>HTML5拖放-垃圾桶效果</title>
	<style>
		#trash {
			width: 200px;
			height: 200px;
			border: 2px solid black;
			background-color: gray;
			text-align: center;
			line-height: 200px;
			font-size: 30px;
			color: white;
			margin: 50px auto;
		}
		#drag {
			width: 100px;
			height: 100px;
			border: 2px solid black;
			background-color: red;
			text-align: center;
			line-height: 100px;
			font-size: 20px;
			color: white;
			position: absolute;
			top: 50px;
			left: 50px;
			cursor: move;
		}
	</style>
</head>
<body>

<div id="trash">垃圾桶</div>
<div id="drag" draggable="true">拖我到垃圾桶</div>

<script>
	var drag = document.getElementById("drag");
	var trash = document.getElementById("trash");

	drag.addEventListener("dragstart", function(event) {
		event.dataTransfer.setData("text/plain", "drag");
	});

	trash.addEventListener("dragover", function(event) {
		event.preventDefault();
	});

	trash.addEventListener("drop", function(event) {
		var data = event.dataTransfer.getData("text/plain");
		if (data === "drag") {
			drag.parentNode.removeChild(drag);
		}
	});
</script>

</body>
</html>
```

以上代码实现了一个拖拽一个红色的方块，将其拖拽到一个灰色的div中，会删除该方块。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值