valums file-uploader: js文件上传组件

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

}

完。