文件上传

通过浏览器向服务器上传文件，这里介绍两种方法，普通的form表单提交和AJAX请求上传文件。

前端代码:

<form action="uploadingFile" method="post" enctype="multipart/form-data" id="FileForm">
     上传文件：<input type="file" name="myFile" id="fileInput"><span id="span1">${msg1}</span><br>
  <input type="submit" value="提交">
</form>

这里要注意在form标签添加enctype=“multipart/form-data”属性，提交方式必须是post请求。

form表单提交就直接点提交按钮，下面是通过AJAX请求提交文件的方法，这里用到JQuery的AJAX请求，原生js也可以.

$("#fileInput").change(function(){    //给文件上传的input元素添加change事件监听，当选择玩文件时就将文件提交
    var data = new ForData($("#fileForm")[0]);   //将form表单的数据封装
    $.ajax({                     //AJAX请求
        type:"post",              //请求方式  这里必须是post请求
        url:"uploadingFile",       //请求地址
        data:data,               //提交的数据
        cache:false,
        processData:false,
        contentType:false,
        success:function(msg){   //上传成功后执行  msg是服务器返回的数据
             //处理msg的数据
        }
    })
});

服务器接收并保存文件：保存文件时注意向服务器保存文件通过绝对路径，但是在通过服务器访问问件时需要通过相对路径，所以最终要把文件的相对路径保存或返回。

第一种通过原生的servlet的服务器接收文件的方法：

servlet

@WebServlet("/uploadingFile")
@MultipartConfig    //必须添加该注解配置多部分上传
public class myServlet extends HttpServlet{
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收文件
        Part part = req.getPart("myFile");
        //获取服务器保存文件的地址的绝对路径
		String path=req.getServletContext().getRealPath("imgages");
        //写方法保存文件 并返回保存后文件的相对路径
		fileName = saveFile(part,path);
        //将文件相对路径交给前端   前端可通过给路径从服务器获取文件
        req.setAttribute("fileSrc",fileName);
        req.getRequestDispatcher("show.html").forward(req, resp);
    }
}

封装一个保存文件的方法：
public static String saveFile(Part part,String path){
    //处理字符串获取到文件名
    String content=part.getHeader("content-disposition");
		String         filename=content.substring(content.lastIndexOf("=\"")+2,content.lastIndexOf("\""));	
        //文件保存的相对路径
		String newFile="imgages/"+filename;	
        //文件保存地址的绝对路径	
		File file=new File(path);
		if (!file.exists()) {
			file.mkdir();
		}
        //最终保存文件地址
		filename=path+File.separatorChar+filename;
		try {
            //将文件写到保存的地址
			part.write(filename);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return newFile;
}

这里需要通过Part类型来接收文件，通过part对象还可以获取更多的文件信息：

part.getContentType()   获取文件的类型

part.getSize()  获取文件的大小

String content = part.getHeader("content-disposition")  获取数据头信息通过处理可得到文件名

 

下面介绍一下springmvc框架的服务器接收并保存文件：

首先需要导入两个处理文件的jar包  commons-fileupload.jar    commons-io.jsr

然后在springmvc的配置文件中配置一个bean

<!--文件上传配置-->
<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 设置上传文件的最大大小 -->
    <property name="maxUploadSize">
        <value>1048576</value>
    </property>
</bean>

最后写一个接收文件的controller

@Controller
public class myController {
    @RequestMapping("/uploadingFile")
    @ResponseBody   //通过AJAX请求时添加给注解 
    public String uploadingFile(MultipartFile myFile,HttpServletRequest request){
        //通过MultipartFile类型来接收文件
        String path = request.getServletContext().getRealPath("imgages"); //获取保存地址的绝对路径
        String fileName = myFile.getOriginalFileName();  //获取文件名
        File destFile = new File(path+File.separatorChar+fileName); //文件最终保存的路径
        InputStream in = myFile.getInputStream();  //获取接收文件的输入流
         if(!destFile.exists()) {
            FileUtils.copyInputStreamToFile(input, destFile);//将文件copy到指定路径
        }
        return "imgages/"+fileName;    //返回文件的相对路径
    }
}

在这里通过MultipartFile类型变量接收文件  通过MultipartFile对象可获取文件更多信息

getContentType();  获取文件格式

getSize();获取文件的大小