图片上传---整理总结

以‘陕钢电商’项目的注册页面做Demo：

值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才会认识并正确执行，用<input type="file">来选择本地文件

‘营业执照’上传图片：

<form autocomplete="off" id="regUser" method="post" enctype="multipart/form-data">

     <li><span><i>*</i>营业执照：</span><input class="input" type="file" id="license" value="营业执照" name="license" /></li>

</form> 

校验图片上传的格式校验：

           var reg = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/;
           if((!reg.test(license)) || (tax && !reg.test(tax)) || (org && !reg.test(org))){
                       asyncbox.alert("请检查上传图片格式","提示");  
                        return false;              
          }          

        var license = $('#license').val();

        if(!license){
                 asyncbox.alert("请上传营业执照图片","提示");
                 return false;
        }

********************************第二种上传方式*****************************************************************************

具体代码：

显示“上传”按钮代码：

      <tr>
        <td width="30%" align="right">上传凭证：</td>
        <td width="70%">
          <input type="button" value='上传' id='btnUploadFile' name='btnUploadFile' class="sous-con" />
          <input type="hidden" id='fileName' name='fileName' value="" />
        </td>
      </tr>    

JS代码：

    $(function(){  //页面加载完之后自动执行此操作;
        var btnFile = document.getElementById("btnUploadFile");  //获取id='btnUploadFile'的对象(是一个button对象);
        if(btnFile != undefined){
            AjxUploadFile(btnFile); // 给上传按钮绑定'图片上传'AjxUploadFile事件;
        }
    })

AjxUploadFile方法相关代码：

function AjxUploadFile(obj){  // obj代表的是btnFile button上传按钮   【上传到服务器】
        var button = obj;  
        new AjaxUpload(button, {  
            action: 'complain_action.jsp?act=4',  
            data: {},  
            name: 'myfile',  
            onSubmit: function(file, ext) {   //提交之前校验图片格式       file：文件名;   ext：拓展名         
                if (!(ext && /^(jpg|png)$/.test(ext))) {  
                    alert("您上传的图片格式不对，请重新选择！");  
                    return false;  
                }  
            },  
            onComplete: function(file, response) {          // file：文件名;  response：返回值 （上传到服务器之后的返回值）
                    var msg = response.toString();   // 把返回值转换成toString类型
                    if(msg != ''){
                        imgList.push(msg);       //把选中的图片推送至服务器(上传至服务器)
                        // 每上传一个图片, 就显示一行'预览'和'删除'记录
                        var str = '<li class="list_li">'+msg+'<a href="#" onclick="show(this)">预览</a>  <a href="#" onclick="delFile(this)">删除</a></li>';
                        $('#list_ul').append(str);     //上传多张图片时, 在后面追加添加的记录;          
                    }else if(msg == 0){                     
                        msgBox(msg); 
                    }                            
            }  
        });  
    }

    等等更多代码详见陕钢电商项目---admin/sys/complain

 

********************************刘凯教的图片上传*****************************************************************************

使用form表单携带文件流到后台，后台进行存储，使用post方法；

表单form enctype=“multipart/form-data”

流：按方向分为输入流和输出流；按类型分为字节流和字符流；流是一种类型的传输方式。

上传：就是将文件变成流文件，服务器接收到流文件，把流文件保存(输出到硬盘)

要用到两个包：一个上传jar包；一个输入输出流的jar

upload.jsp页面：

public class upload extends HttpServlet {

    // 上传文件存储目录
    private static final String UPLOAD_DIRECTORY = "D:/upload/";

    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("我是POST请求");
        doGet(req,resp);
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("我是GET请求");
        // 检测是否为多媒体上传
        if (!ServletFileUpload.isMultipartContent(req)) {
            PrintWriter writer = resp.getWriter();
            writer.println("Error: 表单必须包含 enctype=multipart/form-data");
            writer.flush();
            return;
        }
        // 这是一个高水平的磁盘处理工厂工具API
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
        factory.setSizeThreshold(1024 * 1024 * 3);
        // 设置临时存储目录
        factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
        //这是IOjar包里提供的文件上传工具
        ServletFileUpload upload = new ServletFileUpload(factory);

        // 设置最大文件上传值  40M
        upload.setFileSizeMax(1024 * 1024 * 40);
        // 设置最大请求值 (包含文件和表单数据)   50M
        upload.setSizeMax(1024 * 1024 * 50);
        // 中文处理
        upload.setHeaderEncoding("UTF-8");

        // 构建文件上传保存的路径  如果不存在则创建文件夹
        File uploadDir = new File(UPLOAD_DIRECTORY);
        if (!uploadDir.exists()) {
            uploadDir.mkdir();
        }

        try {
            // 解析请求的内容提取文件数据
            @SuppressWarnings("unchecked")
                    //获取用户请求体中的流文件列表
            List<FileItem> formItems = upload.parseRequest(req);
            if (formItems != null && formItems.size() > 0) {
                // 迭代表单数据
                for (FileItem item : formItems) {
                    // 处理特殊表单类型
                    if (!item.isFormField()) {
                        String fileName = new File(item.getName()).getName();
                        String filePath = UPLOAD_DIRECTORY + File.separator + fileName;
                        File storeFile = new File(filePath);
                        // 在控制台输出文件的上传路径
                        System.out.println(filePath);
                        // 保存文件到硬盘
                        item.write(storeFile);
                    }
                }
            }
        } catch (Exception ex) {
            ex.printStackTrace();
            PrintWriter writer = resp.getWriter();
            writer.println("error：upload fail");
            writer.flush();
        }
        PrintWriter writer = resp.getWriter();
        writer.println("success upload");
        writer.flush();
        return;

    }
}

index.jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>文件上传</title>
</head>
<body>
  <form method="post" action="/upload/UploadServlet" enctype="multipart/form-data">
    文件:
    <input type="file" name="uploadFile" />
    <br/><br/>
    <input type="submit" value="上传" />
  </form>
</body>
</html>

web.xml页面：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
   
    <servlet>
        <servlet-name>upload</servlet-name>
        <servlet-class>temp.upload</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>upload</servlet-name>
        <url-pattern>/upload/UploadServlet</url-pattern>
    </servlet-mapping>
</web-app>

补充拓展：单继承多实现 。