码迷,mamicode.com
首页 > Web开发 > 详细

图片预览上传

时间:2016-08-05 19:44:20      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

框架: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 Settings\Administrator\My Documents\My Pictures\ak.jpg
//obj.value 为 C:\fakepath\ak.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 下为 \

 

 

图片预览上传

标签:

原文地址:http://www.cnblogs.com/zno2/p/4496384.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!