valums file-uploader 是一个小巧的文件上传插件。
使用XHR,支持多文件上传,并有进度条( FF3.6+, Safari4+, Chrome,如果不行其它浏览器中将用iframe)。因此,它能提供很好的用户体验。
点击这里Demo。
特色
*****************************************************************
-
多文件上传,进度条
-
在FF, Chrome中支持拖拽(drag-and-drop)
-
支持取消
-
不依赖其它插件
-
无 Flash
-
在https下同样有效
-
在 FF, Chrome, Safari支持快捷键
-
测试通过: IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60
License
*****************************************************************
This plugin is open sourced under GNU GPL 2 or later and GNU LGPL 2 or later. If this license doesn't suit you mail me at andrew (at) valums.com.
最简单的示例
*****************************************************************
<div id="file-uploader">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<script src="fileuploader.js" type="text/javascript"></script>
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: 'FileUploadServlet'
});
}
window.onload = createUploader;
</script>
其它选项
*****************************************************************
// url应该在同一域名下
action: '/server/upload',
// 通过url传递的参数,名值对
params: {},
// 限制文件格式
// ex. ['jpg', 'jpeg', 'png', 'gif'] or [ ]
allowedExtensions: [ ],
// 限制文件大小,部分浏览器支持
sizeLimit: 0, // 最大值
minSizeLimit: 0, // 最小值
// 如果为true,服务器的输出将定向到控制台
debug: false,
// 事件处理,return false则中断提交
onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){ },
onComplete: function(id, fileName, responseJSON){ },
onCancel: function(id, fileName){},
messages: {
// error messages, see qq.FileUploaderBasic for content
},
showMessage: function(message){ alert(message); }
实例方法
*****************************************************************
添加参数
setParams(newParams)
发送额外的参数
*****************************************************************
要向服务器传递参数,使用params。
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
action: '/server-side.upload',
// additional data to send, name-value pairs
params: {
param1: 'value1',
param2: 'value2'
}
});
如果要根据状态改变参数,使用
uploader.setParams({
anotherParam: 'value'
});
在 onSubmit 回调函数中可以放心的使用.
下面是译者写的一个接收文件上传的Servlet,只要在web.xml中正确配置即可。
package org.aaron.upload;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class FileUploadServlet extends HttpServlet {
private static final long serialVersionUID = 6748857432950840322L;
private static final String DIR_PATH = "d:/upload";
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException {
PrintWriter writer = null;
InputStream is = null;// 上传文件的输入流
FileOutputStream fos = null;// 上传文件的输出流
String filename = request.getHeader("X-File-Name");
try {
writer = response.getWriter();
filename = URLDecoder.decode(filename, "utf-8");
System.out.println("文件名:" + filename);
is = request.getInputStream();
fos = new FileOutputStream(new File(DIR_PATH, filename));
byte[] bytes = new byte[1024];// 存放读取的文件数据
int len = is.read(bytes);
while (len > 0) {
fos.write(bytes, 0, len);// 将读取的数据写入到输出流
len = is.read(bytes);// 继续读取只到读完
}
response.setStatus(HttpServletResponse.SC_OK);
writer.print("{success: true}");
} catch (UnsupportedEncodingException ex) {
log(FileUploadServlet.class.getName() + "has thrown an exception: "
+ ex.getMessage());
} catch (FileNotFoundException ex) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
writer.print("{success: false}");
log(FileUploadServlet.class.getName() + "has thrown an exception: "
+ ex.getMessage());
} catch (IOException ex) {
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
writer.print("{success: false}");
log(FileUploadServlet.class.getName() + "has thrown an exception: "
+ ex.getMessage());
} finally {
try {
fos.close();
is.close();
} catch (IOException ignored) {
}
}
writer.flush();
writer.close();
}
}
完。