jquery 文件上传 Uploader 案例

最新推荐文章于 2024-06-18 09:33:05 发布

DJL296336953

最新推荐文章于 2024-06-18 09:33:05 发布

阅读量5.8k

点赞数

分类专栏： jquery 文章标签： jquery function file silverlight string button

本文链接：https://blog.csdn.net/DJL296336953/article/details/7428696

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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.jar
commons-io-1.4.jar
*/

//判断上传表单是否为上传表单类型,即multipart/form-data
boolean 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();
	}
}