• 图片预览上传


    框架:Struts2、Spring、MyBatis 

    需求简介:

    [新建页面] 可添加多张图片,只显示一张,添加后显示在页面列表中,可删除,可切换预览。

    [编辑页面] 功能同上。

     

    页面设计:

     

    预览图

    xxxxx1.jpg 删除

    xxxxx2.jpg 删除

    添加文件

     

    技术点:

    1. 本地图片上传后在jsp页面中预览。js

    2.服务器读硬盘文件,显示到jsp。java

    3.jsp提交包含文件表单不刷新。easyUI

     

    ---------------------------------------------------割不割-----------------------------------------------------------

     

     

    1. 关键字: FileReader

    • INPUT type=file 元素
    • 必须为 INPUT type=file 元素指定NAME 标签属性的值。
    • FORM 元素 METHOD 标签属性的值必须设置为post。
    • FORM 元素 ENCTYPE 标签属性的值必须设置为multipart/form-data。  
    //要处理上载到服务器的文件,服务器端进程必须可以处理 multipart/form-data 的提交。
    //标签属性 value 当文本通过用户输入设置后获取 input 对象的文件名。
    //C:Documents and SettingsAdministratorMy DocumentsMy Picturesak.jpg
    //obj.value 为 C:fakepathak.jpg  虚假路径,文件名正确。

     

    <form name="myform" action="post.do" enctype="multipart/form-data" method="post">
    <input type="file" name="file1"/>
    <input type="submit" value="上传文件">
    </form>

     

    var reader = new FileReader(); 
     reader.onload = function(e){
                        document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
                    } 
    reader.readAsDataURL(fileObj.files[0]);
    解读file:
    obj.file // undefined
    obj.files // [object FileList]
    obj.files[0] //[object File]
    // 一个input支持多个文件
    obj.files[0] 包含的信息:
    webkitRelativePath:
    lastModifiedDate:Fri Jan 16 2015 16:38:56 GMT+0800 (中国标准时间)
    name:a1.png
    type:image/png
    size:7144
    slice:function slice() { [native code] }

    2.jsp img 标签设置
    <img src="showPic.do" /> 

    3. struts.xml 文件配置

    <result name="pic" type="stream">  
        <param name="inputName">inputStream</param>  
        <param name="contentType">image/jpeg</param>  
        <param name="bufferSize">2048*2048</param>  
    </result> 

    附:result-types

    <result-types>  
    <result-type name="chain" class="com.opensymphony.xwork2.ActionChainResult"/>  
    <result-type name="dispatcher" class="org.apache.struts2.dispatcher.ServletDispatcherResult" default="true"/>  
    <result-type name="freemarker" class="org.apache.struts2.views.freemarker.FreemarkerResult"/>  
    <result-type name="httpheader" class="org.apache.struts2.dispatcher.HttpHeaderResult"/>  
    <result-type name="redirect" class="org.apache.struts2.dispatcher.ServletRedirectResult"/>  
    <result-type name="redirectAction" class="org.apache.struts2.dispatcher.ServletActionRedirectResult"/>  
    <result-type name="stream" class="org.apache.struts2.dispatcher.StreamResult"/>  
    <result-type name="velocity" class="org.apache.struts2.dispatcher.VelocityResult"/>  
    <result-type name="xslt" class="org.apache.struts2.views.xslt.XSLTResult"/>  
    <result-type name="plainText" class="org.apache.struts2.dispatcher.PlainTextResult" />  
    </result-types>  

    4. java action配置

    InputStream inputStream;
    getter ...
    setter ...
    
    public showPic (){
    inputstream = ...
    return "pic"
    }

    5. 让表单(form)成为 ajax 提交的表单(form)

    easyUI 插件 Form表单

    http://www.jeasyui.net/plugins/166.html

    var options = {
                success: function (dataStr){
                        ...
                    }
            }
    $("#myform").form("submit",options);// 此处options 为json

     如返回jsonString  可通过 eval('(' + dataStr + ')'); 转为json对象

    6.关键字:Array

    var fileNameArray = new Array();

    push(fileName); // 添加元素

    pop();//弹出最右一个,即顶部,看作桶,有底

    shift(); // 移除数组第一个元素

    var array = new Array();
    array.push(1);
    array.push(2);
    array.push(3);
    array.pop();
    alert(array.join(",")); // 1,2
    var array = new Array();
    array.push(1);
    array.push(2);
    array.push(3);
    array.shift();
    alert(array.join(",")); //2,3

     移除元素N

    var array = new Array();
    array.push("a");
    array.push("b");
    array.push("c");
    array.push("d");
    array.splice(array.indexOf("b"),1);
    alert(array.join(",")); //a,c,d 
    var array = new Array();
    array.push("a");
    array.push("b");
    array.push("c");
    array.push("d");
    array.pop();
    array.shift();
    alert(array.length); //2

    7.关键字:file

    java.io.File file = ...;
    file.length(); //long 文件大小

     

    File file = new File(filePath);
    // 删除返回true ,再次删除返回false,目标文件不存在(路径存在new、file不存在)返回false
    file.delete();

     

    //文件删除

    // 1.已存在文件夹: old
    // 2.目标文件夹: new
    // 3.mkdir :创建最右单个文件夹,只一个new
    // 4.mkdirs:依次创建多个文件夹
    // 5.只要有一个new被创建则返回true
    // 6.二次执行 mkdir or mkdirs 时,返回false,不创建文件夹。
    // 7.mkdir or mkdirs 不能创建file.txt文本文件 ,会生成名为file.txt 的文件夹
    // 8.1.方法createNewFile会抛出io异常
    // 例如:包含非法字符时:文件名、目录名或卷标语法不正确。
    // 例如:路径中存在new时:系统找不到指定的路径。
    // 8.2方法createNewFile 二次执行时,返回false,不创建文件。
    //----------------------------

     

    File d1 = new File("D:\old\new\new");  
    d1.mkdir();
    // return false 未创建
    File d2 = new File("D:\old\new\new");
    d2.mkdirs();
    // return true 创建成功
    File d3 = new File("D:\old\new");
    d3.mkdir();
    // return true 创建成功
    File f1 = new File("D:\old\new.txt");
    try { f1.createNewFile();} catch (IOException e) { e.printStackTrace();}

     

       /**
         * File -> byte[]
         * 
         * @param file
         */
        public byte[] file2ByteArray(File file) throws FileNotFoundException,IOException {
    
            byte[] buf = null;
            FileInputStream fis = null;
            ByteArrayOutputStream baos = null;
            try {
                fis = new FileInputStream(file);
                baos = new ByteArrayOutputStream(1024 * 1024);
                byte[] b = new byte[1024 * 1024];
                int l;
                while ((l = fis.read(b)) != -1) {
                    baos.write(b, 0, l);
                }
                baos.flush();
                buf = baos.toByteArray();
            } catch (FileNotFoundException e) {
                //logger.info("文件[" + file + "]未找到!");
                throw e;
            } catch (IOException e) {
                //logger.info("文件[" + file + "]读写错误!" + e.getMessage());
                throw e;
            } finally {
                try {
                    if (fis != null) {
                        fis.close();
                    }
                    if (baos != null) {
                        baos.close();
                    }
                } catch (IOException e) {
                    throw e;
                }
            }
            return buf;
        }

     

       /**
         * 
         * @param filePath  \user\
         * @param fileName  file.jpg
         * @param byteArray 
         * */
        public String fileWrite(String filePath, String fileName, byte[] byteArray) {
            
            // 目标文件夹
            File dir = new File(filePath);
            // 创建文件夹
            dir.mkdirs();
            
            String f = filePath + File.separator + fileName;
            // 目标文件
            File file = new File(f);
            
            // 如果文件存在返回
            if (file.exists()) {
                return "文件["+f+"]已存在";
                // or 
                // file.delete();
            }
            // 文件输出流
            FileOutputStream fos = null;
            try {
                // 输出目标
                fos = new FileOutputStream(filePath + File.separator + fileName);
                // 输出
                fos.write(byteArray);
                fos.flush();
            } catch (FileNotFoundException e) {
                return "文件["+f+"]未找到";
            } catch (IOException e) {
                return "文件["+f+"]读写错误";
            } finally {
                try {
                    // 关闭
                    if(fos!=null){
                        fos.close();
                    }
                } catch (IOException e) {
                    return "文件输出流关闭时异常";
                }
            }
            return null;
        }

     

    // 文件复制

    fileWrite("D:\old","new.png",file2ByteArray(new File("D:\old\old.png")));

    // 文件分割符

    //linux  读取文件如果路径中存在反斜杠 \ ,会不能正常读取。

    File.separator

    Linux下为 /

    Windows 下为

     

     
  • 相关阅读:
    Ajax组件(wagang版)
    动画组件(wagang版)之基础篇:跳帧与延时
    Ajax组件(wagang版)之无依赖化
    ✍23 postgresql批量删除表
    ✍20 samba共享服务
    ✍16 asyncio异步IO
    ✍19 Tensonfow(GPU)使用
    ✍25 mysqlclient 安装(linux,mac)
    ✍17 aiohttp模块的使用
    ✍18 Linnux上安装node.js
  • 原文地址:https://www.cnblogs.com/zno2/p/4496384.html
Copyright © 2020-2023  润新知