java jsp页面上传图片

简单java jsp页面上传图片

实现以下表单提交：

jsp页面代码

form 表单提交内容，需要设置编码格式为 enctype=”multipart/form-data” ，是将文件以二进制的形式上传，可以实现多种类型的文件上传

<form class="form form-horizontal" id="form-admin-add" action="reviewsave.action" method="post" onsubmit="return validate();"  enctype="multipart/form-data">

    <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
            <tr class="text-c">
                <th width="60">车主姓名</th>
                    <td><input type="text" class="input-text"   id="driver_name" name="rbean.driver_name"></td>
                <th  width="60" colspan="2">车牌号码</th>
                     <td><input type="text" class="input-text"   id="car_no" name="rbean.car_no"></td>
                <th  width="60" colspan="2">圆牌号码</th>
                    <td><input type="text" class="input-text"   id="round_card" name="rbean.round_card"></td>
            </tr>

            <tr class="text-c">
               <th>车主电话</th>
                    <td colspan="3"><input type="text" class="input-text"   id="driver_tell" name="rbean.driver_tell"></td>
                <th >备用电话</th>
                     <td colspan="3"><input type="text" class="input-text"   id="driver_phone" name="rbean.driver_phone"></td>
            </tr>

            <tr class="text-c">
               <th>驾照</th>
                    <td colspan="3"><input type="text" class="input-text"   id="driver_licence" name="rbean.driver_licence"></td>
                <th >行驶证</th>
                     <td colspan="3"><input type="text" class="input-text"   id="driver_permit" name="rbean.driver_permit"></td>
            </tr>

            <tr class="text-c">
               <th>承包人</th>
                    <td colspan="3"><input type="text" class="input-text"   id="driver_name1" name="rbean.driver_name1"></td>
                <th >电话</th>
                     <td colspan="3"><input type="text" class="input-text"   id="driver_tell1" name="rbean.driver_tell1"></td>
            </tr>
            <tr class="text-c">
               <th>承包人1</th>
                    <td colspan="3"><input type="text" class="input-text"   id="driver_name2" name="rbean.driver_name2"></td>
                <th >电话</th>
                     <td colspan="3"><input type="text" class="input-text"   id="driver_tell2" name="rbean.driver_tell2"></td>
            </tr>
            <tr class="text-c">
               <th>承包人2</th>
                    <td colspan="3"><input type="text" class="input-text"   id="driver_name3" name="rbean.driver_name3"></td>
                <th >电话</th>
                     <td colspan="3"><input type="text" class="input-text"   id="driver_tell3" name="rbean.driver_tell3"></td>
            </tr>
            <tr class="text-c">
               <th>承包人3</th>
                    <td colspan="3"><input type="text" class="input-text"   id="driver_name4" name="rbean.driver_name4"></td>
                <th >电话</th>
                     <td colspan="3"><input type="text" class="input-text"   id="driver_tell4" name="rbean.driver_tell4"></td>
            </tr>

            <tr class="text-c">
               <th>备注</th>
                    <td colspan="3"><textarea   class="input-textmu"   id="driver_marks" name="rbean.driver_marks" ></textarea></td>
                <th>车主照片</th>
                    <td colspan="4"> <input type="file" name="image" id="image" onchange="preImg(this.id,'ImgPr');" />  
                                      <img id="ImgPr" src="" width="80px" height="80px" style="display: block;" />

                    </td>
            </tr>
        </table>

    <div class="row cl">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3" >
            <input class="btn btn-primary radius" type="submit"  name="Submit" class="common_button"  value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
        </div>
    </div>

    </form>
    //javascript   显示选择图片内容
    <script type="text/javascript">


    function getFileUrl(sourceId) {
    var url;
    if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
    url = document.getElementById(sourceId).value;
    } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    }
    return url;
    } 

    /**
    * 将本地图片 显示到浏览器上
    */
    function preImg(sourceId, targetId) {
    var url = getFileUrl(sourceId);
    var imgPre = document.getElementById(targetId);
    imgPre.src = url;
    } 


    </script>

后台代码

private File image; //上传的文件
    private String imageFileName; //文件名称
    private String imageContentType; //文件类型

    public File getImage() {
        return image;
    }
    public void setImage(File image) {
        this.image = image;
    }
    public String getImageFileName() {
        return imageFileName;
    }
    public void setImageFileName(String imageFileName) {
        this.imageFileName = imageFileName;
    }
    public String getImageContentType() {
        return imageContentType;
    }
    public void setImageContentType(String imageContentType) {
        this.imageContentType = imageContentType;
    }

             public static String createImageName() {
            //根据时间生成文件名
            SimpleDateFormat sdf = new SimpleDateFormat("yyMMddHHmmss");
            String fileName = sdf.format(new Date());

            //加上随机数，防止重复
            Random rand = new Random();
            fileName += String.valueOf(rand.nextInt(100));

            return fileName;
            }

     public String addreview() throws Exception {
        getResponse().setContentType("text/html;charset=utf-8");
        //设置上传文件地址
         String realpath = ServletActionContext.getServletContext().getRealPath("/driverImages");
         //上传文件重新命名
         String fileName = createImageName() +"."+getImageContentType().substring(getImageContentType().lastIndexOf("/")+1,getImageContentType().length());
        //将页面传递的参数放在bean中
        DriverBean dbean=new DriverBean();
        // bean 和文件名  通过sql 存入数据库
        int li_return = getRmanager().addreview(rbean,fileName);

        if (li_return <= 0) 
        {
            return "sorry";
        }
        //判断图片文件是否为空
        if (image != null) {
        //文件夹是否存在
            File savefile = new File(new File(realpath ), fileName);
            if (!savefile.getParentFile().exists()){
                savefile.getParentFile().mkdirs();
                FileUtils.copyFile(image, savefile);
            }else{
                FileUtils.copyFile(image, savefile);
            }   

         ActionContext.getContext().put("message", "文件上传成功");

        OutPutMessa(0);//保存成功
        return null;
    }
       return "success";
    }

显示图片内容只需要在 <img id="ImgPr" src="driverImages/${rbean.driver_picture}" style="display: block;" /> src 中放图片路径即可