<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>文件上传</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="/js/jquery/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery/jquery.json-2.2.min.js"></script> <script type="text/javascript" src="/js/jquery/plupload/plupload.js"></script> <script type="text/javascript"src="/js/jquery/plupload/plupload.gears.js"></script><script type="text/javascript" src="/js/jquery/plupload/plupload.flash.js"></script></head><body style="overflow: auto;"> <form id="form_files" action="/servlet/pluploadServlet" method="post"> <input type="button" id="pickfiles" class="ButtonAccessory" value="添加" /><input type="button" id="uploadfiles" class="ButtonUpload" value="上传" /><table id="filelist"><tbody></tbody></table><div id="error"></div> </form></body></html>
<script type="text/javascript"> $(function() { var uploader = new plupload.Uploader({ runtimes : 'gears,flash', browse_button : 'pickfiles', //选择文件按钮ID max_file_size : '10mb', //文件上传最大值 chunk_size : '1mb',//文件需要分块上传时，每块的大少 unique_names : true, // 上传的文件名是否唯一,只有在未进行分块上传时文件名唯一才有效 url : '/servlet/uploadServlet', //提交到后台的url地址 flash_swf_url : '/js/jquery/plupload/plupload.flash.swf',//plupload.flash.swf文件所在路径 silverlight_xap_url : '/js/jquery/plupload/plupload.silverlight.xap',//silverlight所在路径 filters : [ //文件类型过滤，只上传指定的文件类型 {title : "Image files", extensions : "jpg,gif,png"}, {title : "Zip files", extensions : "zip"} ] , resize : {width : 100, height : 80, quality : 70} //上传图片时,是否生成缩略图}); /*在实际使用中根据需要对上述属性进行删、减,* 如chunk_size、unique_names、silverlight_xap_url、resize*//*页面打开时进行初始化界面,如加载已经上传的文件信息*/uploader.bind('Init', function(up) { $('#filelist tbody').html("<tr><td>暂无上传文件</td></tr>"); }); /*单击【上传】按钮时触发该函数，进行文件上传(其中uploadfiles为上传按钮ID值)*/$('#uploadfiles').click(function(e) { uploader.start(); }); /* *绑定事件:FilesAdded(up:Uploader, files:Array) * *当选择上传文件时调用该函数; * *其中, *files为本次选择的文件列表； *up对象中的files属性表示上传队列中的总文件列表(不包括本次选择的文件) * * 通过这两个对象可以判断所选文件中是否有重复。 */uploader.bind('FilesAdded', function(up, files) { $.each(files, function(i, file) { $('#filelist tbody').append( //将选择的文件添加到页面'<tr id="'+file.id+'"><td>'+file.name+'</td><td>'+plupload.formatSize(file.size)+'</td><td><b></d></td></tr>') }); up.refresh(); // Reposition Flash/Silverlight }); /**绑定事件:UploadProgress(uploader:Uploader, file:File)*当单击上传按钮时，处理每个文件的上传进度*/ uploader.bind('UploadProgress', function(up, file) { $('#' + file.id + " b").html('<span>'+file.percent + "%</span>"); }); /**绑定事件:Error(uploader:Uploader, error:Object)**/ uploader.bind('Error', function(up, err) { $('#error').append("<div>Error: " + err.code + ", Message: " + err.message +(err.file ? ", File: " + err.file.name : "") + "</div>"); up.refresh(); // Reposition Flash/Silverlight }); /**绑定事件:FileUploaded(uploader:Uploader, file:File, response:Object)*当文件上传成功后，将进度条显示100%*/ uploader.bind('FileUploaded', function(up, file) { $('#' + file.id + " b").html("100%"); }); /* *绑定事件:UploadFile(uploader:Uploader, file:File) *当单击上传按钮时，首先触发该事件,如果没有要处理的可以不添加该事件 */ uploader.bind('UploadFile',function(up,file){alert(file.name); }); //uploader.init();}); </script>Plupload API：http://www.plupload.com/plupload/docs/api//*上传文件Servlet后台简单处理*//*LIB目录下需要添加包commons-fileupload-1.2.jarcommons-io-1.4.jar*///判断上传表单是否为上传表单类型,即multipart/form-databoolean isMultipart = ServletFileUpload.isMultipartContent(req);public static final String UPLOADDIR="d:/test/";public static final int BUF_SIZE = 4096;if (isMultipart) {ServletFileUpload upload = new ServletFileUpload();try {FileItemIterator iter = upload.getItemIterator(req);while (iter.hasNext()) {//每一个item就代表一个表单输出项FileItemStream item = iter.next();//input名称String name = item.getFieldName();InputStream input = item.openStream();//判断input是否为普通表单输入项,如果不是说明是上传if (!item.isFormField()) {//得到上传文件的名称String oldName = item.getName();//为了确保文件名唯一，可以重新命名文件名称String newFileName = UUID.randomUUID().toString();if (oldName.lastIndexOf(".") != -1) {// 含有后缀String suffixName = oldName.substring(oldName.lastIndexOf(".")); // 后缀newFileName += suffixName;}File newFile = new File(UPLOADDIR + newFileName);BufferedOutputStream output = new BufferedOutputStream(new FileOutputStream(newFile));byte[] data = new byte[1024];int count;while ((count = input.read(data, 0, 1024)) != -1) {output.write(data, 0, count);}input.close();output.flush();output.close();}}} catch (Exception e) {e.printStackTrace();}}
