jquery 实现文件异步上传

前言

这里用了 2 个 JS 插件，一个是 Jquery 原生 js，我的版本是 jquery-1.7.2.min.js，另一个是 jquery.form.js。这个 form.js 是关键，不可少哦。另外，

我的服务器端用的是 Play Framework,版本是 2.1。下面是代码部分，贴出的是关键部分：

前端代码 html:

<form id="form1" method="POST" action="/image/upload" ENCTYPE="multipart/form-data">
　　<input id="uploadFile" type="file" name="myfile" />
</from>

Javascript:

$("#uploadFile").change(function(){
    var message = "t";
    $("#form1").ajaxSubmit({
        method : "POST",
        success : function(data){
                //成功　　　　　　　　　　　　　　　 if(data == "ok"){
　　　　　　　　　　alert("上传成功")
　　　　　　　　}else{　　　　　　　　　　alert("上传失败");　　　　　　　　}
        },
        error : function(){
                alert("网络错误，请稍后重新尝试！");
        }
    });
});

服务端代码

public static void upload(File myfile){
    String msg = "fail";
    try{
        //图片写入路径,此处我的位置是项目的根目录
        File temp = new File(myfile.getName());
        //输入文件流
        FileInputStream input = new FileInputStream(myfile);
        //输出文件流
        FileOutputStream out = new FileOutputStream(temp);

        //每次写入的字节的大小
        byte [] b = new byte[1024];
        //文件长度
        int n;

        while((n=input.read(b)) != -1){
            //写入字节
            out.write(b, 0, n);
        }

        input.close();
        out.flush();
        out.close();
        msg = "ok";
    }catch(Exception e){
        Logger.error("Image.upload()", e.getMessage());
    }
    renderJSON(msg);
}

最后修改于 2013-08-07