无刷新文件上传之一：传统iframe实现

 

要求：无刷新文件上传，验证图片格式，验证图片尺寸。

先建立一个表单页面：

<body>
    <form name="form1" action="/customer/login.do" method="post" id="form1"
        enctype="multipart/form-data" target="hidden_frame">
        <input name="file_img" type="file" value="" id="file_img" /> 
　　    <input type="submit" value="上传" name="upload" onclick="checkImage();" />
    </form>
    <p>提示：小于100K jpg、png、gif图片，图片尺寸：960*100</p>
    <div>
        <p class="tip">文件正在上传...</p>
        <img id="show_img" style="display: none;"
            src="" />
    </div>
    <iframe name='hidden_frame' id="hidden_frame" style='display: none;'></iframe>
</body>

当点击上传的时候，调用checkImage()方法，验证图片。如果通过，执行上传：

<script type="text/javascript">
    /**
        验证上传图片信息，并将图片提交到后台
        1、验证图片格式
        2、验证图片尺寸
        3、验证图片大小(如果大小不符，则提示；如果成功，则显示图片)
     */
    function checkImage() {
        var img, //待要上传的图片
        fileName = $('#file_img').val(), //图片名称
        fileType, //图片类型
        img_tag = $('#show_img'), //要显示的图片标签
        tip = $('.tip'), //提示标签
        check = true; //一个条件变量
        fileType = fileName.substring(fileName.lastIndexOf('.') + 1);
        //1、
        if (check && fileType != 'jpg' && fileType != 'png'
                && fileType != 'gif') {
            check = false;
            alert('图片格式不正确');
        }
        //2、
        if (check) {
            img = new Image();
            var src_img = 'file:///' + fileName;
            img_tag.attr('src', src_img);
            img.src = src_img;
            if (img.width != 960 || img.height != 100) {
                check = false;
                alert('图片尺寸不符合规定！');
            }
        }
        //3、
        if (check) {
            $('#form1').submit();
            tip.show();
        }
    }
    //后台返回后的回调函数
    function callback(s) {
        if (s == 'err') {
            $('.tip').hide();
            alert('图片必须小于100k');
        } else if (s == 'success') {
            $('#show_img').show();
            tip.hide();
        }
    }
</script>

这时候，表单提交到了iframe中，页面是没有刷新的。

后台我们struts2的upload插件实现文件自动转换，然后把内存中的文件取出放到指定位置：

public class LoginAction extends BaseAction {
    //文件
    private File file_img;
    //文件名
    private String file_imgFileName;
    //文件类型
    private String file_imgContentType;

    ...省略getter、setter

　　public String login() {
        String add = SUCCESS;
        if (file_img.length() > 100 * 1024) {
            add = outAjaxResult("<script>parent.callback('err');</script>");
        } else {
            boolean b = file_img.renameTo(new File("E:\\1.png"));
            System.out.println(b);
            add =
            outAjaxResult("<script>parent.callback('image.do');</script>");
        }
        return add;
    }
}

在后台输出一段script，以便于调用前台的回调函数：callback();

 

注：

　　1、JavaScript内置Image对象，可以使用这个对象获得图片的信息。

　　2、struts2接受文件，在文件字段名后面加Filename，则自动把前台文件名放如指定字段。加ContentType，则自动把前台文件类型放入指定字段。

　　3、此处实现的功能是：图片上传完成后，前台要显示上传的文件。我实现的思路是:后台返回一个action地址作为img标签地址，然后根据这个地址获得图片流信息，显示图片。链接地址：http://www.cnblogs.com/china-li/archive/2012/12/03/2799390.html

 

 

 

posted @ 2012-12-03 12:14  轩辕李  阅读(618)  评论(0)    收藏  举报