精华内容
下载资源
问答
  • 2019-03-06 09:30:15

    Java实现图片上传到服务器


    #这几天研究图片上传到服务器并回显到页面遇到了问题,在这里总结一下!希望对各位有用!!!

    先上代码

    jsp代码:

    <form id="myform" method="post" enctype="multipart/form-data">
                        <div class="form-group" >
                            <label for="plainGoodsName">商品名</label>
                            <input type="text" class="form-control" id="plainGoodsName" name="plainGoodsName" placeholder="请输入商品名">
                        </div>
    
                        <div class="form-group">
                            <label for="plainGoodsImg">商品图片</label>
    
                            <a style="float: left;border:1px solid #eee;width: 100%;padding: 10px;box-sizing: border-box;margin:5px 0;" href="javascript:;" class="a-upload">
                                <input type="file" name="files" id="plainGoodsImg" onchange="xmTanUploadImg_1(this,'xmTanImg_1')" accept="image/*"/>
                                <img style="width: 80px;" id="xmTanImg_1"/>
                                <div style="width: 80px;height: 80px;display: none;" id="xmTanDiv_1"></div>
                            </a>
                        </div>
    
    
                        <div class="form-group">
                            <label for="plainGoodsPrice">商品价格</label>
                            <input type="text" class="form-control" id="plainGoodsPrice" name="plainGoodsPrice" placeholder="请输入商品价格">
                        </div>
    
                        <div class="form-group">
                            <label for="plainGoodsNum">商品库存</label>
                            <input type="text" class="form-control" id="plainGoodsNum" name="plainGoodsNum" placeholder="商品库存">
                        </div>
                        <div class="form-group">
                            <label for="plainGoodsContext">商品描述</label>
                           <!-- <input type="text" class="form-control" id="plainGoodsContext" name="plainGoodsContext" placeholder="商品描述"> -->
                            <textarea class="form-control" id="plainGoodsContext" name="plainGoodsContext" rows="3"></textarea>
                        </div>
                        <div class="form-group">
                                     <label></label>
                                 <button type="button" onclick="saveGoods()" class="btn btn-primary">添加商品</button>
                        </div>
                    </form>
    

    问题

    第一、上传图片时form表单中加入 enctype=“multipart/form-data” 否则会出现问题 后台接收不到
    (jsp的id接收后台传过来的值 通过标签赋值 name是向后台传值用的 如果没有name没法传值==这是给我自己写的)

    js代码

     var formData = new FormData($( "#myform" )[0]);
      $.ajax({
                url:"${ctx}/back/exchangeShopping/addGoods.action",
                type:"POST",
                dataType:"json",
                data:formData,
                processData: false,// 不加会报错
                contentType: false,// 不加会报错
                success:function(data) {
                    if(data == "true"){
                        layer.msg('添加成功',{icon:6,time:1500,end:function () {
                                window.location.reload();
                            }});
                    }else {
                        layer.msg(data,{icon:5,time:1500});
                    }
                }
            })
    

    有几个要注意的地方:
    第一、ajax要加上两个属性
    processData: false,// 不加会报错
    contentType: false,// 不加会报错
    第二、 var formData = new FormData($( “#myform” )[0]);
    使用formdata序列化表单
    关于jquery的 $(“form”).serialize()和 new FormData表单序列化
    网址:https://blog.csdn.net/cracklibby/article/details/80013112
    $(“form”).serialize()只会序列化表单不会序列化文件

    问题:带文件上传的form表单序列化 传参问题
    使用formdata 序列化form表单 后台使用@RequestParam(value = “files”, required = false)MultipartFile files,wFrontPlainGoods goods 接收
    并且MultipartFile 名字要与页面name的名字相同

    controller页面

    @ResponseBody
    	    @RequestMapping("/addGoods.action")
    	    public String addGoods(@RequestParam(value = "files", required = false)MultipartFile files,wFrontPlainGoods goods){
    	    	String Info = this.backExchangeShoppingService.addGoods(goods,files);
    	        return JSONObject.toJSONString(Info);
    	    }
    

    后台 MultipartFile 接收文件 注意 名字要与页面起的名字一样(有些文章写的是名字一定不要一样 具体问题具体分析 我是小白不确定这个是为什么)
    后面的对象时接收除文件以外的其他信息!

    service页面:

    //定义图片存储在服务器的路径
    	public static final String PICTUREURL = "D:/nginx-1.13.8/html/slitLamp/screening/";
    	public static final String CONFIGUREURL = "http://10.11.23.203:8029/";
    	public String uploadPictureByFile(MultipartFile file) {
    		// TODO 自动生成的方法存根
    		String filename1 = "picture_" + UUID.randomUUID() + ".jpg";//生成唯一图片路径
    		 if (!file.isEmpty()) {  
    	            try {  
    	                File filepath = new File(PICTUREURL);
    	                if (!filepath.exists()) 
    	                    filepath.mkdirs();
    	                // 文件保存路径  
    	               String savePath = PICTUREURL + filename1;  
    	                // 转存文件  
    	                file.transferTo(new File(savePath));  
    	            } catch (Exception e) {  
    	                e.printStackTrace();  
    	            }  
    	        }  
    
    				String url = CONFIGUREURL + filename1;
    		return url;
    	}
    

    问题
    第一、D:/nginx-1.13.8/html/slitLamp/screening/ 为图片存在nginx下的路径
    http://10.11.23.203:8029/ 为nginx的IP+端口 通过这个可以访问启动nginx的页面
    第二、配置nginx 在nginx下的conf文件夹下的nginx.conf文件中配置图片储存路径`
    第三、程序的图片是下载到本地的 使用nginx挂载本地的图片 然后启动nginx服务后通过nginx的IP+端口+(有可能还要加)+图片名访问

        location ~ \.(gif|jpg|jpeg|png|bmp|swf)$              ###处理图片  
    		{    
    			root         D:/nginx-1.13.8/html/slitLamp/screening/;   ###对应的图片存入路径  
    		}    
    
    图片:![nginx配置图片](https://img-blog.csdnimg.cn/20190306091445409.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMTk0ODIxNTY4,size_16,color_FFFFFF,t_70)
    
    

    关于nginx的问题

    配置nginx的网址(Windows版 参考):
    https://blog.csdn.net/y19910825/article/details/80301393
    参考:
    https://blog.csdn.net/qq_19244423/article/details/46877983
    一台服务器挂载另一台服务器信息 参考:[Linux部署nginx挂载文件]
    https://www.linuxidc.com/Linux/2013-07/87183.htm

    当程序部署到服务器上时可以通过访问其他服务器来分担部署程序服务器的负载 以防止出现问题

    另外发现一种方法是将图片上传到七牛云服务器上 调用他们的接口 他们给返回图片链接 直接将链接保存到本地就可以
    网址参考:[七牛云]
    https://www.w3cschool.cn/opensnscourse/euks1ppj.html

    以上链接是从网上复制过来的 如有问题请联系本人删除!!!

    更多相关内容
  • 在各大网站上都可以实现上传头像功能,可以选择自己喜欢的图片做头像,从本地上传,今天小编给大家分享Java实现图片上传到服务器并把上传的图片读取出来,需要的朋友参考下
  • Java实现图片上传

    2017-04-21 12:32:23
    Java实现图片上传
  • 我们给大家分享了关于java实现图片上传至本地的实例以及相关代码,有需要的朋友参考下。
  • java实现图片上传到数据库并显示,利用Struts2和commons-fileupload-1.2.1.jar,代码调试通过 完美运行。
  • 主要为大家详细介绍了Java实现图片上传至服务器功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要给大家介绍了关于java实现图片上传与展示的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • java实现图片上传预览

    2012-05-03 18:52:31
    java实现图片上传预览,包含asp和jsp的实现代码,以及相关说明
  • 主要介绍了java实现文件上传、下载、图片预览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Java实现图片上传功能(前后端:vue+springBoot) 前言:前端:组件引入基础文件上传自定义上传方法后端:需要引入的jar包:基础文件上传Controller层:server层:自定义的多参数接口 前言:   我们在设计自己的...

    前言:

      我们在设计自己的网站的时候,一定会遇到上传图片的功能,比如:用户头像,商品图片。
      这篇文章将带着大家设计一个可以使用的图片上传功能,请大家一步一步来,让我们在码路上越走越远。

    前端:

    组件引入

    前端我们使用element-ui的组件。我这里以html加js的方式
    1:引入vue.js,axios.js,element-ui。

    <script src="../static/js/util/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

    基础文件上传

    2:element-ui中有多个例子,我们使用其中一个:

    <el-upload
      class="avatar-uploader"
      action="/Manage/upBusinessImage"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    
    <style>
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    </style>
    
    <script>
      export default {
        data() {
          return {
            imageUrl: ''
          };
        },
        methods: {
          handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
    
            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          }
        }
      }
    </script>
    

    上面是element-ui中的一个例子。我将会对其中的各个参数进行讲解。
    其中的样式,我们不进行讲解,直接复制就可以。
    el-upload中的参数:
    action:后面是接口url,图片文件将会发送到该接口中。
    :show-file-list:是否显示上传的图片列表
    :on-success:上传成功后要执行的操作,“:”代表与js代码进行了绑定。
    :before-upload:上传之前要执行的操作,比如检验是否是图片文件,图片的大小是否符合要求等。

      在它的一个函数中使用了URL.createObjectURL(file.raw);方法,这个地方要注意:elementUI中,自带的方法中的file,并不是指图片本身,而是他的一个dom。如果要是拿他的图片,就要用file.raw。

    自定义上传方法

      通过上面的方式就可以将图片文件发送给后端,但是,这个只是基础的功能,往往我们的业务不会如此简单,比如:我们可能将商品id,等信息一同发送后端,以保证后端确定图片的作用。此时上面的方式就满足不了我们的需求了。
      为此我们需要设计自己的上传方法。于是改造过程:
    1:action后面的路径改为空:action=""
    2:添加属性:http-request,后面跟自定义的方法名,例如::http-request=“uploader”
    3:在js中书写自定义方法“uploader”

    async uploader(params){
    
                let file = params.file;
                let clothesId;
                let styleId;
                let imgUrl;
                clothesId = this.goodsModify.goodsId;
                styleId = this.goodsModify.styleId;
                imgUrl = this.goodsModify.goodsImg
                formData = new FormData();
                formData.append('file', file);
                formData.append('clothesId',clothesId);
                formData.append('styleId',styleId);
                formData.append('imgUrl',imgUrl);
                let data = await axios.post("/Manage/upBusinessImage",formData)
            },
    

      说明一下如果要传递的是多个参数,则必须把多个参数整理成formData的形式进行发送。而到后端则需要用@RequestParam注解标识进行接收。

    后端:

    需要引入的jar包:

    <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.11.0</version>
    </dependency>
    

    基础文件上传

    Controller层:

    @RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST)
        public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file) {
            return fileService.uploadImage(file,"D:/img/HeadImages/");
        }
    

      因为只传递了文件,所以只需要一个MultipartFile类型的file接收就可以了。

    server层:

    //上传操作
        private CommonResultVo uploadImage(MultipartFile file,String folder){
            if (file == null) {
                return CommonResultVoUtil.error("请选择要上传的图片");
            }
            if (file.getSize() > 1024 * 1024 * 10) {
                return CommonResultVoUtil.error("文件大小不能大于10M");
            }
            //获取文件后缀
            String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1, file.getOriginalFilename().length());
            if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {
                return CommonResultVoUtil.error("请选择jpg,jpeg,gif,png格式的图片");
            }
            String savePath = folder;
            File savePathFile = new File(savePath);
            if (!savePathFile.exists()) {
                //若不存在该目录,则创建目录
                savePathFile.mkdir();
            }
            //通过UUID生成唯一文件名
            String filename = UUID.randomUUID().toString().replaceAll("-","") + "." + suffix;
            try {
                //将文件保存指定目录
                //file.transferTo(new File(savePath + filename));
                //File file1 = new File(file.getOriginalFilename());
                FileUtils.copyInputStreamToFile(file.getInputStream(),new File(savePath + filename));
            } catch (Exception e) {
                e.printStackTrace();
                return CommonResultVoUtil.error("保存文件异常");
            }
            //返回文件名称
            return CommonResultVoUtil.successWithData(filename,1);
        }
    

      代码里的CommonResultVoUtil是我自定义的结果工具类,大家可以根据自己的需求自己构建,也可直接返回字符串成功或者失败。

    自定义的多参数接口

    与上面的区别只是多使用了几个参数:

    @RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST)
        public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file,
                                                  @RequestParam(value = "clothesId", required = false) String clothesId,
                                                  @RequestParam(value = "styleId", required = false) String styleId,
                                                  @RequestParam(value = "imgUrl", required = false) String imgUrl) {
            return fileService.uploadBusinessImage(file,clothesId,styleId,imgUrl);
        }
    

    拿到这些参数后可以根据某些参数去定位数据库中的某条记录,然后将图片位置保存入数据库中,以便后续访问。

    展开全文
  • java实现图片上传并添加水印效果(文字水印,蒙版,logo图片),自动进行文字大小行数位置匹配,文字自动换行
  • 本文通过实例代码给大家介绍了java上传文件图片到指定服务器目录的相关知识,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了java图片同步上传功能的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • java实现图片上传功能,并返回图片保存路径.pdf
  • 主要介绍了Java实现图片上传工具类,涉及java针对图片文件的检查、上传、清除等相关操作技巧,需要的朋友可以参考下
  • 主要教大家如何简单实现java上传图片文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了java实现上传图片并压缩图片大小功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • java实现图片上传功能,并返回图片保存路径

    万次阅读 多人点赞 2018-06-25 11:38:04
    //用于进行图片上传,返回地址 function setImg(obj){ var f=$(obj).val(); alert(f); console.log(obj); if(f == null || f ==undefined || f == ''){ return false; } if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|...

    1、前端html

    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">身份证正面照片:</label>
        <div class="col-sm-10">
        <input type="hidden" name="img"  id="photoUrl"/>
        <input type="file" name="logoFile" id="logoFile" onchange="setImg(this);">
        <span><img id="photourlShow" src="" width="300" height="197"/></span>
        </div>
    </div>

    2、js

    //用于进行图片上传,返回地址
    function setImg(obj){
    	var f=$(obj).val();
    	alert(f);
    	console.log(obj);
        if(f == null || f ==undefined || f == ''){
            return false;
        }
        if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
        {
            alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
            $(obj).val('');
            return false;
        }
        var data = new FormData();
        console.log(data);
        $.each($(obj)[0].files,function(i,file){
            data.append('file', file);
        });
        console.log(data);
        $.ajax({
            type: "POST",
            url: GLOBAL_INFO.WEBURL_PREFIX+"business/uploadImg.xhtml",
            data: data,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            dataType:"json",
            success: function(ret) {
            	console.log(ret);
                if(ret.code==0){
                        $("#photoUrl").val(ret.result.url);//将地址存储好
                        $("#photourlShow").attr("src",ret.result.url);//显示图片   
                        alertOk(ret.message);
                }else{
                    alertError(ret.message);
                    $("#url").val("");
                    $(obj).val('');
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("上传失败,请检查网络后重试");
            }
        });
    }

    3、后台代码

    import java.io.File;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.Random;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    import com.alibaba.fastjson.JSON;
    import com.siyang.CommonUtil.BaseController;
    import com.siyang.entity.ResponseResult;
    /**
     * 照片上传工具类
     * @author admin
     *
     */
    @Controller
    @RequestMapping("/business")
    public class UploaderController extends BaseController{
    	@ResponseBody
        @RequestMapping("/uploadImg.xhtml")
        public void uploadPicture(@RequestParam(value="file",required=false)MultipartFile file,HttpServletRequest request,HttpServletResponse response){
            ResponseResult result = new ResponseResult();
    		Map<String, Object> map = new HashMap<String, Object>();
            File targetFile=null;
            String url="";//返回存储路径
            int code=1;
            System.out.println(file);
            String fileName=file.getOriginalFilename();//获取文件名加后缀
            if(fileName!=null&&fileName!=""){   
                String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径
                String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置
                String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
                fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名
    
                //先判断文件是否存在
                SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
                String fileAdd = sdf.format(new Date());
                //获取文件夹路径
                File file1 =new File(path+"/"+fileAdd); 
                //如果文件夹不存在则创建    
                if(!file1 .exists()  && !file1 .isDirectory()){       
                    file1 .mkdir();  
                }
                //将图片存入文件夹
                targetFile = new File(file1, fileName);
                try {
                	//将上传的文件写到服务器上指定的文件。
                    file.transferTo(targetFile);
                    url=returnUrl+fileAdd+"/"+fileName;
                    code=0;
                    result.setCode(code);
                    result.setMessage("图片上传成功");
                    map.put("url", url);
                    result.setResult(map);
                } catch (Exception e) {
                    e.printStackTrace();
                    result.setMessage("系统异常,图片上传失败");
                }
            }
           writeJson(response, result);
        }
    }

    4、结果集实体类

    package com.siyang.entity;
    
    import java.util.Map;
    
    public class ResponseResult {
    	private Integer code;
    
        private String message;
    
        private Map<String, Object> result;
    
        public Integer getCode() {
            return this.code;
        }
    
        public void setCode(Integer code) {
            this.code = code;
        }
    
        public String getMessage() {
            return this.message;
        }
    
        public void setMessage(String message) {
            this.message = message;
        }
    
        public Map<String, Object> getResult() {
            return this.result;
        }
    
        public void setResult(Map<String, Object> result) {
            this.result = result;
        }
    
    }
    

    5、向页面返回结果

    package com.siyang.CommonUtil;
    
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.io.PrintWriter;
    
    import javax.servlet.http.HttpServletResponse;
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
    import com.google.gson.Gson;
    
    public class BaseController {
    	 protected Logger logger = LoggerFactory.getLogger(getClass());
    	    /**
    	     * 输出JSON数据
    	     * 
    	     * @param response
    	     * @param jsonStr
    	     */
    	    public void writeJson(HttpServletResponse response, String jsonStr) {
    	        response.setContentType("text/json;charset=utf-8");
    			response.setHeader("Pragma", "No-cache");
    			response.setHeader("Cache-Control", "no-cache");
    			response.setDateHeader("Expires", 0);
    	        PrintWriter pw = null;
    	        try {
    	            pw = response.getWriter();
    	            pw.write(jsonStr);
    	            pw.flush();
    	        } catch (Exception e) {
    	            logger.info("输出JSON数据异常", e);
    	        }finally{
    	        	if(pw!=null){
    	        		pw.close();
    	        	}
    	        }
    	    }
    	    /**
    	     * 
    	     * 向页面响应json字符数组串流.
    	     * 
    	     * @param response
    	     * @param jsonStr
    	     * @throws IOException
    	     * @return void
    	     */
    	    public void writeJsonStr(HttpServletResponse response, String jsonStr) throws IOException {
    
    	        OutputStream outStream = null;
    	        try {
    	            response.reset();
    	            response.setCharacterEncoding("UTF-8");
    	            outStream = response.getOutputStream();
    	            outStream.write(jsonStr.getBytes("UTF-8"));
    	            outStream.flush();
    	        } catch (IOException e) {
    	            logger.info("输出JSON数据异常(writeJsonStr)", e);
    	        } finally {
    	        	if(outStream!=null){
    	        		outStream.close();
    	        	}
    	        }
    	    }
    
    	    public void writeJsonStr(HttpServletResponse response, InputStream in) throws IOException {
    	        
    	        if(null == in ){
    	            return ;
    	        }
    	        OutputStream outStream = null;
    	        try {
    	            response.reset();
    	            response.setCharacterEncoding("UTF-8");
    	            response.setHeader("Pragma", "No-cache");
    	    		response.setHeader("Cache-Control", "no-cache");
    	    		response.setDateHeader("Expires", 0);
    	            outStream = response.getOutputStream();
    	            int len = 0;
    	            byte[] byt = new byte[1024];
    	            while ((len = in.read(byt)) != -1) {
    	                outStream.write(byt, 0, len);
    	            }
    	            outStream.flush();
    
    	        } catch (IOException e) {
    
    	            logger.info("输出JSON数据异常(writeJsonStr)", e);
    	        } finally {
    	        	if(outStream!=null){
    	        		outStream.close();
    	        		in.close();
    	        	}
    	        }
    	    }
    	    
    	    
    	    /**
    	     * 输出JSON数据
    	     * 
    	     * @param response
    	     * @param jsonStr
    	     */
    	    public void writeJson(HttpServletResponse response, Object obj) {
    	        response.setContentType("text/json;charset=utf-8");
    	        response.setHeader("Pragma", "No-cache");
    			response.setHeader("Cache-Control", "no-cache");
    			response.setDateHeader("Expires", 0);
    	        PrintWriter pw = null;
    	        Gson gson = new Gson();
    	        try {
    	            pw = response.getWriter();
    	            pw.write(gson.toJson(obj));
    	            
    	            pw.flush();
    	        } catch (Exception e) {
    	            logger.info("输出JSON数据异常", e);
    	        }finally{
    	        	if(pw!=null){
    	        		pw.close();
    	        	}
    	        }
    	    }
    	    
    		
    		
    		
    	   public void writeHtml(HttpServletResponse response, String html) {
    	        response.setContentType("text/html;;charset=utf-8");
    			response.setHeader("Pragma", "No-cache");
    			response.setHeader("Cache-Control", "no-cache");
    			response.setDateHeader("Expires", 0);
    	        PrintWriter pw = null;
    	        try {
    	            pw = response.getWriter();
    	            pw.write(html);
    	            pw.flush();
    	        } catch (Exception e) {
    	            logger.info("输出HTML数据异常", e);
    	        }finally{
    	        	if(pw!=null){
    	        		pw.close();
    	        	}
    	        }
    	    }
    }
    

     

     

     

     

     

    展开全文
  • 在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?   下面说一下我的实现过程(只是个人实现思路,实际网站怎...

    题外话:推荐一个专注于Java开发的网站,做提升学习,价值阅读:Java知音

    同时,扫码关注后端技术精选,回复“学习资料”,领取100套小程序源码+小程序开发视频和基本Java经典书籍电子版


    在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?

     

    下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚)

    实现的思路:

    工具:MySQL,eclipse

    首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息,

    一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID,

    T_touxiang表中的用户ID对应了t_user中的id。

     

    t_user表SQL:

    DROP TABLE IF EXISTS `t_user`;
    CREATE TABLE `t_user` (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `username` varchar(20) NOT NULL,
      `password` varchar(255) NOT NULL,
      PRIMARY KEY (`id`),
      UNIQUE KEY `username` (`username`)
    ) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
    

     

    T_touxiang表SQL:

     

    DROP TABLE IF EXISTS `t_touxiang`;
    CREATE TABLE `t_touxiang` (
      `id` int(10) NOT NULL AUTO_INCREMENT,
      `image_path` varchar(255) DEFAULT NULL,
      `user_id` int(11) DEFAULT NULL,
      `old_name` varchar(255) DEFAULT NULL,
      PRIMARY KEY (`id`),
      KEY `img_user` (`user_id`),
      CONSTRAINT `img_user` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
    

     

    首先,写一个UploadServlet.java,用来处理图片文件的上传,并将图片路径,图片名称等信息存放到t_touxiang数据表中,代码如下:

     

    @WebServlet("/UploadServlet.do")
    public class UploadServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        protected void service(HttpServletRequest request, HttpServletResponse response)
    	    throws ServletException, IOException {
    	// 判断上传表单是否为multipart/form-data类型
    	HttpSession session = request.getSession();
    	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
    							 // 中
    
    	if (ServletFileUpload.isMultipartContent(request)) {
    
    	    try {
    		// 1. 创建DiskFileItemFactory对象,设置缓冲区大小和临时文件目录
    		DiskFileItemFactory factory = new DiskFileItemFactory();
    		// System.out.println(System.getProperty("java.io.tmpdir"));//默认临时文件夹
    
    		// 2. 创建ServletFileUpload对象,并设置上传文件的大小限制。
    		ServletFileUpload sfu = new ServletFileUpload(factory);
    		sfu.setSizeMax(10 * 1024 * 1024);// 以byte为单位 不能超过10M 1024byte =
    						 // 1kb 1024kb=1M 1024M = 1G
    		sfu.setHeaderEncoding("utf-8");
    
    		// 3.
    		// 调用ServletFileUpload.parseRequest方法解析request对象,得到一个保存了所有上传内容的List对象。
    		@SuppressWarnings("unchecked")
    		List<FileItem> fileItemList = sfu.parseRequest(request);
    		Iterator<FileItem> fileItems = fileItemList.iterator();
    
    		// 4. 遍历list,每迭代一个FileItem对象,调用其isFormField方法判断是否是上传文件
    		while (fileItems.hasNext()) {
    		    FileItem fileItem = fileItems.next();
    		    // 普通表单元素
    		    if (fileItem.isFormField()) {
    			String name = fileItem.getFieldName();// name属性值
    			String value = fileItem.getString("utf-8");// name对应的value值
    
    			System.out.println(name + " = " + value);
    		    }
    		    // <input type="file">的上传文件的元素
    		    else {
    			String fileName = fileItem.getName();// 文件名称
    			System.out.println("原文件名:" + fileName);// Koala.jpg
    
    			String suffix = fileName.substring(fileName.lastIndexOf('.'));
    			System.out.println("扩展名:" + suffix);// .jpg
    
    			// 新文件名(唯一)
    			String newFileName = new Date().getTime() + suffix;
    			System.out.println("新文件名:" + newFileName);// image\1478509873038.jpg
    
    			// 5. 调用FileItem的write()方法,写入文件
    			File file = new File("D:/lindaProjects/mySpace/wendao/WebContent/touxiang/" + newFileName);
    			System.out.println(file.getAbsolutePath());
    			fileItem.write(file);
    
    			// 6. 调用FileItem的delete()方法,删除临时文件
    			fileItem.delete();
    
    			/*
    			 * 存储到数据库时注意 1.保存源文件名称 Koala.jpg 2.保存相对路径
    			 * image/1478509873038.jpg
    			 * 
    			 */
    			if (user != null) {
    			    int myid = user.getId();
    			    String SQL = "INSERT INTO t_touxiang(image_path,user_id,old_name)VALUES(?,?,?)";
    			    int rows = JdbcHelper.insert(SQL, false, "touxiang/" + newFileName, myid, fileName);
    			    if (rows > 0) {
    				session.setAttribute("image_name", fileName);
    				session.setAttribute("image_path", "touxiang/" + newFileName);
    				response.sendRedirect(request.getContextPath() + "/upImage.html");
    			    } else {
    
    			    }
    
    			} else {
    			    session.setAttribute("loginFail", "请登录");
    			    response.sendRedirect(request.getContextPath() + "/login.html");
    			}
    
    		    }
    		}
    
    	    } catch (FileUploadException e) {
    		e.printStackTrace();
    	    } catch (Exception e) {
    		e.printStackTrace();
    	    }
    
    	}
        }
    }
    

     

    在完成图片上传并写入数据库的同时,将图片路径通过session的方式发送到HTML界面

     

     

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="UTF-8">
    
    <title>更换头像</title>
    
    </head>
    
    <body>
    
             <formaction="UploadServlet.do" method="post"enctype="multipart/form-data">
    
                         本地目录:<inputtype="file" name="uploadFile">
    
               <img src="${image_path}" width="200" height="200">
    
                    <inputtype="submit" value="上传头像"/>
    
       </form>
    
    </body>
    
    </html>

     

    至此,图片上传数据库和本地服务器已经实现,那么如何在HTML界面显示出个人信息以及上传的头像呢?

     

     

    首先定义一个PersonServlet类,用来读取数据库的内容,并发送到HTML界面。

    代码如下:

    @WebServlet("/persons.do")
    public class PersonServlet extends HttpServlet {
    
        private static final long serialVersionUID = -800352785988546254L;
    
        protected void service(HttpServletRequest request, HttpServletResponse response)
    	    throws ServletException, IOException {
    	// 判断上传表单是否为multipart/form-data类型
    	Touxiang tx=null;
    	
    	HttpSession session = request.getSession();
    	User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话
    	if(user!=null){
    	    int myid=user.getId();
    	    String SQL="SELECT id,image_path,old_name FROM t_touxiang WHERE user_id=?";
    	    ResultSet rs=JdbcHelper.query(SQL,myid);
    	    String uSQL="SELECT username,password FROM t_user WHERE id=?";
    	    ResultSet urs=JdbcHelper.query(uSQL,myid);
    	    System.out.println( "我的个人id是: " + myid);
    	    final List<Touxiang> touxiang=new ArrayList<>();
    	    try {
    		if(rs.next())
    		{
    		    tx=new Touxiang();
    		    tx.setId(rs.getInt(1));
    		    tx.setImage_path(rs.getString(2));
    		    tx.setOld_name(rs.getString(3));
    		    touxiang.add(tx);
    		}
    		if(urs.next()){
    		    user.setUsername(urs.getString(1));
    		    user.setPassword(urs.getString(2));
    		    user.setTouxiang(touxiang);
    		}
    		
    	    } catch (SQLException e) {
    		// TODO Auto-generated catch block
    		e.printStackTrace();
    	    }
    	   
    		session.setAttribute("user", user);
    		System.out.println( "我的id: " + myid);
    		response.sendRedirect( request.getContextPath() + "/person.html");
    	}
        }
    }
    

     

    在HTML界面接收信息,并显示出来,代码如下:

     

    <div>
    	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
          		 <div><a href="$path/upImage.html">更换头像</a></div>
            	
            	#foreach( $ut in  $user.getTouxiang() )
            	 <img src=" $ut.getImage_path()"  width="200" height="200">
            	 #end
            	 <div>我的头像:</div>
            	 <div>我的姓名:$user.getUsername()</div>
            	 <div><a href="$path/myAnswer.do">我的解答</a></div>
    		<div><a href="$path/myQuestion.do">我的提问</a></div>
       	 </form>
    	</div>
    <div>
    	<form action="UploadServlet.do" method="post" enctype="multipart/form-data">
          		 <div><a href="$path/upImage.html">更换头像</a></div>
            	
            	#foreach( $ut in  $user.getTouxiang() )
            	 <img src=" $ut.getImage_path()"  width="200" height="200">
            	 #end
            	 <div>我的头像:</div>
            	 <div>我的姓名:$user.getUsername()</div>
            	 <div><a href="$path/myAnswer.do">我的解答</a></div>
    		<div><a href="$path/myQuestion.do">我的提问</a></div>
       	 </form>
    	</div>

     

    至此,一个基于Java的头像上传服务器,路径存储在MySQL,并在HTML界面读取出来的功能就基本实现了。头像上传之前进行处理等操作,可以选择一些插件来完成。这里只是简单的实现了基本功能。

     

     

    补充

    对于图片上传,这里只是简单的用Servlet实现了一下最基本的功能,仅提供思路。如果使用spring等框架,他都对图片上传做了很好的封装,应该更加容易。

    后台实现图片上传应该来说比较容易,但是比较头疼的是图片上传原生的按钮丑出天际,这里推荐俩实用的上传控件,应该算比较好看。

     

    1,H5实现的图片上传,可多张上传,可点击可拖拽上传,大概是这个样子:

    基本的使用介绍和下载地址:http://blog.csdn.net/weixin_36380516/article/details/70352689

     

    2,jQuery图像裁剪插件,大概长这样

     

    不仅提供上传,还有裁剪等功能,UI做的也美,

    地址:http://www.jq22.com/jquery-info318

     

    展开全文
  • 主要介绍了Java实现的简单图片上传功能,结合实例形式分析了java图片传输相关的检验、传输、接收等相关操作技巧,需要的朋友可以参考下
  • 主要为大家详细介绍了java实现上传网络图片到微信临时素材,网络图片上传到微信服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • java实现上传图片存入到数据库,只能用炫酷来形容,感兴趣就下载看看吧
  • 本文给大家介绍的是项目中经常需要用到的一个常用的功能,使用java实现文件的上传下载和图片的压缩功能,这里推荐给大家,有需要的小伙伴参考下。
  • java实现七牛云图片文件的上传 七牛云:https://portal.qiniu.com/create#resource 首先需要去注册一个账号实现实名认证 之后打开七牛云的 我们需要先创建一个储存空间来给我们使用 这里的key也需要记录下来我们...
  • 主要介绍了Java使用Ajax实现跨域上传图片功能,需要的朋友可以参考下
  • 主要为大家详细介绍了java webApp异步上传图片实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Java实现图片文件上传

    万次阅读 多人点赞 2020-06-15 15:42:21
    Java实现图片文件上传 将上传图片接口分层,便于维护接口(仅用于个人学习编码记录,代码均参考于百度以及自己改进,如有疑问欢迎大家积极讨论) 接口部分(interface) 将接口分为单图片上传以及多图片上传 public ...
  • 主要介绍了java通过模拟post方式提交表单实现图片上传功能实例,涉及Java针对表单的提交操作响应及文件传输的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 115,180
精华内容 46,072
关键字:

java实现图片上传

java 订阅
友情链接: 617175.zip