使用play!完成iframe无刷新上传文件

页面代码片段：

<form id="uploadform" name="uploadform" action="/manage/upload"  method="post" enctype="multipart/form-data">
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>

<p class="file"><input type="file" name="picupload" id="picupload" size="30"/>仅支持JPG、GIF图片文件，且文件小于2M。</p>
<p class="upload"><button class="btnstyle1" type="button" οnclick="uploadpic(this)">上传</button><span id="uploadcheck"></span></p></li>
<input type="hidden" name="uploadsubmit" value="上传" />

 

javascript脚本片段：

function uploadpic(obj){
    $('uploadform').target = 'upload_target';
    $('uploadform').submit();
}

//iframe回调的方法
function callback(s){
    $("userimage").src = s;
     var obj = $("picupload");

     //清除file控件内容
    obj.outerHTML+="";//适用于IE
    obj.value="";//适用Firefox
}

 

play!的Controller内接收上传的方法：

    public static void upload(File picupload){
        String ext=picupload.getName().substring(picupload.getName().lastIndexOf("."));
        String fileName=RandomStringUtils.random(8,true,true)+ext;
        File f=new File(Constants.uploadPath+fileName);
        picupload.renameTo(f);
        response.contentType="text/html; charset=utf-8";
        renderText("<script>parent.callback('/upload/"+fileName+"')</script>");
    }

说明：使用renderText方式的话response的Content-type是text/plain，纯文本方式，js脚本将不会执行，需要设置response的response.contentType="text/html; charset=utf-8"

或者新加一个html模板，使用render(fileName)的方式将文件名写入模板。