精华内容
下载资源
问答
  • 一、前言在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能。可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到。二、...

    一、前言

    在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能。可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到。

    二、上传功能分析

    我实现的上传框架是JQuery+SpringMvc+spring+FastDFS。

    前台借助KindEditor的上传文件的插件,从而达到上传和回显的功能。关于KindEditor的使用,小编会在后面的文章中向大家介绍。

    实现的效果如下:

    0818b9ca8b590ca3270a3433284dd417.png

    实现流程:

    点击上传图片,会弹出“批量图片上传”的模态窗体,点击添加图片,就可以选择要添加的图片,可以选择一张,也可以选择多张,点击开始上传就会把选中的图片上传到FastDFS上面,然后回显到空白的位置。

    三、功能实现

    3.1 前台编写

    上传图片按钮:

    页面初始化完毕后执行js中 的代码,它会创建一个富文本编辑器,然后进行初始化,初始化的时候,会调用Common.js中的createEditor方法,创建一个富文本编辑器。

    然后又会调用init方法,来实例化一个Common.js中的实例,初始化图片上传器。

    上传图片

    Commom.js:

    var TT = TAOTAO = {

    // 编辑器参数

    kingEditorParams : {

    //指定上传文件参数名称,Controller中接收参数使用的参数名

    filePostName : "uploadFile",

    //指定上传文件请求的url。

    uploadJson : '/pic/upload',

    //上传类型,分别为image、flash、media、file

    dir : "image"

    },

    createEditor : function(select){

    return KindEditor.create(select, TT.kingEditorParams);

    },

    init : function(data){

    // 初始化图片上传组件

    this.initPicUpload(data);

    },

    // 初始化图片上传组件

    initPicUpload : function(data){

    $(".picFileUpload").each(function(i,e){

    var _ele = $(e);

    _ele.siblings("div.pics").remove();

    _ele.after('\

    \
    ');

    // 回显图片

    if(data && data.pics){

    var imgs = data.pics.split(",");

    for(var i in imgs){

    if($.trim(imgs[i]).length > 0){

    _ele.siblings(".pics").find("ul").append("

    %22+imgs%5Bi%5D+%22");

    }

    }

    }

    //给“上传图片按钮”绑定click事件

    $(e).click(function(){

    var form = $(this).parentsUntil("form").parent("form");

    //打开图片上传窗口

    KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){

    var editor = this;

    editor.plugin.multiImageDialog({

    clickFn : function(urlList) {

    var imgArray = [];

    KindEditor.each(urlList, function(i, data) {

    imgArray.push(data.url);

    form.find(".pics ul").append("

    %22+data.url+%22");

    });

    form.find("[name=image]").val(imgArray.join(","));

    editor.hideDialog();

    }

    });

    });

    });

    });

    }

    };

    3.2 后台的编写

    后台使用,就必须要先导入两个jar包:

    Commons-io.jar

    Commons-fileupload.jar

    然后在springmvc.xml中配置多媒体解析器:

    响应的内容:

    约定大于配置

    返回格式(JSON):

    //成功时

    {

    "error" : 0,

    "url" : "http://www.example.com/path/to/file.ext"

    }

    //失败时

    {

    "error" : 1,

    "message" : "错误信息"

    }

    需要创建一个pojo描述返回值。

    Pojo中有三个属性:error、url、message。

    public class PictureResult {

    private int error;

    private String url;

    private String message;

    public int getError() {

    return error;

    }

    public void setError(int error) {

    this.error = error;

    }

    public String getUrl() {

    return url;

    }

    public void setUrl(String url) {

    this.url = url;

    }

    public String getMessage() {

    return message;

    }

    public void setMessage(String message) {

    this.message = message;

    }

    }

    3.2.1 Service层

    接收图片数据,把图片上传到图片服务器,返回PictureResult 。需要使用FastDFSClient工具类。

    参数:MultiPartFile pictureFile

    返回值:PictureResult

    @Service

    public class PictureServiceImpl implements PictureService {

    @Override

    public PictureResult uploadPic(MultipartFile picFile) {

    PictureResult result = new PictureResult();

    //判断图片是否为空

    if (picFile.isEmpty()) {

    result.setError(1);

    result.setMessage("图片为空");

    return result;

    }

    //上传到图片服务器

    try {

    //取图片扩展名

    String originalFilename = picFile.getOriginalFilename();

    //取扩展名不要“.”

    String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);

    FastDFSClient client = new FastDFSClient("classpath:properties/client.conf");

    String url = client.uploadFile(picFile.getBytes(), extName);

    //把url响应给客户端

    result.setError(0);

    result.setUrl(url);

    } catch (Exception e) {

    e.printStackTrace();

    result.setError(1);

    result.setMessage("图片上传失败");

    }

    return result;

    }

    }

    3.2.2 Controller

    接收上传的图片信息,调用Service把图片上传到图片服务器。返回json数据。需要使用@ResponseBody

    @Controller

    public class PictureController {

    @Autowired

    private PictureService pictureService;

    @RequestMapping("/pic/upload")

    @ResponseBody

    public PictureResult uploadFile(MultipartFile uploadFile) {

    PictureResult result = pictureService.uploadPic(uploadFile);

    return result;

    }

    }

    四、小结

    批量导入也是很有用的,导入图片,导入文档,这些操作都可以为自己增分。

    展开全文
  • Java图片上传+回显技术

    万次阅读 多人点赞 2017-12-14 11:26:25
    博主最近在项目中多次运用多ajaxfileupload上传图片技术,并带有图片回显功能,后台java也用到了自己封装得处理文件得方法,分享给大家,一起学习应用,我们不止会New 前言先说一下整体得流程,首先需求为给角色上传...

    博主最近在项目中多次运用多ajaxfileupload上传图片技术,并带有图片回显功能,后台java也用到了自己封装得处理文件得方法,分享给大家,一起学习应用,我们不止会New

    前言

    先说一下整体得流程,首先需求为给角色上传头像,通过添加页面对用户添加头像并回显,然后填写信息后进行表单提交,发送ajaxfileupload请求给java,java处理相应请求后,将图片上传tomcat服务器,最后将真实路径存入数据库,并在前台JSP调取相对应得img真实路径,最后显示在前台页面,整体需求完成。

    上传成功与未上传:

    这里写图片描述

    1.通过添加用户页面进行图片选择,回显功能

    首先,引入功能所需jar包,基础包在此不再重复,下面只列出关键jar包:
    这里写图片描述

    下来进入添加页面,并进行选择图片操作:

    这里写图片描述

    选择图片后,进行图片与图片信息回显:

    这里写图片描述

    jsp代码:

    <div class="row cl">
        <label class="form-label col-xs-4 col-sm-2">
            <span class="c-red">*</span> 头像:
        </label>  
         &nbsp;&nbsp;&nbsp;&nbsp;
         <img id="pic3" src="" width="106" alt="">
        <input type='file' style="width: 200px;" name='picPaths3'id='picPaths3'           
        onchange="showPic(this, 3);" />  
    </div> 

    创建Onchange事件写JS代码:

    //图片回显+图片格式+文件类型
    function showPic(obj, id) { 
            var newPreview = document.getElementById('pic'+id); 
            if (obj) { 
                //ie浏览器兼容 
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
                    obj.select(); 
                    newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"; 
    
                    var path = document.selection.createRange().text;
                    var flag = judgeImgSuffix(path);
                    if(flag){
                        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
                    }else{
                        alert("要求图片格式为png,jpg,jpeg,bmp");
                    }
    
                    return; 
                } 
                //firefox浏览器兼容 
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
                    if (obj.files) { 
                        newPreview.src = window.URL.createObjectURL(obj.files.item(0)); 
                        return; 
                    } 
                    newPreview.src = obj.value; 
                            return; 
                        } 
                        newPreview.src = obj.value; 
                        return; 
                    } 
                } 
    
                function judgeImgSuffix(path){
                    var index = path.lastIndexOf('.');
                    var suffix = "";
                    if(index > 0){
                        suffix = path.substring(index+1);
                    }
                    if("png"==suffix || "jpg"==suffix || "jpeg"==suffix || "bmp"==suffix || "PNG"==suffix || "JPG"==suffix || "JPEG"==suffix || "BMP"==suffix){
                        return true;
                    }else{
                        return false;
                    }
    
                }

    注:此处的方法及参数可以根据实际开发情况进行修改,因博主pic较多,所以使用pic+id得方法进行区分

    2.发送ajaxfileupload请求,后台接受请求,上传图片,提交表单信息

    填写表单信息,进行提交确认:

    这里写图片描述

    Ajaxfileupload:

    //异步上传图片
    $.ajaxFileUpload({
                            type:"post",
                            url:contextPath+"/user/addUserInfo.action",
                            secureuri:false,
                            data:{userName:userName, account:account, sex:sex,         
                            password:password,
                            telephone:telephone, unitId:unitId, groupId:groupId 
                            },
                            dataType: 'text',
                            fileElementId:"picPaths3",
                            cache:false,
                            async:false,
                            success:function(data,textStatus,jqXHR){
                                //data是返回的数据
                                //textStatus 可能为"success","notmodified"等
                                //jqXHR 是通过jQuery封装的XMLHttpRequest对象
                                if(data==1){
                                    var msg="信息新增成功!";
                                    var option = {
                                        title: "提示",
                                        btn:parseInt("0011",2),
                                        onOk:function(){
    
                                        var index = parent.layer.getFrameIndex(
                                        window.name);
                                        parent.location.replace(parent.location
                                        .href);
                                        parent.layer.close(index);
    
                                        }
                                    }
                                    window.wxc.xcConfirm(msg, "success", option
                                    );
                                    }else{
                                    window.wxc.xcConfirm("新增信息时出现异常! ","
                                    info");
                                        }
                            },
                            error:function(XMLHttpRequest,textStatus,errorThrow
                            n){
                                window.wxc.xcConfirm("新增信息时出现异常,异常信息:
                                "+textStatus,"error");
                                return false;
                                }
                            });

    跳转URL方法后,进入后台:

    /**
         * 用户信息头像上传功能
         * 
         * @param model
         * @param jspUserCustom
         * @return
         */
        @RequestMapping("addUserInfo")
        public void addUserInfo(PfUserCustom jspUserCustom, String userName,
                String account, String password, Integer sex, String telephone,
                Integer unitId, Integer groupId, HttpSession session,
                HttpServletResponse response, HttpServletRequest request) {
            response.setContentType("text/html;charset=UTF-8");
            int result;
            boolean executeResult = false;
            try {
                jspUserCustom.setUnitName(userName);
                jspUserCustom.setAccount(account);
                jspUserCustom.setSex(sex);
                jspUserCustom.setTelephone(telephone);
                jspUserCustom.setUnitId(unitId);
                jspUserCustom.setGroupId(groupId);
                jspUserCustom.setPassword(Md5Util.string2MD5(
                jspUserCustom.getPassword()).toUpperCase());
                MultipartHttpServletRequest multipartRequest = (MultipartHttpSe
                rvletRequest) request;
                String fileName = "";
                String uploadPath = "wyInFile\\";
                String path = request.getSession().getServletContext().getRealP
                ath(
                        "/")
                        + uploadPath;
                path=path.substring(0,path.indexOf("\\wyin"))+ "\\" + uploadPat
                h;
                /*
                 * File uploadPathFile = new File(path); if
                 * (!uploadPathFile.exists()) { uploadPathFile.mkdir(); }
                 */
                String realPath = "";
                for (Iterator it = multipartRequest.getFileNames(); it.hasNext(
                );) {
                    String key = (String) it.next();
                    MultipartFile mulfile = multipartRequest.getFile(key);
                    //封装处理文件工具类Tools
                    String pathTmp = Tools.saveFile2(multipartRequest, mulfile)
                    ;
                    if(!"".equals(pathTmp)){
                        realPath += pathTmp; 
                    }
                }
                jspUserCustom.setImage(realPath);
                userService.insertSelective(jspUserCustom);
                result = 1;// 新增成功
                response.getWriter().print(result);
                executeResult = true;
            } catch (Exception e) {
                result = 2;// 出现异常
                try {
                    response.getWriter().print(result);
                } catch (IOException e1) {
                    e1.printStackTrace();
                }
                executeResult = false;
                e.printStackTrace();
            } finally {   
                //插入操作日志
                Integer loginUserId = (Integer) session.getAttribute("userId");
                operationLogService.insertOperateLog(loginUserId, 3, executeRes
                ult,request);
            }
        }

    注:大家看清楚uploadpath和realpath,一个为访问图片路径,一个为真实服务器路径

    3.文件处理工具类

    此工具类已封装完毕,大家可以放心使用,其中的WyInFile为服务器保存图片的路径

        /**
         * 工具类:上传文件:改名字
         */
        public static String saveFile(HttpServletRequest request, MultipartFile file) {
            // 判断文件是否为空
            if (!file.isEmpty()) {
                try {
                    CommonInfo cmmInfo = new CommonInfo();
                    String separator = File.separator;
                    String picPath2 = System.getProperty("user.dir").replace("b
                    in","webapps")+ File.separator;
                    String directory = picPath2 + "wyInFile" + separator+ cmmInfo.getDateStr() + separator;
                    String newPicName = "";
                    if (file.getSize() != 0) {
                    String originalFileNameLeft = file.getOriginalFilename();
                        // 新的图片名称
                        newPicName = UUID.randomUUID()
                                + originalFileNameLeft
                                        .substring(originalFileNameLeft
                                                .lastIndexOf("."));
                        // 新图片,写入磁盘
                        File f = new File(directory, newPicName);
                        if (!f.exists()) {
                            // 先创建文件所在的目录
                            f.getParentFile().mkdirs();
                        }
                        file.transferTo(f);
                    }
                    return cmmInfo.getDateStr() + separator + newPicName;
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            return "";
        }
    
        /**
         * 工具类:上传文件:不改名字
         */
        public static String saveFile2(HttpServletRequest request,
                MultipartFile file) {
            // 判断文件是否为空
            if (!file.isEmpty()) {
                try {
                    CommonInfo cmmInfo = new CommonInfo();
                    String separator = File.separator;
                    String picPath2 = System.getProperty("user.dir").replace("b
                    in","webapps")+ File.separator;
                    String directory = picPath2 + "wyInFile" + separator+ cmmInfo.getDateStr() + separator;
                    String newPicName = "";
                    if (file.getSize() != 0) {
                        String originalFileNameLeft = file.getOriginalFilename();
                        // 新的图片名称
                        int index = originalFileNameLeft.lastIndexOf(".");
                        newPicName = originalFileNameLeft.substring(0, index)
                                + cmmInfo.getTimeStr()
                                + originalFileNameLeft.substring(index);
                        // 新图片,写入磁盘
                        File f = new File(directory, newPicName);
                        if (!f.exists()) {
                            // 先创建文件所在的目录
                            f.getParentFile().mkdirs();
                        } else {
                            f.delete();
                        }
    
                        file.transferTo(f);
                    }
                    return cmmInfo.getDateStr() + separator + newPicName;
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
            return "";
        }

    3.提交表单,查看页面显示功能,服务器内图片保存情况

    提交后页面显示:

    这里写图片描述

    服务器文件保存情况:

    这里写图片描述

    我们可以看到在tomcat下的WyInFile文件下有一个以时间命名的文件夹。

    这里写图片描述

    点击进入后,发现我们刚才上传的图片就在其中,并且命名也已UUID进行修改,此时说明图片上传完成。

    下来就是在jsp中的img src属性中加入 图片文件夹名/${jstl中图片的属性 例:item.img},就可将图片从服务器中访问在JSP页面中了。

    结语

    各位看到这里,整个ajaxFileupload上传和回显功能就完成了,最后总结几点博主开发时的问题,希望可以帮到大家:
    1. 回显示时调用方法参数容易出错,浏览器兼容问题
    2. ajaxFileupload中参数的传递,data值
    3. java方法中的真实路径和访问路径混淆
    4. 调用工具类处理方法后的返回值处理
    5. 最后img src中的路径访问

    谦卑若愚,好学若饥。此方法不止局限于上传头像,还可以上传文件例如word和Excel表格,也可上传多文件,要在realpath处进行分隔符加载,以上问题都可以回复博主进行讨论,最后,我们不止会New!

    展开全文
  • java上传图片文件回显

    2018-04-11 15:40:52
    总的说图片上传有两种方式,一种是把图片文件写到数据库中,另一种是存到服务器文件目录中。写到数据库中的图片文件需要转换成二进制流的格式,占用数据库空间比较,适合少量图片的存储,比如说,系统中某些小图标,...

    总的说图片上传有两种方式,一种是把图片文件写到数据库中,另一种是存到服务器文件目录中。写到数据库中的图片文件需要转换成二进制流的格式,占用数据库空间比较,适合少量图片的存储,比如说,系统中某些小图标,写到数据库中的优点是比较安全,不容易被用户不小心删除。

      如果是大量的图片的存储通常的做法是保存到服务器的某个文件夹中。而完成上传有很多方式,可以采用流的方式,可以采用ftp的方式,这里采用fileupload方式。

      随着系统规模的不同,对图片文件的处理方式也不尽相同。如果系统中图片的数量不是很大,直接把所有的图片存储到同一个目录下即可。如果图片的积累比较多,可以根据物资分类对图片进行相应的分类储存,这样会节省一些在磁盘中查找文件的时间。

     图片上传到文件中,可以直接上传图片到目录中,也还可以将图片文件名、文件路径写入到数据库中,也可以在程序中动态的创建文件路径。如果公司中要求图片要用专门的服务器存放,这时候把文件路径写活还是比较合适的。一般的如果一种物资(物料)对应一张图片是比较容易处理的。如果对应多张图片,处理起来就需要配合循环使用。一方面,需要处理图片的动态显示,另一方面要检查图片文件命名是否重复。另外再图片处理(上传、删除、修改)的时候需要配合事务。

      下面重点介绍一下使用fileupload方式实现图片上传的最基本的实现。

    1、前端使用file标签:

    [html] view plain copy
    1. <input name = "fileName" type ="file" class ="text1" size ="40" maxlength="40">  

    2、设置文件的enctype格式:multipart/form-data

    [html] view plain copy
    1. <form name="itemForm"  target="_self" id="itemForm" method="post"  action="servlet/item/FileUploadServlet" enctype="multipart/form-data" >  

    关于enctype="multipart/form-data" 的说明:

    在jsp中使用了该格式,对应的Servlet就不能使用request.getParameter()取得参数,要使用ServletFileUpload对象的parseRequest方法先把request对象中的数据解析,然后,使用解析出的元素的isFormField标志,配合getFieldName方法来获取数据。

    3、FileUploadServlet的实现:

    [java] view plain copy
    1. package com.bjpowernode.drp.basedata.web;  
    2.   
    3. import java.io.File;  
    4. import java.io.IOException;  
    5. import java.util.Iterator;  
    6. import java.util.List;  
    7.   
    8. import javax.servlet.ServletException;  
    9. import javax.servlet.http.HttpServlet;  
    10. import javax.servlet.http.HttpServletRequest;  
    11. import javax.servlet.http.HttpServletResponse;  
    12.   
    13. import org.apache.commons.fileupload.FileItem;  
    14. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
    15. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
    16.   
    17. import com.bjpowernode.drp.basedata.manager.ItemManager;  
    18. import com.bjpowernode.drp.basedata.manager.ItemManagerImpl;  
    19. import com.bjpowernode.drp.util.ApplicationException;  
    20.   
    21. public class FileUploadServlet extends AbstractItemServlet {  
    22.       
    23.       
    24.     private File uploadPath;  
    25.       
    26.       
    27.     private File tempPath;  
    28.       
    29.   
    30.       
    31.     @Override  
    32.     public void init() throws ServletException {  
    33.         //在系统启动的时候,就开始初始化,在初始化时,检查上传图片的文件夹和存放临时文件的文件夹是否存在,如果不存在,就创建       
    34.           
    35.         //获取根目录对应的真实物理路径  
    36.         uploadPath = new File(getServletContext().getRealPath("upload"));  
    37.         System.out.println("uploadPath=====" + uploadPath);  
    38.         //如果目录不存在  
    39.         if (!uploadPath.exists()) {  
    40.             //创建目录  
    41.             uploadPath.mkdir();  
    42.         }  
    43.           
    44.         //临时目录  
    45.         //File tempFile = new File(item.getName())构造临时对象  
    46.         tempPath = new File(getServletContext().getRealPath("temp"));  
    47.         if (!tempPath.exists()) {  
    48.             tempPath.mkdir();  
    49.         }  
    50.           
    51.         //如果不显示调用父类方法,就不会有itemManager实例,因此会造成空指针  
    52.         super.init();  
    53.           
    54.           
    55.       
    56.     }  
    57.       
    58.   
    59.   
    60.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
    61.             throws ServletException, IOException {  
    62.   
    63.             doPost(request,response);  
    64.     }  
    65.   
    66.       
    67.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
    68.             throws ServletException, IOException {  
    69.               
    70.         //从item_upload.jsp中拿取数据,因为上传页的编码格式跟一般的不同,使用的是enctype="multipart/form-data"  
    71.         //form提交采用multipart/form-data,无法采用req.getParameter()取得数据  
    72.         //String itemNo = req.getParameter("itemNo");  
    73.         //System.out.println("itemNo======" + itemNo);  
    74.               
    75.           
    76.     /********************************使用 FileUpload 组件解析表单********************/  
    77.           
    78.         //DiskFileItemFactory:创建 FileItem 对象的工厂,在这个工厂类中可以配置内存缓冲区大小和存放临时文件的目录。  
    79.         DiskFileItemFactory factory = new DiskFileItemFactory();  
    80.         // maximum size that will be stored in memory  
    81.         factory.setSizeThreshold(4096);  
    82.         // the location for saving data that is larger than getSizeThreshold()  
    83.         factory.setRepository(tempPath);  
    84.           
    85.           
    86.           
    87.         //ServletFileUpload:负责处理上传的文件数据,并将每部分的数据封装成一到 FileItem 对象中。  
    88.         //在接收上传文件数据时,会将内容保存到内存缓存区中,如果文件内容超过了 DiskFileItemFactory 指定的缓冲区的大小,  
    89.         //那么文件将被保存到磁盘上,存储为 DiskFileItemFactory 指定目录中的临时文件。  
    90.         //等文件数据都接收完毕后,ServletUpload再从文件中将数据写入到上传文件目录下的文件中  
    91.           
    92.           
    93.         ServletFileUpload upload = new ServletFileUpload(factory);  
    94.         // maximum size before a FileUploadException will be thrown  
    95.         upload.setSizeMax(1000000 * 20);  
    96.           
    97.           
    98.         /*******************************解析表单传递过来的数据,返回List集合数据-类型:FileItem***********/  
    99.           
    100.         try {  
    101.               
    102.             List fileItems = upload.parseRequest(request);  
    103.               
    104.             String itemNo = "";  
    105.             //Iterator iter = fileItems.iterator()取其迭代器  
    106.             //iter.hasNext()检查序列中是否还有元素  
    107.             for (Iterator iter = fileItems.iterator(); iter.hasNext();) {  
    108.                 //获得序列中的下一个元素  
    109.                 FileItem item = (FileItem) iter.next();  
    110.                   
    111.               
    112.                 //判断是文件还是文本信息  
    113.                 //是普通的表单输入域  
    114.                 if(item.isFormField()) {  
    115.                     if ("itemNo".equals(item.getFieldName())) {  
    116.                         itemNo = item.getString();  
    117.                     }  
    118.                 }  
    119.                 //是否为input="type"输入域  
    120.                 if (!item.isFormField()) {                    
    121.                     //上传文件的名称和完整路径  
    122.                     String fileName = item.getName();  
    123.                       
    124.                     long size = item.getSize();  
    125.                     //判断是否选择了文件  
    126.                     if ((fileName == null || fileName.equals("")) && size == 0) {  
    127.                         continue;  
    128.                     }  
    129.                     //截取字符串 如:C:\WINDOWS\Debug\PASSWD.LOG  
    130.                     fileName = fileName.substring(fileName.lastIndexOf("\\") + 1, fileName.length());  
    131.                       
    132.                      // 保存文件在服务器的物理磁盘中:第一个参数是:完整路径(不包括文件名)第二个参数是:文件名称     
    133.                     //item.write(file);  
    134.                     //修改文件名和物料名一致,且强行修改了文件扩展名为gif  
    135.                     //item.write(new File(uploadPath, itemNo + ".gif"));  
    136.                     //将文件保存到目录下,不修改文件名  
    137.                     item.write(new File(uploadPath, fileName));  
    138.                       
    139.                       
    140.                       
    141.                     //将图片文件名写入打数据库                    
    142.                     itemManager.uploadItemImage(itemNo, fileName);  
    143.                       
    144.                 }  
    145.             }  
    146.             response.sendRedirect(request.getContextPath() + "/servlet/item/SearchItemServlet");  
    147.         } catch (Exception e) {  
    148.             e.printStackTrace();  
    149.             throw new ApplicationException("上传失败!");  
    150.         }     
    151.           
    152.           
    153.     }  
    154.       
    155.   
    156. }  


    该类继承了AbstractItemServlet: 所有物料Servlet的抽象父类,负责实例化ItemManager

    [java] view plain copy
    1. /** 
    2.  * 所有物料Servlet的抽象父类,负责实例化ItemManager 
    3.  * @author LiMin 
    4.  * 
    5.  */  
    6. public abstract class AbstractItemServlet extends HttpServlet {  
    7.   
    8.     //虽然不是线程安全的,但是如果只读的话,是不会有错误的  
    9.     protected ItemManager itemManager = null;  
    10.           
    11.     @Override  
    12.     public void init() throws ServletException {  
    13.         itemManager = new  ItemManagerImpl()  
    14.     }  
    15.       
    16.   
    17. }  
      

      ItemManagerImpl是实现了ItemManager接口的子类。这种设计模式有一个问题,有待遇优化,但这里为了说明图片上传,不多做无关的赘述。


    总结:

      关于init()初始化方法:

      在Servlet初始化的时候,就动态创建目录,这里是把一个upload和临时文件tempPath创建到了tomcat的webapps下的项目的跟目录中。

      值得注意点是这里需要显示调用super.init()方法(super不是父类对象的引用,但是负责父类的方法的调用),否则,可能会造成该类的空指针。

      上传大致分三步执行:使用 FileUpload 组件解析表单;解析表单传递过来的数据,返回List集合数据-类型:FileItem;最后上传图片。

      使用FileItem的isFormField()方法判断是普通文本还是文件;

      使用FileItem.write(new File(uploadPath, fileName))上传文件,第一个参数是:完整路径(不包括文件名)第二个参数是:文件名称;

     处理普通文本数据:

     if ("itemNo".equals(item.getFieldName())) {
    itemNo = item.getString();
     } 

      上传是很多年比较成熟的技术,有很多已经封装好的,我们平时的项目中可以直接拿来用,但是了解一些基本的原理是必不可少的。


    展开全文
  • 目的:选择图片,进行图片回显之后将图片保存到服务器上(PS:没有使用任何插件,样式很丑)实现方式:js+servlet+jsp的方式来实现事先准备:文件上传处理在浏览器中是以流的形式提交到服务器端的,直接用Servlet获取...

    目的:选择图片,进行图片回显之后将图片保存到服务器上(PS:没有使用任何插件,样式很丑)

    d222fffa81090b70c6a074c1f0d603b1.png

    实现方式:

    js+servlet+jsp的方式来实现

    事先准备:

    文件上传处理在浏览器中是以流的形式提交到服务器端的,直接用Servlet获取文件上传的输入流然后再解析里面的请求参数比较麻烦,一般采用apach组织提供的开源工具common-fileupload这个文件上传组件,common-fileupload是依赖于common-io这个包的,所以还需要下载这个包。struts封装的上传功能就是基于它们

    f6c03bf27e0cb5ba1235e9d37d4e1ec4.png

    前台jsp代码:


    上传文件目录:

    给file控件绑定一个onchange事件,在前台写js获取file的地址,然后回显(不同的浏览器以及版本在获取file控件框里的方式可能有区别,要考虑兼容性问题,因此在2中写ajax,从后台传url的json数据过来,这种方式不用考虑兼容性问题)

    //图片回显+图片格式+文件类型

    functionshowPic(obj) {var newPreview = document.getElementById('picture');if(obj) {//ie浏览器兼容

    if (window.navigator.userAgent.indexOf("MSIE") >= 1) {

    obj.select();

    newPreview.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";var path =document.selection.createRange().text;var flag =judgeImgSuffix(path);if(flag) {

    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =document.selection.createRange().text;

    }else{

    alert("要求图片格式为png,jpg,jpeg,bmp");

    }return;

    }//firefox浏览器兼容

    else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {if(obj.files) {

    newPreview.src= window.URL.createObjectURL(obj.files.item(0));return;

    }

    newPreview.src=obj.value;return;

    }

    newPreview.src=obj.value;return;

    }

    }functionjudgeImgSuffix(path) {var index = path.lastIndexOf('.');var suffix = "";if (index > 0) {

    suffix= path.substring(index + 1);

    }if ("png" == suffix || "jpg" == suffix || "jpeg" ==suffix|| "bmp" == suffix || "PNG" == suffix || "JPG" ==suffix|| "JPEG" == suffix || "BMP" ==suffix) {return true;

    }else{//alert("请上传正确到的图片格式");

    return false;

    }

    }

    serlet处理代码

    packagehttp_homework;importjava.io.File;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.InputStream;importjava.util.List;importjava.util.UUID;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.http.HttpSession;importorg.apache.commons.fileupload.FileItem;importorg.apache.commons.fileupload.FileUploadBase;importorg.apache.commons.fileupload.ProgressListener;importorg.apache.commons.fileupload.disk.DiskFileItemFactory;importorg.apache.commons.fileupload.servlet.ServletFileUpload;public class UploadHandleServlet extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

    HttpSession session=request.getSession();//得到上传文件的保存目录,将上传的文件存放于WEB-INF目录下,不允许外界直接访问,保证上传文件的安全

    String savePath = this.getServletContext().getRealPath("/WEB-INF/upload");//上传时生成的临时文件保存目录

    String tempPath = this.getServletContext().getRealPath("/WEB-INF/temp");

    File tmpFile= newFile(tempPath);if (!tmpFile.exists()) {//创建临时目录

    tmpFile.mkdir();

    }//消息提示

    String message = "";try{//使用Apache文件上传组件处理文件上传步骤://1、创建一个DiskFileItemFactory工厂

    DiskFileItemFactory factory = newDiskFileItemFactory();//设置工厂的缓冲区的大小,当上传的文件大小超过缓冲区的大小时,就会生成一个临时文件存放到指定的临时目录当中。

    factory.setSizeThreshold(1024 * 100);//设置缓冲区的大小为100KB,如果不指定,那么缓冲区的大小默认是10KB//设置上传时生成的临时文件的保存目录

    factory.setRepository(tmpFile);//2、创建一个文件上传解析器

    ServletFileUpload upload = newServletFileUpload(factory);//监听文件上传进度

    upload.setProgressListener(newProgressListener() {public void update(long pBytesRead, longpContentLength,intarg2) {

    System.out.println("文件大小为:" + pContentLength + ",当前已处理:"

    +pBytesRead);/*** 文件大小为:14608,当前已处理:4096 文件大小为:14608,当前已处理:7367

    * 文件大小为:14608,当前已处理:11419 文件大小为:14608,当前已处理:14608*/}

    });//解决上传文件名的中文乱码

    upload.setHeaderEncoding("UTF-8");//3、判断提交上来的数据是否是上传表单的数据

    if (!ServletFileUpload.isMultipartContent(request)) {//按照传统方式获取数据

    return;

    }//设置上传单个文件的大小的最大值,目前是设置为1024*1024字节,也就是1MB

    upload.setFileSizeMax(1024 * 1024);//设置上传文件总量的最大值,最大值=同时上传的多个文件的大小的最大值的和,目前设置为10MB

    upload.setSizeMax(1024 * 1024 * 10);//4、使用ServletFileUpload解析器解析上传数据,解析结果返回的是一个List集合,每一个FileItem对应一个Form表单的输入项

    List list =upload.parseRequest(request);for(FileItem item : list) {//如果fileitem中封装的是普通输入项的数据

    if(item.isFormField()) {

    String name=item.getFieldName();//解决普通输入项的数据的中文乱码问题

    String value = item.getString("UTF-8");//value = new String(value.getBytes("iso8859-1"),"UTF-8");

    System.out.println(name + "=" +value);

    }else {//如果fileitem中封装的是上传文件//得到上传的文件名称,

    String filename =item.getName();

    System.out.println(filename);if (filename == null || filename.trim().equals("")) {//session.setAttribute("image_path", filename);

    continue;

    }//注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如://c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt//处理获取到的上传文件的文件名的路径部分,只保留文件名部分

    filename = filename.substring(filename.lastIndexOf("\\") + 1);//得到上传文件的扩展名

    String fileExtName =filename.substring(filename

    .lastIndexOf(".") + 1);//如果需要限制上传的文件类型,那么可以通过文件的扩展名来判断上传的文件类型是否合法

    System.out.println("上传的文件的扩展名是:" +fileExtName);//获取item中的上传文件的输入流

    InputStream in =item.getInputStream();//得到文件保存的名称

    String saveFilename =makeFileName(filename);//得到文件的保存目录

    String realSavePath =makePath(saveFilename, savePath);//创建一个文件输出流

    FileOutputStream out = newFileOutputStream(realSavePath+ "\\" +saveFilename);//创建一个缓冲区

    byte buffer[] = new byte[1024];//判断输入流中的数据是否已经读完的标识

    int len = 0;//循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据

    while ((len = in.read(buffer)) > 0) {//使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\"//+ filename)当中

    out.write(buffer, 0, len);

    }//关闭输入流

    in.close();//关闭输出流

    out.close();//删除处理文件上传时生成的临时文件//item.delete();

    message = "文件上传成功!";

    }

    }

    }catch(FileUploadBase.FileSizeLimitExceededException e) {

    e.printStackTrace();

    request.setAttribute("message", "单个文件超出最大值!!!");

    request.getRequestDispatcher("/message.jsp").forward(request,

    response);return;

    }catch(FileUploadBase.SizeLimitExceededException e) {

    e.printStackTrace();

    request.setAttribute("message", "上传文件的总的大小超出限制的最大值!!!");

    request.getRequestDispatcher("/message.jsp").forward(request,

    response);return;

    }catch(Exception e) {

    message= "文件上传失败!";

    e.printStackTrace();

    }

    session.setAttribute("message", message);

    response.sendRedirect(request.getContextPath()+"/message.jsp");//request.getRequestDispatcher("/message.jsp").forward(request, response);

    }private String makeFileName(String filename) { //2.jpg//为防止文件覆盖的现象发生,要为上传文件产生一个唯一的文件名

    return UUID.randomUUID().toString() + "_" +filename;

    }privateString makePath(String filename, String savePath) {//得到文件名的hashCode的值,得到的就是filename这个字符串对象在内存中的地址

    int hashcode =filename.hashCode();int dir1 = hashcode & 0xf; //0--15

    int dir2 = (hashcode & 0xf0) >> 4; //0-15//构造新的保存目录

    String dir = savePath + "\\" + dir1 + "\\" + dir2; //upload\2\3//upload\3\5//File既可以代表文件也可以代表目录

    File file = newFile(dir);//如果目录不存在

    if (!file.exists()) {//创建目录

    file.mkdirs();

    }returndir;

    }public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {

    doGet(request, response);

    }

    }

    补充知识点:

    form表单enctype="multipart/form-data",form表单enctype(编码类型)有三种,当要传输非文本框的数据时,应该用multipart/form-data,以二进制数据流的方式传输

    3677b875d83f9368ca9c7b41b32aa91c.png

    window.navigator.userAgent.indexOf("Firefox") >= 1是js方式获取浏览器的名称,详情可见博客:https://www.cnblogs.com/feng18/p/6562168.html

    window.URL.createObjectURL(obj.files.item(0))是js获取火狐上传文件路径的完整地址,IE又有它自己的一套

    后台处理的java:

    当表单设置为multipart/form-data传输数据时,不能用request.getParameter("xxx")来获取数据了,因为它传输的是二进制文件了。

    整体这么几个步骤:1.创建DiskFileItemFactory文件上传工厂,设置文件保存路径,临时路径,缓冲区大小

    2.创建ServletFileUpload文件解析对像,解析过程中可以监听进度,解析字符编码防止中文乱码,设置上传单个文件大小,总文件的大小

    3.使用解析器对上传内容进行解析,将其划分成普通数据和上传文件(MP3,图片,视频等),在分别对其操作

    展开全文
  • 目的:选择图片,进行图片回显之后将图片保存到服务器上(PS:没有使用任何插件,样式很丑) 实现方式: js+servlet+jsp的方式来实现 事先准备: 文件上传处理在浏览器中是以流的形式提交到服务器端的,直接用...
  • 图片上传回显后端篇我们先看一下效果继上一篇的图片上传回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传文件,是以什么样的形式上传到服务器,难道也是一张...
  • 图片上传回显后端篇我们先看一下效果图片上传回显后端篇继上一篇的图片上传回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传文件,是以什么样的形式上传到...
  • 文件上传 ,图片回显

    2020-09-04 20:26:52
    1 文件上传入门案例 1.1 文件上传页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE ...
  • java里的图片上传回显方法

    千次阅读 2018-09-09 19:31:48
    java里的图片上传回显方法   整体流程:  在前端页面中通过input标签的type属性值为file方式上传文件,通过ajax异步提交的方式实现页面里图片的实时显示。后台采用servlet方式,判断前端页面的提交数据的方式...
  • (一)前台 —ajax-------表单内容 ...多文件上传,上传框的name要都一样,等于发送了一个MultipartFile[]数组 ```css <form id="test" enctype="multipart/form-data" > <div class="clear...
  • 本文是《页面ajax上传图片后,后台上传图片服务器后回显》发出后,很多网友说,不能多图片上传的。所以,本篇介绍多图片上传。解决思路:先获取MultipartFile multipartFile 对象。在进行循环遍历得到单个对象。首先...
  • java】批量上传图片回显功能

    万次阅读 热门讨论 2017-06-14 19:31:03
    在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能。可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到。 二、上传...
  • 原理:上传图片,记录图片保存的路径,把图片的宽高,及路径返回前台页面,实现图片的回显 /** * 文件上传的类 * * {"error":0, * "url":"图片的保存路径", * "width":...
  • java 上传文件到服务器+回显图片文件input可以为空 common-fileupload依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> ...
  • 1.图解实现文件上传的步骤 2.上传文件的接口MultipartFile接口 MultipartFile是一个接口(abstract interface) public interface MultipartFile /** A representation of an uploaded file received in a multipart...
  • Springboot+ajax上传文件+ajax异步上传文件实现上传头像以及回显功能这是我第一次在CSDN上分享自己的一些学习成果,这次我想分享一些关于头像上传功能自己的一些想法。大家有什么不同的想法欢迎下面评论。实现功能的...
  • 图片上传回显后端篇

    千次阅读 2018-05-16 22:11:04
    继上一篇的图片上传回显,我们来实战一下图片上传的整个过程,今天我们将打通前后端,我们来真实的了解一下,我们上传文件,是以什么样的形式上传到服务器,难道也是一张图片?等下我们来揭晓 我们在实战开始前...
  • 本文是基于Windows下Java解决UEditor自定义图片/文件上传路径问题,文件保存在本地磁盘,Tomcat做了虚拟路径映射。 UEditor官网:https://ueditor.baidu.com/website/index.html 下载地址:...
  • 对于java文件上传大家应该都接触过,无非是将文件以什么什么形式上传到某个文件夹中,所以重要的是将其回显。原本是想将他上传到项目中的/static/文件夹下,因为这个文件夹下的文件可以直接被springboot引用,但是...

空空如也

空空如也

1 2 3 4 5
收藏数 84
精华内容 33
关键字:

java文件上传图片回显

java 订阅