前端js上传文件 到后端接收文件

下面是前端js代码:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
    <title>File upload</title>
</head>
<body>
<!--  // action="fileupload"对应web.xml中<servlet-mapping>中<url-pattern>的设置. -->
    <form name="myform" action="fileupload" method="post"
       enctype="multipart/form-data">
       File:<br>
       <input type="file" name="myfile"><br>
       <br>
       <input type="submit" name="submit" value="Commit">
    </form>
</body>
</html>

下面是后端的java代码:

package com.zj.sample;

import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * Servlet implementation class Upload
 */
@WebServlet("/Upload")
public class Upload extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private String uploadPath = "D:\\temp"; // 上传文件的目录
    private String tempPath = "d:\\temp\\buffer\\"; // 临时文件目录
    File tempPathFile;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Upload() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    @SuppressWarnings("unchecked")
    public void doPost(HttpServletRequest request, HttpServletResponse response)
           throws IOException, ServletException {
       try {
           // Create a factory for disk-based file items
           DiskFileItemFactory factory = new DiskFileItemFactory();

           // Set factory constraints
           factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb
           factory.setRepository(tempPathFile);// 设置缓冲区目录

           // Create a new file upload handler
           ServletFileUpload upload = new ServletFileUpload(factory);

           // Set overall request size constraint
           upload.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB

           List<FileItem> items = upload.parseRequest(request);// 得到所有的文件
           Iterator<FileItem> i = items.iterator();
           while (i.hasNext()) {
              FileItem fi = (FileItem) i.next();
              String fileName = fi.getName();
              if (fileName != null) {
                  File fullFile = new File(fi.getName());
                  File savedFile = new File(uploadPath, fullFile.getName());
                  fi.write(savedFile);
              }
           }
           System.out.print("upload succeed");
       } catch (Exception e) {
           // 可以跳转出错页面
           e.printStackTrace();
       }
    }
    public void init() throws ServletException {
        File uploadFile = new File(uploadPath);
        if (!uploadFile.exists()) {
            uploadFile.mkdirs();
        }
        File tempPathFile = new File(tempPath);
         if (!tempPathFile.exists()) {
            tempPathFile.mkdirs();
        }
     }
}

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>tom2</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>Upload</servlet-name>
    <servlet-class>com.zj.sample.Upload</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Upload</servlet-name>
    <url-pattern>/home/fileupload</url-pattern>
  </servlet-mapping>
</web-app>

文件结构:

时间: 2024-10-23 19:41:58

前端js上传文件 到后端接收文件的相关文章

前端js上传文件后端C#接收文件

本文粗略的讲下前端文件上传和后端文件接收的原理 前端代码 html <form onsubmit="uploadFile(event)"> <input type="file" /> <button type="submit">文件上传</button> </form> js function uploadFile(event) { var files = event.target[0]

Jquery AjaxFileUpload.js 上传文件 所遇问题解决办法

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">导入 AjaxFileUpload.js 文件</span> js代码 $.ajaxFileUpload({ url: 'upload',//处理图片脚本 secureuri : false, fileElementId : 'uploadImg',//file控件id da

js 上传文件后缀名的判断 var flag=false;应用

js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

原生js上传文件 显示进度条

最近在做文件上传的功能,因为界面设计比较简单,就没有引用jq,但是网上大部分的上传插件都需要jq的支持.为了一个上传功能引用90多k的jq文件有点太小题大做了,所以就自己动手写了一个原生js上传的demo.下面是代码: HTML代码 <html> <head> <title></title> </head> <body> <input type="file" id="f" /> &l

js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '&qu

Node.js上传文件

var formidable = require('formidable'); var util = require('util'); exports.upload = function(req,res){ var form = new formidable.IncomingForm(); form.encoding = 'utf-8'; form.uploadDir = "E:/file/upload";//目录需要已存在 /** * fields 表单中的其他属性 * files

百度Fex webuploader.js上传大文件失败

项目上用百度webuploader.js上传文件,option选项里面已经设置单个文件大小,但是上传低于此阈值的文件时仍然不成功. 我现在的理解是,框架是将文件post到后台服务器端的.. 百度发现是IIS里面对大文件有限制.. <system.webServer> <validation validateIntegratedModeConfiguration="false" /> <modules runAllManagedModulesForAllRe

js上传Excel文件

一.问题 需要在项目里添加一个上传excel文件的功能,因为其他同样的后台里面有上传文件的功能,第一反应就是想着直接用.了解了一下发现它是利用bootstrap的fileinput实现的,但是我怎么都不能把fileinput插件给加到java的项目里,然后就只能自己用js实现吧.好像也没什么特别的需求. 1)原本的样式不好看,需要和项目一致 2)只上传xls和xlxs的文件 二.代码 <input type="file" id="file" name=&quo

JS 上传文件 Uploadify 网址及 v3.2.1 参数说明

http://www.uploadify.com/ 一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 . buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路径 . buttonText ‘SELECT FILES’ 浏览按钮的文本. checkExisting false 文件上传重复性检查程序,检查即将上传的