valums file-uploader: js文件上传组件
2012-08-04 18:03
387 查看
valums file-uploader 是一个小巧的文件上传插件。
使用XHR,支持多文件上传,并有进度条( FF3.6+, Safari4+, Chrome,如果不行其它浏览器中将用iframe)。因此,它能提供很好的用户体验。
点击这里Demo。
特色
[b]*****************************************************************
[/b]
多文件上传,进度条
在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.
最简单的示例
*****************************************************************
其它选项
*****************************************************************
实例方法
*****************************************************************
添加参数
发送额外的参数
*****************************************************************
要向服务器传递参数,使用params。
如果要根据状态改变参数,使用
在 onSubmit 回调函数中可以放心的使用.
本文由尤慕译自这里。
下面是译者写的一个接收文件上传的Servlet,只要在web.xml中正确配置即可。
完。
使用XHR,支持多文件上传,并有进度条( FF3.6+, Safari4+, Chrome,如果不行其它浏览器中将用iframe)。因此,它能提供很好的用户体验。
点击这里Demo。
特色
[b]*****************************************************************
[/b]
多文件上传,进度条
在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(); } }
完。
相关文章推荐
- fine uploader文件上传JS组件
- webuploader组件的使用以及文件上传下载后台处理
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- Bootstrap fileinput.js,最好用的文件上传组件
- JS动态添加文件上传组件 struts2
- 多文件上传 file-uploader.js
- 黄聪:一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)
- Fine Uploader文件上传组件
- Fine Uploader文件上传组件
- vue2.0使用weui.js的uploader组件上传图片
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- .NET FileUploader(C# and VB)[ASP.NET 大文件上传组件感冒奉献版]
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- 收藏个支持进度条与文件拖拽上传的js File Uploader
- asp.net中Fine Uploader文件上传组件使用介绍
- webuploader+springmvc实现多文件上传(html+js+css原创,后台代码借鉴)
- Bootstrap fileinput.js,最好用的文件上传组件
- Bootstrap fileinput.js,最好用的文件上传组件
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
- JS组件系列——Bootstrap文件上传组件:bootstrap