jquery实现文件异步上传

时间:2023-03-10 01:08:41
jquery实现文件异步上传

前言

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

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

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("网络错误,请稍后重新尝试!");
}
});
});

2.服务端代码

    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);
}