图片上传那些事

时间：2014-05-08 23:45:00 阅读：446 评论：0 收藏：0 [点我收藏+]

标签：style blog class code java tar

简述：

一个项目上，之前已经做好了用flash上传图片的功能，但是现在因为客户端的限制，要求不用flash，可以使用html5，于是改造开始了。

先给出之前flash的界面：

bubuko.com,布布扣

需求：

上面的图片里面可以看出三个需求：

1. 文件选择按钮外观需要美化

2. 可以预览图片

3. 上传图片（上传后的图片存在形式需要与之前flash上传的一样，也就是说需要byte[]的形式）

用户上传图片之后，需要把新的图片显示到其他位置，所以还有一个需求：

4. 上传成功后调用回调函数

思考：

1. 文件选择按钮外观需要美化

　　这个问题比较容易，下面会直接给出方案。

2. 可以预览图片

　　这个问题对于html5来说也是小事一件，下面会给出方案。

3. 上传图片

4. 上传成功后调用回调函数

　　单纯的上传图片，使用form提交即可，与服务端交互之后调用回调函数也比较容易，ajax即可。但是如果要同时满足两个条件，问题来了：

　　P1 : form提交的方式如何回调？

　　p2 : ajax的方式如何上传图片？

oh，shit，dilemma problem...

解决方案：

1. 文件选择按钮外观需要美化

　　首先要有一个文件选择按钮： <input type="file" />

　　针对按钮本身去优化样式，应该是行不通的，所以目前比较流行的方式都是把按钮设置为透明的，然后覆盖在一个带有样式的“按钮”上。一个提供外观，一个提供文件选择功能。参考代码如下：

<style>
a {
    display: inline-block;
    width: 108px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url("fileChooser.jpg");
    position: relative;
    overflow: hidden;
}
input{
          position: absolute;
    right: 0;
    top: 0;
    font-size: 100px;
    opacity: 0;
    filter: alpha(opacity = 0);
    cursor: pointer;
}
</style>

<a href="#">
    <input type="file"/>
</a>

2. 可以预览图片

　　预览图片有两种方式，但其实都是殊途同归，就是如何获取到图片的url

　　2.1 使用FileReader把图片读到内存中，然后再获取以data：开头的图片数据，并设置给img的src中

<input type="file">
<img id="img">
<script type="text/javascript">
$("input").change(function(){
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e){
        $("#img").attr("src", reader.result);
    }
    reader.readAsDataURL(file);
});
</script>

　　　　有关FileReader的详情可以到 http://www.w3.org/TR/file-upload/#dfn-filereader 查看，这里暂时不详述了，之后再写一个专题介绍。

　　2.2 还可以使用createObjectURL方法来获取到图片的url来设置给img

<input type="file">
<img id="img">
<script type="text/javascript">
$("input").change(function(){
    var file = this.files[0];
    $("#img").attr("src", getObjectURL(file));
});
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

3. 上传图片

4. 上传成功后调用回调函数

　　这两个问题一起来说。

　　上面已经提到了，实际上根据上传+回调的需求，有两种解决方案，但是都会遇到各自的问题，而实际证明，两个问题都可以解决，并且都可以达到目的。我们都分析一下。

　　P1 : form提交的方式如何回调？

　　　　首先我们确定上传图片使用form提交的方式，这个时候遇到的问题是如何进行回调。

　　　　对于form提交，提交之后需要回调函数，并且参数是从服务端返回回来的这种情况下，都有一个统一的解法：

　　　　增加一个隐藏的iframe，让form提交的时候target指向这个iframe（这是response会返回内容到这个iframe），同时启动一个定时器去查看iframe是否被写完，写完之后，就可以调用回调函数了。

　　　　给一段伪代码：

<form id="form" action="some URL" target="hidenFrame" method="post">
    <input name="file" type="file">
</form>
<img id="img">
<button id="submit"></submit>
<iframe name="hidenFrame"></iframe>

<script type="text/javascript">
$("input").change(function(){
    var file = this.files[0];
    $("#img").attr("src", getObjectURL(file));
});
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
$("#submit").click(function(){
    var form = $("#form")[0];
    form.enctype = "multipart/form-data";
    if ($("input")[0].files.length) {
        form.submit();
        var interval = setInterval(
                function() {
                    var written = check();//check() is some code to check if response is written in iframe
                    if (written) {
                        callback();// call callback
                        clearInterval(interval);
                    }
                }, 100);
    } 
});

　　　　　　上述代码只有check（）部分没有给出，读者自行填充即可。一般可以在response里面写上一段javascript代码，其中定义一个方法，方法中返回回调函数所需的参数，interval中每次都检查

　　　　　　iframe里面是否已经定义了约定好的获取返回参数的方法，即可同时达到判断response是否已经完毕以及获取回调函数参数两个目的。

　　p2 : ajax的方式如何上传图片？

　　　　　ajax对回调来说非常容易，但是form上传到服务端的时候上传的是什么东西？如何构造数据才能传到服务端，让服务端解析？

　　　　　解决这个问题有一个很NB的方法，用FormData。（因为我在听说这个对象之前，做了很多工作来转换图片，以求达到跟form一样的格式传到服务端，所以觉得很NB）

　　　　　直接给出代码：

<form id="form" action="some URL" target="hidenFrame" method="post">
    <input name="file" type="file">
</form>
<img id="img">
<button id="submit"></submit>
<iframe name="hidenFrame"></iframe>

<script type="text/javascript">
$("input").change(function(){
    var file = this.files[0];
    $("#img").attr("src", getObjectURL(file));
});
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
$("#submit").click(function(){
    $.ajax({
        url: "some URL",
        async: true,
        type: "post",
        contentType:false,  //需要设置false，否则jquery会处理二进制数据，但我们不希望jquery处理
        processData:false,  //需要设置false，否则jquery会处理二进制数据，但我们不希望jquery处理
        data: new FormData($("#form")[0]),
        success: function(serverData){
            callback(serverData);
        }
    });
});

　　　　很明显的，使用FormData+ajax的方式对上传+回调的需求使用起来最简洁。

一些没提到的事情：

1. 服务端如何解析上传的图片

　　这个问题在上面没有提到，这里给出java的一个实现，其中因为最后存储图片以及获取图片路径的方法是公司内部的方法，贴出来也没什么用，所以给隐去了，但骨架如下：

import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.Iterator;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


public class PortraitRequestHandler implements JspRequestHandler {
    @Override
    public void handle(HttpServletRequest request, HttpServletResponse response) throws Throwable {
        
        try {
            request.setCharacterEncoding("GBK");
        } catch (UnsupportedEncodingException e1) {
            e1.printStackTrace();
        }
        // 文件上傳部分
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);
        if (isMultipart == true) {
            try {
                FileItemFactory factory = new DiskFileItemFactory();
                ServletFileUpload upload = new ServletFileUpload(factory);

                // 得到所有的表单域，它们目前都被当作FileItem
                List<FileItem> fileItems = upload.parseRequest(request);
                Iterator<FileItem> iter = fileItems.iterator();

                // 依次处理每个表单域
                while (iter.hasNext()) {
                    FileItem item = (FileItem) iter.next();
                    if (!item.isFormField()) {// 如果是上传域
                        // 获得文件名及路径
                        String fileName = item.getName();
                        if (fileName != null) {
                            
                            byte[] b = new byte[(int) item.getSize()];
                            item.getInputStream().read(b);
                            // 这里b就是图片的内容，可以调用需要的方法存储
                        }
                    }
                }
                PrintWriter out = response.getWriter();
                out.append("/* 这里返回刚上传图片的访问路径 */");
            } catch (Exception e) {
                e.printStackTrace();
            }
        } 
    }

}