java多图片上传功能的实现

来源：互联网发布：数据流量怎么打开不了编辑：程序博客网时间：2024/04/30 18:32

开发环境：jdk1.7，MyEclipse10
框架用的是spring。用到了maven工具（maven的包百度下就可以）。

四步完成，全部复制改参数就可以

第一步：先在Spring中对图片进行限制

<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->        <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">                <property name="defaultEncoding" value="UTF-8"/> <!-- 指定所上传文件的总大小不能超过500KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和。这个的大小是以字节为单位的，要多大自己算好了再设置-->            <property name="maxUploadSize" value="500000"/>            <!-- 最大内存大小 (10240)-->            <property name="maxInMemorySize" value="40960" />        </bean>

第二步：写jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>上传图片</title></head><body>    <form action="filesUpload" method="POST" name="xiangmu" id="xiangmu"        enctype="multipart/form-data">        <table>            <tr>                <td>身份证图片上传：</td>                <td><input type=file name="myfiles" id="doc"                    onchange="showImage();">                </td>                <div id="localImag">                    <img id="preview" width=-1 height=-1 style="diplay:none" />                </div>            </tr>            <tr>                <td>公司运营情况:</td>                <!-- 为了实现张图片上传，上传框这个name要都一样 -->                <td><input type="file" name="myfiles" id="doc1"></td>                <td>                                    </td>            </tr>            <tr>                <td><input type="submit" value="提交" />                </td>            </tr>        </table>    </form></body></html>

注意：
多图上传，上传框的name要都一样，等于发送了一个MultipartFile[]数组。
不仅支持上传图片，还支持多文件上传。
form的enctype=”multipart/form-data”，这个是上传文件必须的。

第三步：如果你要实现页面展现图片的功能，就在jsp页面添加下面的方法：

<script type="text/javascript">    function showImage() {        var docObj = document.getElementById("doc");        var imgObjPreview = document.getElementById("preview");        if (docObj.files && docObj.files[0]) {            //火狐下，直接设img属性              imgObjPreview.style.display = 'block';            imgObjPreview.style.width = '300px';            imgObjPreview.style.height = '120px';            //imgObjPreview.src = docObj.files[0].getAsDataURL();              //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式              imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);        } else {            //IE下，使用滤镜              docObj.select();            var imgSrc = document.selection.createRange().text;            var localImagId = document.getElementById("localImag");            //必须设置初始大小              localImagId.style.width = "250px";            localImagId.style.height = "200px";            //图片异常的捕捉，防止用户修改后缀来伪造图片             try {                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                localImagId.filters                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;            } catch (e) {                alert("您上传的图片格式不正确，请重新选择!");                return false;            }            imgObjPreview.style.display = 'none';            document.selection.empty();        }        return true;    }</script>

注意：这个方法只能上传一张来显示，除非你设置多个div。或者：展示多个图片可以找找其他方法。

第四步：后台接收

@RequestMapping("/filesUpload")    //requestParam要写才知道是前台的那个数组    public String filesUpload(@RequestParam("myfiles") MultipartFile[] files,            HttpServletRequest request) {        List<String> list = new ArrayList<String>();        if (files != null && files.length > 0) {            for (int i = 0; i < files.length; i++) {                MultipartFile file = files[i];                // 保存文件                list = saveFile(request, file, list);            }        }        //写着测试，删了就可以        for (int i = 0; i < list.size(); i++) {            System.out.println("集合里面的数据" + list.get(i));        }        return "index";//跳转的页面    }    private List<String> saveFile(HttpServletRequest request,            MultipartFile file, List<String> list) {        // 判断文件是否为空        if (!file.isEmpty()) {            try {                // 保存的文件路径(如果用的是Tomcat服务器，文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中                // )                String filePath = request.getSession().getServletContext()                        .getRealPath("/")                        + "upload/" + file.getOriginalFilename();                list.add(file.getOriginalFilename());                File saveDir = new File(filePath);                if (!saveDir.getParentFile().exists())                    saveDir.getParentFile().mkdirs();                // 转存文件                file.transferTo(saveDir);                return list;            } catch (Exception e) {                e.printStackTrace();            }        }        return list;    }

注意：upload是文件夹，自己新建下再运行，免得出错。

结束，全部复制就可以实现了。

0 1