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); }
作者:Ziv小威
出处:http://imziv.com/
关于作者:专注于Java技术的程序员一枚,此外对JS开发保持着较高的兴趣。爱好音乐,阅读,FM等等。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
如有问题,可以邮件:wewoor@foxmail.com
微博:Ziv小威