上传文件_上传文件夹 - CSDN
精华内容
参与话题
  • html页面实现文件上传

    万次阅读 2019-05-21 17:22:30
    因为业务的需求,需要实现一个通过浏览器把本地文件上传到服务器的功能,因为之前没有做过,所以也是经过了一番探索才实现了这个功能,这里只介绍前端的实现,后台的接收、验证和保存就不介绍了。 这个流程如下: ...

    因为业务的需求,需要实现一个通过浏览器把本地文件上传到服务器的功能,因为之前没有做过,所以也是经过了一番探索才实现了这个功能,这里只介绍前端的实现,后台的接收、验证和保存就不介绍了。

    这个流程如下:

    1、读取本地文件

    2、建立和服务器的连接(使用AJAX)

    3、上传一些头信息和文件流

    4、等待服务器响应后,显示结果

     

    读取本地文件,在页面中点击 "浏览" 后,弹出文件选择对话框,使用 <input type="file"/>标签即可,如果要过滤指定后缀的文件,添加accept属性,如只能选择rar文件

    <input class="style_file_content" accept=".rar" type="file" id="upload_file_id"/>

    要通过js将文件读取出来,需要用到 FileReader

    var fReader = new FileReader();
    fReader.onload=function(e){
       //读取完成
       xhreq.send(fReader.result);
    }
    fReader.readAsArrayBuffer(uploadFile.files[0]);

    读取文件完成后,会回调onload 函数,文件内容保存在fReader.result,所以在onload 里面把数据发生到服务器即可

    和服务器建立连接,js代码如下

    function createHttpRequest()
     {
    	 var xmlHttp=null;
         try{
     	    // Firefox, Opera 8.0+, Safari
     	    xmlHttp=new XMLHttpRequest();
     	 }catch (e){
     	    // Internet Explorer
     		try{
     	        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     	    }catch (e){
     		try{
     		    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     	        }catch (e){
     	            alert("您的浏览器不支持AJAX!");
     	        }
     	    }
     	}
        return xmlHttp;
     }

    调用open 后才会真正建立和服务器的连接,第一个参数是请求的方式,第二个参数是对应的URL 

    xhreq.open("POST","/upload/file",true);
    xhreq.setRequestHeader("Content-type", "application/octet-stream"); //流类型
    xhreq.setRequestHeader("Content-length", fwFile.files[0].size);     //文件大小
    xhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name)); //兼容中文
    xhreq.send(fReader.result);

    因为调用send()调用一次之后,就会把数据发送出去,比较难在内容里面添加一些参数,比如文件名等信息,所以这里键文件名放在header里面,如 xhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name)); //兼容中文。因为如果header里面的参数是中文的时候,后台读出来时会出现乱码,所以需要encodeURI() 做一次编码,后台读取后再做一次转码。

    var xhreq=createHttpRequest();
    xhreq.onreadystatechange=function(){
    	if(xhreq.readyState==4){
    		if(xhreq.status==200){
    			uploadTip.innerText=xhreq.responseText;
    			setTimeout(function(){
    			hideUploadDialog()
    			},2000);	//2秒后隐藏
    		}else{
    			uploadTip.innerText="文件上传失败了";
    		}	
    	 }
    }

     在 请求发送给后台的过程中,可以通过 onreadystatechange 这个会调函数知道当前的状态,当 readyState 等于 4 且状态为 200 时,表示响应已就绪,响应的结果在xhreq.responseText。

     

    完整的demo如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>文件上传测试</title>
    </head>
    
    <style type="text/css">
    	#content_div{
       	position:absolute;
    		left:0px;
    		top:0px;
    		right:0px;
    		bottom:0px;
    		text-align:center
      }
      
      .upload_dialog_div{
      position:fixed;
    	left:0px;
    	right:0px;
    	top:0px;
    	bottom:0px;
    	overflow:auto; 
    	visibility:hidden;
    	background-color: rgba(60,60,60,0.5);
    	z-index:99;
      }
      .style_content_div{
      position:relative;
      margin:auto;
      margin-top:160px;
    	width:400px;
    	height:160px;
    	background:#F5F5DC;
      }
      .style_content_upper_div{
      position:absolute;
      left:0px;
      top:0px;
    	width:400px;
    	height:100px;
    	background:#F5F5DC;
      }
      .style_content_lower_div{
      position:absolute;
      left:0px;
      top:100px;
    	width:400px;
    	height:60px;
    	background:#F5FFDC;
      }
      
      .style_content_file_div{
      position:absolute;
      left:15px;
      top:20px;
    	width:380px;
    	height:60px;
      }
      .style_file_span{
    	  float:left;
    	  width:120px;
    	  height:36px;
    	  font-size:24px;
    	  text-align:right;
      }
      .style_file_content{
    	  margin-top:5px;
      }
      .style_content_prog_div{
      position:absolute;
      left:18px;
      top:57px;
    	width:360px;
    	height:40px;
      }
      .style_prog_span_hit{
    	  color:#ff0000;
      }
      .style_prog_content{
    	  width:360px;
    	  visibility:hidden;
      }
      .style_content_span{
      width:200px;
    	height:60px;
    	line-height:60px;
    	display:inline-block;
    	float:left;
    	font-size:32px;
    	text-align:center;
    	cursor: pointer;
      }
    
      .style_copyright_a{
    	text-decoration:none;
    	color:#cc00cc;
      }
    </style>
    <script>
    function createHttpRequest()
     {
    	 var xmlHttp=null;
         try{
     	    // Firefox, Opera 8.0+, Safari
     	    xmlHttp=new XMLHttpRequest();
     	 }catch (e){
     	    // Internet Explorer
     		try{
     	        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     	    }catch (e){
     		try{
     		    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     	        }catch (e){
     	            alert("您的浏览器不支持AJAX!");
     	        }
     	    }
     	}
        return xmlHttp;
     }
     
     function uploadFileToServer(){
    	var uploadFile = document.getElementById("upload_file_id");
    	var uploadTip = document.getElementById("upload_tip_id");
    	var uploadProgress = document.getElementById("upload_progress_id");
    	
    	if(uploadFile.value==""){
    		 uploadTip.innerText="请选择一个文件";
    	}else if(uploadFile.files[0].size>1024 &&uploadFile.files[0].size<(40*1024*1024)){ 
    		try{
    			if(window.FileReader){
    				var fReader = new FileReader();
    				var xhreq=createHttpRequest();
    				 xhreq.onreadystatechange=function(){
    					 if(xhreq.readyState==4){
    						if(xhreq.status==200){
    							 uploadTip.innerText="文件上传成功";
    							 setTimeout(function(){
    								hideUploadDialog()
    							},2000);	//2秒后隐藏
    						}else{
    							uploadTip.innerText="文件上传失败了";
    						}	
    					 }
    				 }
    				fReader.onload=function(e){
    					 xhreq.open("POST","/upload/file",true);
    					 xhreq.setRequestHeader("Content-type", "application/octet-stream"); //流类型
    					 xhreq.setRequestHeader("Content-length", fwFile.files[0].size);     //文件大小
    					 xhreq.setRequestHeader("uploadfile_name", encodeURI(fwFile.files[0].name)); //兼容中文
    					 xhreq.send(fReader.result);
    				}
    				fReader.onprogress = function(e){
    					 uploadProgress.value = e.loaded*100/e.total;
    				}
    				fReader.readAsArrayBuffer(uploadFile.files[0]);
    				uploadProgress.style.visibility="visible";
    				uploadProgress.value = 0;
    			}else{
    				uploadTip.innerText="浏览器不支持上传文件";
    			}			
    		}catch(e){
    			 uploadTip.innerText="文件上传失败";
    		}
    	}else{
    		  uploadTip.innerText="文件不符合要求";
    	}
    }
     function showUploadDialog(){
    	var up_dialog=document.getElementById("upload_dialog");
      document.getElementById("upload_tip_id").innerText="请选择要上传的文件";
      document.getElementById("upload_progress_id").style.visibility="hidden";
    	up_dialog.style.visibility="visible";
    	
     }
     function hideUploadDialog(){
    	var up_dialog=document.getElementById("upload_dialog");
    	document.getElementById("upload_progress_id").style.visibility="hidden";
    	up_dialog.style.visibility="hidden";
     }
    </script>
    <body>
       <div id="content_div">
       	  <br>
       	  <br>
       	  <br>
       	  <br>
       	  <br>
       	  <a class="style_copyright_a" href="javascript:void(0);" onclick="showUploadDialog()">上传新文件</a>
       </div>
       
       <div id="upload_dialog" class="upload_dialog_div"> 
       	    <div class="style_content_div">
      	  	  <div class="style_content_upper_div">
      	  	  	  <div class="style_content_file_div">
      	  	  	  	 <span class="style_file_span"> 文件路径:</span>
      	  	  	  	 <input class="style_file_content" type="file" id="upload_file_id"/>
      	  	  	  </div>
      	  	  	  <div class="style_content_prog_div">
      	  	  	  	 <span class="style_prog_span_hit" id="upload_tip_id"> 请选择要上传的文件 </span>
      	  	  	     <progress class="style_prog_content" id="upload_progress_id" value="0" max="100"></progress> 
      	  	  	  </div>
      	  	  </div>
      	  	  <div class="style_content_lower_div">
      	  	  	   <span class="style_content_span" onmouseover="this.style.background='#cccccc'" onmouseout="this.style.background=''" onclick="hideUploadDialog()">取消</span>
      	  	  	   <span class="style_content_span" onmouseover="this.style.background='#F5CCDC'" onmouseout="this.style.background=''" onclick="uploadFileToServer()">确定</span>
      	  	  </div>
      	  </div>
       </div>
    </body>
    </html>

     

    展开全文
  • Java实现上传(支持多个文件同时上传)和下载

    万次阅读 多人点赞 2018-05-08 17:38:41
    文件上传一直是Web项目中必不可少的一项功能。项目结构如下:(这是我之前创建的SSM整合的框架项目,在这上面添加文件上传与下载)主要的是FileUploadController,doupload.jsp,up.jsp,springmvc.xml1.先编写up.jsp&...

    文件上传一直是Web项目中必不可少的一项功能。

    项目结构如下:(这是我之前创建的SSM整合的框架项目,在这上面添加文件上传与下载)


    主要的是FileUploadController,doupload.jsp,up.jsp,springmvc.xml

    1.先编写up.jsp

    <form action="doupload.jsp" enctype="multipart/form-data" method="post">
       		<p>上传者:<input type="text" name="user"></p> 
       		<p>选择文件:<input type="file" name="nfile"></p> 
       		<p>选择文件:<input type="file" name="nfile1"></p> 
       		<p><input type="submit" value="提交"></p>
       </form>

    以上便是up.jsp的核心代码;

    2.编写doupload.jsp

    <%
    	request.setCharacterEncoding("utf-8");
    	String uploadFileName = ""; //上传的文件名
    	String fieldName = "";  //表单字段元素的name属性值
    	//请求信息中的内容是否是multipart类型
    	boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    	//上传文件的存储路径(服务器文件系统上的绝对文件路径)
    	String uploadFilePath = request.getSession().getServletContext().getRealPath("upload/" );
    	if (isMultipart) {
    		FileItemFactory factory = new DiskFileItemFactory();
    		ServletFileUpload upload = new ServletFileUpload(factory);
    		try {
    			//解析form表单中所有文件
    			List<FileItem> items = upload.parseRequest(request);
    			Iterator<FileItem> iter = items.iterator();
    			while (iter.hasNext()) {   //依次处理每个文件
    				FileItem item = (FileItem) iter.next();
    				if (item.isFormField()){  //普通表单字段
    					fieldName = item.getFieldName();   //表单字段的name属性值
    					if (fieldName.equals("user")){
    						//输出表单字段的值
    						out.print(item.getString("UTF-8")+"上传了文件。<br/>");
    					}
    				}else{  //文件表单字段
    					String fileName = item.getName();
    					if (fileName != null && !fileName.equals("")) {
    						File fullFile = new File(item.getName());
    						File saveFile = new File(uploadFilePath, fullFile.getName());
    						item.write(saveFile);
    						uploadFileName = fullFile.getName();
    						out.print("上传成功后的文件名是:"+uploadFileName);	
    						out.print("\t\t下载链接:"+"<a href='download.action?name="+uploadFileName+"'>"+uploadFileName+"</a>");
    						out.print("<br/>");	
    					}
    				}
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    	}
    %>

    该页面主要是内容是,通过解析request,并设置上传路径,创建一个迭代器,先进行判空,再通过循环来实现多个文件的上传,再输出文件信息的同时打印文件下载路径。

    效果图:



    3.编写FilterController实现文件下载的功能(相对上传比较简单):

    @Controller
    public class FileUploadController {
    	@RequestMapping(value="/download")
    	public ResponseEntity<byte[]> download(HttpServletRequest request,HttpServletResponse response,@RequestParam("name") String filename)throws Exception {    
    		//下载显示的文件名,解决中文名称乱码问题  
    		filename=new String(filename.getBytes("iso-8859-1"),"UTF-8");
    		//下载文件路径
    		String path = request.getServletContext().getRealPath("/upload/");
    		File file = new File(path + File.separator + filename);
    		HttpHeaders headers = new HttpHeaders();  
    		//下载显示的文件名,解决中文名称乱码问题  
    		String downloadFielName = new String(filename.getBytes("iso-8859-1"),"UTF-8");
    		//通知浏览器以attachment(下载方式)打开图片
    		headers.setContentDispositionFormData("Content-Disposition", downloadFielName); 
    		//application/octet-stream : 二进制流数据(最常见的文件下载)。
    		headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    		return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),    
    				headers, HttpStatus.CREATED);  
    	}
    }

    4.实现上传文件的功能还需要在springmvc中配置bean:

    <bean id="multipartResolver"  
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
            <!-- 上传文件大小上限,单位为字节(10MB) -->
            <property name="maxUploadSize">  
                <value>10485760</value>  
            </property>  
            <!-- 请求的编码格式,必须和jSP的pageEncoding属性一致,以便正确读取表单的内容,默认为ISO-8859-1 -->
            <property name="defaultEncoding">
                <value>UTF-8</value>
            </property>
        </bean>

    完整代码如下:

    up.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>File控件</title>
      </head>
      
      <body>
       <form action="doupload.jsp" enctype="multipart/form-data" method="post">
       		<p>上传者:<input type="text" name="user"></p> 
       		<p>选择文件:<input type="file" name="nfile"></p> 
       		<p>选择文件:<input type="file" name="nfile1"></p> 
       		<p><input type="submit" value="提交"></p>
       </form>
      </body>
    </html>

    doupload.jsp

    <%@ page language="java" pageEncoding="UTF-8"%>
    <%@page import="java.io.*,java.util.*"%>
    <%@page import="org.apache.commons.fileupload.*"%>
    <%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
    <%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>上传处理页面</title>
    </head>
    <body>
    <%
    	request.setCharacterEncoding("utf-8");
    	String uploadFileName = ""; //上传的文件名
    	String fieldName = "";  //表单字段元素的name属性值
    	//请求信息中的内容是否是multipart类型
    	boolean isMultipart = ServletFileUpload.isMultipartContent(request);
    	//上传文件的存储路径(服务器文件系统上的绝对文件路径)
    	String uploadFilePath = request.getSession().getServletContext().getRealPath("upload/" );
    	if (isMultipart) {
    		FileItemFactory factory = new DiskFileItemFactory();
    		ServletFileUpload upload = new ServletFileUpload(factory);
    		try {
    			//解析form表单中所有文件
    			List<FileItem> items = upload.parseRequest(request);
    			Iterator<FileItem> iter = items.iterator();
    			while (iter.hasNext()) {   //依次处理每个文件
    				FileItem item = (FileItem) iter.next();
    				if (item.isFormField()){  //普通表单字段
    					fieldName = item.getFieldName();   //表单字段的name属性值
    					if (fieldName.equals("user")){
    						//输出表单字段的值
    						out.print(item.getString("UTF-8")+"上传了文件。<br/>");
    					}
    				}else{  //文件表单字段
    					String fileName = item.getName();
    					if (fileName != null && !fileName.equals("")) {
    						File fullFile = new File(item.getName());
    						File saveFile = new File(uploadFilePath, fullFile.getName());
    						item.write(saveFile);
    						uploadFileName = fullFile.getName();
    						out.print("上传成功后的文件名是:"+uploadFileName);	
    						out.print("\t\t下载链接:"+"<a href='download.action?name="+uploadFileName+"'>"+uploadFileName+"</a>");
    						out.print("<br/>");	
    					}
    				}
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    	}
    %>
    </body>
    </html>

    FileUploadController.java

    package ssm.me.controller;
    
    import java.io.File;
    import java.net.URLDecoder;
    import java.util.Iterator;
    import java.util.List;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.fileupload.FileItem;
    import org.apache.commons.fileupload.FileItemFactory;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    import org.apache.commons.io.FileUtils;
    import org.junit.runners.Parameterized.Parameter;
    import org.springframework.http.HttpHeaders;
    import org.springframework.http.HttpStatus;
    import org.springframework.http.MediaType;
    import org.springframework.http.ResponseEntity;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.ModelAttribute;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.multipart.MultipartFile;
    
    
    @Controller
    public class FileUploadController {
    	@RequestMapping(value="/download")
    	public ResponseEntity<byte[]> download(HttpServletRequest request,HttpServletResponse response,@RequestParam("name") String filename)throws Exception {    
    		//下载显示的文件名,解决中文名称乱码问题  
    		filename=new String(filename.getBytes("iso-8859-1"),"UTF-8");
    		//下载文件路径
    		String path = request.getServletContext().getRealPath("/upload/");
    		File file = new File(path + File.separator + filename);
    		HttpHeaders headers = new HttpHeaders();  
    		//下载显示的文件名,解决中文名称乱码问题  
    		String downloadFielName = new String(filename.getBytes("iso-8859-1"),"UTF-8");
    		//通知浏览器以attachment(下载方式)打开图片
    		headers.setContentDispositionFormData("Content-Disposition", downloadFielName); 
    		//application/octet-stream : 二进制流数据(最常见的文件下载)。
    		headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    		return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),    
    				headers, HttpStatus.CREATED);  
    	}
    }

    SpringMVC.xml(仅供参考,有的地方不可以照搬)

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
           xmlns:mvc="http://www.springframework.org/schema/mvc"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:aop="http://www.springframework.org/schema/aop" 
           xmlns:tx="http://www.springframework.org/schema/tx"
           xsi:schemaLocation="http://www.springframework.org/schema/beans
            http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
            http://www.springframework.org/schema/mvc 
            http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd 
            http://www.springframework.org/schema/context
            http://www.springframework.org/schema/context/spring-context.xsd
            http://www.springframework.org/schema/aop
            http://www.springframework.org/schema/aop/spring-aop-4.2.xsd
            http://www.springframework.org/schema/tx
            http://www.springframework.org/schema/tx/spring-tx.xsd">
            <!-- 一个用于自动配置注解的注解配置 -->
            <mvc:annotation-driven></mvc:annotation-driven>
         	<!-- 扫描该包下面所有的Controller -->
         	<context:component-scan base-package="ssm.me.controller"></context:component-scan>
            <!-- 视图解析器 -->
            <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"></bean>
    		<bean id="multipartResolver"  
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
            <!-- 上传文件大小上限,单位为字节(10MB) -->
            <property name="maxUploadSize">  
                <value>10485760</value>  
            </property>  
            <!-- 请求的编码格式,必须和jSP的pageEncoding属性一致,以便正确读取表单的内容,默认为ISO-8859-1 -->
            <property name="defaultEncoding">
                <value>UTF-8</value>
            </property>
        </bean>
    
    </beans>        

    web.xml(仅供参考,有的地方不可以照搬)

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
      <display-name>Student</display-name>
      <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
      </welcome-file-list>
     <servlet>
      	<servlet-name>springmvc</servlet-name>
      	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      <!-- 初始化参数 -->
      <init-param>
      	<param-name>contextConfigLocation</param-name>
      	<param-value>classpath:springmvc.xml</param-value>
      </init-param>
        <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
     	<servlet-name>springmvc</servlet-name>
     	<url-pattern>*.action</url-pattern>
     </servlet-mapping>
      <context-param>
     		<param-name>contextConfigLocation</param-name>
    		<param-value>classpath:spring/applicationContext-*.xml</param-value>
     </context-param>
      <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
      </listener>
    </web-app>

    以上变为文件上传和下载的全部代码,博主亲测过,没有问题。

    展开全文
  • java常见3种文件上传方式

    万次阅读 热门讨论 2018-05-08 19:31:14
    转:https://www.cnblogs.com/Sunne/p/8086178.html在java里面文件上传的方式很多,最简单的依然是FileInputStream、FileOutputStream了,在这里我列举3种常见的文件...首先呢,使用springMVC原生上传文件方法,需要...

    转:https://www.cnblogs.com/Sunne/p/8086178.html

    在java里面文件上传的方式很多,最简单的依然是FileInputStream、FileOutputStream了,在这里我列举3种常见的文件上传方法代码,并比较他们的上传速度(由于代码是在本地测试,所以忽略网速的影响)

    还是老规矩,大神请绕一下,里屋说话。

    首先呢,使用springMVC原生上传文件方法,需要一些简单的配置,不多说,上图。

    1.采用spring提供的上传文件的方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    @RequestMapping("springUpload")
        public String  springUpload(HttpServletRequest request) throws IllegalStateException, IOException
        {
             long  startTime=System.currentTimeMillis();
             //将当前上下文初始化给  CommonsMutipartResolver (多部分解析器)
            CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
                    request.getSession().getServletContext());
            //检查form中是否有enctype="multipart/form-data"
            if(multipartResolver.isMultipart(request))
            {
                //将request变成多部分request
                MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
               //获取multiRequest 中所有的文件名
                Iterator iter=multiRequest.getFileNames();
                  
                while(iter.hasNext())
                {
                     
                    //一次遍历所有文件
                    MultipartFile file=multiRequest.getFile(iter.next().toString());
                    if(file!=null)
                    {
                        String path="E:/springUpload"+file.getOriginalFilename();
                        //上传
                        file.transferTo(new File(path));
                    }
                      
                }
                
            }
            long  endTime=System.currentTimeMillis();
            System.out.println("Spring方法的运行时间:"+String.valueOf(endTime-startTime)+"ms");
            return "/success"
        }

      在这里故意加一个计时,待会就用它简单的比较上传时间问题(本人暂时还没能力处理资源占用问题,所以这里也不做比较)

    2.第二位选手,采用file.Transto 来保存上传的文件,这是目前我认为最好的上传方式,也是我最喜欢的上传方式,代码简单,速度快。请看下面代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /*
         * 采用file.Transto 来保存上传的文件
         */
        @RequestMapping("fileUpload2")
        public String  fileUpload2(@RequestParam("file") CommonsMultipartFile file) throws IOException {
             long  startTime=System.currentTimeMillis();
            System.out.println("fileName:"+file.getOriginalFilename());
            String path="E:/"+new Date().getTime()+file.getOriginalFilename();
              
            File newFile=new File(path);
            //通过CommonsMultipartFile的方法直接写文件(注意这个时候)
            file.transferTo(newFile);
            long  endTime=System.currentTimeMillis();
            System.out.println("采用file.Transto的运行时间:"+String.valueOf(endTime-startTime)+"ms");
            return "/success"
        }

      3.第三种采用流的方式上传,这种方法在新手学习的时候经常用到,但是我并不喜欢,因为它又慢又难写,请看

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    @RequestMapping("fileUpload")
        public String  fileUpload(@RequestParam("file") CommonsMultipartFile file) throws IOException {
              
            //用来检测程序运行时间
            long  startTime=System.currentTimeMillis();
            System.out.println("fileName:"+file.getOriginalFilename());
              
            try {
                //获取输出流
                OutputStream os=new FileOutputStream("E:/"+new Date().getTime()+file.getOriginalFilename());
                //获取输入流 CommonsMultipartFile 中可以直接得到文件的流
                InputStream is=file.getInputStream();
                byte[] bts = new byte[1024];
                //一个一个字节的读取并写入
                while(is.read(bts)!=-1)
                {
                    os.write(bts);
                }
               os.flush();
               os.close();
               is.close();
              
            catch (FileNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            long  endTime=System.currentTimeMillis();
            System.out.println("采用流上传的方式的运行时间:"+String.valueOf(endTime-startTime)+"ms");
            return "/success"
        }

      方法写好了,接下来,我们在本地做个简单的评测,

      1.写个简单的文件上传页面

        

      2.分别选择同一个文件,稍微大一点(我这里上传的zookeeper3.3.6的安装包,大小为11M),以区别处他们的耗时差异(最好不实用ie,很容易崩溃,亲测)

      

      3.统计耗时,请看下图,结果一目了然。

     

     在此补充说明一点,如果你认为采用流的方式上传慢是因为我这里内存开辟小了,可以尝试开大一点,但是依然不影响他的速度最慢的地位,如果内存开的过大,反倒影响速度。

    以上内容仅供学习,如果有需要源码的,请联系我。


    展开全文
  • js 实现上传文件

    万次阅读 2019-05-10 14:27:37
    参考一: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-...

    参考一:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #progress{
                height:10px;
                width:500px;
                border: 1px solid gold;
                position: relative;
                border-radius: 5px;
            }
            #progress .progress-item{
                height:100%;
                position: absolute;
                left:0;
                top:0;
                background: chartreuse;
                border-radius: 5px;
                transition: width .3s linear;
            }
        </style>
    </head>
    <body>
    文件上传框<br>
    <input type="file" id="file"><br>
    显示进度条<br>
    <div id="progress">
        <div class="progress-item"></div>
    </div>
    上传成功后的返回内容<br>
    <span id="callback"></span>
    </body>
    <script>
        //首先监听input框的变动,选中一个新的文件会触发change事件
        document.querySelector("#file").addEventListener("change",function () {
            //获取到选中的文件
            var file = document.querySelector("#file").files[0];
            //创建formdata对象
            var formdata = new FormData();
            formdata.append("file",file);
            //创建xhr,使用ajax进行文件上传
            var xhr = new XMLHttpRequest();
            xhr.open("post","/");
            //回调
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4 && xhr.status==200){
                    document.querySelector("#callback").innerText = xhr.responseText;
                }
            }
            //获取上传的进度
            xhr.upload.onprogress = function (event) {
                if(event.lengthComputable){
                    var percent = event.loaded/event.total *100;
                    document.querySelector("#progress .progress-item").style.width = percent+"%";
                }
            }
            //将formdata上传
            xhr.send(formdata);
        });
    </script>
    </html>

    参考二:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>XMLHttpRequest上传文件</title>

    <script type="text/javascript">

    //图片上传

    var xhr;

    //上传文件方法

    function UpladFile() {

    var fileObj = document.getElementById("file").files[0]; // js 获取文件对象

    // CFF 上传的接口失败了。为啥?!

    var url = "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址

    var form = new FormData(); // FormData 对象

    form.append("file", fileObj); // 文件对象

    xhr = new XMLHttpRequest(); // XMLHttpRequest 对象

    xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。

    xhr.onload = uploadComplete; //请求完成

    xhr.onerror = uploadFailed; //请求失败

    xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】

    xhr.upload.onloadstart = function(){//上传开始执行方法

    ot = new Date().getTime(); //设置上传开始时间

    oloaded = 0;//设置上传开始时,以上传的文件大小为0

    };

    xhr.send(form); //开始上传,发送form数据

    }

    //上传成功响应

    function uploadComplete(evt) {

    //服务断接收完文件返回的结果

    var data = JSON.parse(evt.target.responseText);

    if(data.success) {

    alert("上传成功!");

    }else{

    alert("上传失败!");

    }

    }

    //上传失败

    function uploadFailed(evt) {

    alert("上传失败!");

    }

    //取消上传

    function cancleUploadFile(){

    xhr.abort();

    }

    //上传进度实现方法,上传过程中会频繁调用该方法

    function progressFunction(evt) {

    var progressBar = document.getElementById("progressBar");

    var percentageDiv = document.getElementById("percentage");

    // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0

    if (evt.lengthComputable) {//

    progressBar.max = evt.total;

    progressBar.value = evt.loaded;

    percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";

    }

    var time = document.getElementById("time");

    var nt = new Date().getTime();//获取当前时间

    var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差,单位为s

    ot = new Date().getTime(); //重新赋值时间,用于下次计算

    var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b

    oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算

    //上传速度计算

    var speed = perload/pertime;//单位b/s

    var bspeed = speed;

    var units = 'b/s';//单位名称

    if(speed/1024>1){

    speed = speed/1024;

    units = 'k/s';

    }

    if(speed/1024>1){

    speed = speed/1024;

    units = 'M/s';

    }

    speed = speed.toFixed(1);

    //剩余时间

    var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);

    time.innerHTML = ',速度:'+speed+units+',剩余时间:'+resttime+'s';

    if(bspeed==0) time.innerHTML = '上传已取消';

    }

    </script>

    </head>

    <body>

    <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>

    <span id="percentage"></span><span id="time"></span>

    <br /><br />

    <input type="file" id="file" name="myfile" />

    <input type="button" οnclick="UpladFile()" value="上传" />

    <input type="button" οnclick="cancleUploadFile()" value="取消" />

    </body>

    </html>


    参考三:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>XMLHttpRequest上传文件</title>

    <script type="text/javascript">

    function uploadPic() {

    var form = document.getElementById('upload'),

    formData = new FormData(form);

    $.ajax({

    url:"https://sscpre.boe.com/v1/medical-console/medical/file/upload",

    type:"post",

    data:formData,

    processData:false,

    contentType:false,

    success:function(res){

    if(res){

    alert("上传成功!");

    }

    console.log(res);

    $("#pic").val("");

    $(".showUrl").html(res);

    $(".showPic").attr("src",res);

    },

    error:function(err){

    alert("网络连接失败,稍后重试",err);

    }

    })

    };

    </script>

    </head>

    <body>

    <form id="upload" enctype="multipart/form-data" method="post">

    <input type="file" name="file" id="pic"/>

    <input type="button" value="提交" οnclick="uploadPic();"/>

    <span class="showUrl"></span>

    <img src="" class="showPic" alt="">

    </form>

    </body>

    </html>

     

    阮一峰 文件上传:

    https://www.liaoxuefeng.com/wiki/1022910821149312/1023022494381696

     

     

     

    展开全文
  • java后台发起上传文件的post请求(http和https)

    万次阅读 多人点赞 2019-07-31 19:11:04
    对于文件上传,客户端通常就是页面,在页面里实现上传文件不是什么难事,写个form,加上enctype="multipart/form-data",在写个接收的就可以了,没什么难的。如: <!DOCTYPEhtml> <html> <head> ...
  • layui的文件上传功能相对来说做的不是很完善,很多需求可能需要自己去实现,就像常见的文件手动上传时,对于选中的文件进行删除重新选择,这个就需要自己去现实,这里用上传图片做一个简单示例。 HTML代码: <div...
  • 一、添加页面 添加页面代码 <div class="layui-form-item-row" style="margin-top: 10px;"> <div class="layui-col-xs10 layui-col-sm2 layui-col-md2" >...label class="lay...
  • 前端代码: 后端代码: 源码地址:链接:https://pan.baidu.com/s/1FhUG2wAd6-Kpkt-EDHjtBw 提取码:hlmp 注:此源码还整合了layui的后台管理系统模板和freemark模板引擎。
  • layui 多文件上传 预览图 动态删除

    千次阅读 2020-02-01 15:08:39
    源码 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head lang="en"> <meta charset="utf-8"> <title>layui<...meta name="renderer" co...
  • layui上传文件最全版

    2019-12-13 09:51:24
    layui上传文件最全版 前几天做一个文件上传功能,结合layui看了看文档总结出来一份给大家分享一下。你需要引入layui的ui包,这里就不在叙述了。 html: <div class="layuimini-container"> <div class=...
  • java web文件上传——FileUpload

    万次阅读 多人点赞 2018-08-31 17:03:30
    文件上传分析 1.普通表单提交默认enctype="application/x-www-form-urlencoded";但是当表单中存在文件类型时,需要设置enctype="multipart/form-data",它不对字符进行编码,用于发送二进制的...
  • 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个...
  • javaweb文件上传与下载

    万次阅读 热门讨论 2018-08-24 14:14:53
    二是在Servlet中读取上传文件的数据,并保存到本地硬盘中。 上传大多数情况是通过表单的形式提交给服务器,使用&lt;input type="file"&gt;标签。 使用&lt;input type="file"&...
  • curl 模拟 GET\POST 请求,以及 curl post 上传文件

    万次阅读 多人点赞 2018-06-15 11:41:45
    curl 模拟 GET\POST 请求,以及 curl post 上传文件 一般情况下,我们调试数据接口,都会使用一个 postman 的工具,但是这个工具还是有点大了。事实上,我们在调试一些小功能的时候,完全没有必要使用它。在命令行...
  • Bootstrap File Input,最好用的文件上传组件

    万次阅读 多人点赞 2016-01-29 16:33:22
    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。
  • 先编写上传文件帮助类,如果需要区分文件类型,可以将文件后缀截取进行判断; springmvc-mvc.xml配置,这里主要配置springmvc解析器CommonsMultipartResolver等等,这里主要是配置文件上传解析器,下面是配置文件...
  • 上一篇 写给大忙人看的 - 搭建文件服务器 MinIO(一),我们已经成功地搭建了 MinIO 文件服务器,这一篇讲解在 Java 中如何上传文件至 MinIO 一、开发前戏 1、项目中引入 maven 依赖 <!-- minio 相关依赖 --> ...
  • Spring Boot教程(十三):Spring Boot文件上传

    万次阅读 多人点赞 2018-05-15 15:55:31
    一、创建一个简单的包含WEB依赖的SpringBoot项目 pom.xml内容: &lt;!-- Spring Boot web启动器 --&gt; &lt;dependency&gt; &lt;groupId&...spring-boot-starter-...
  • Postman Post请求上传文件

    万次阅读 多人点赞 2018-06-01 14:36:48
    Postman Post请求上传文件一、选择post请求方式二、填写HeadersKey:Content-TypeValue:multipart/form-data[{"key":"Content-Type","value":"multipart/form-data","...
  • Hadoop上传文件到hdfs中

    万次阅读 2018-08-27 00:02:31
    hdfs dfs -copyFromLocal /local/data /hdfs/data:将本地文件上传到 hdfs 上(原路径只能是一个文件) hdfs dfs -put /tmp/ /hdfs/ :和 copyFromLocal 区别是,put 原路径可以是文件夹等 hadoop fs -ls / :查看...
1 2 3 4 5 ... 20
收藏数 1,068,946
精华内容 427,578
关键字:

上传文件