天天看点

Plupload上传文件动态添加页面参数

原文链接如下:

http://stackoverflow.com/questions/7672768/plupload-dynamically-change-url

个人项目代码:

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<c:set var="sysPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>上传文件</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link href="${sysPath}/themes/default/style/DateService.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css" />
	<link href="${sysPath}/js/jquery-ui-1.8.12.custom/css/redmond/jquery-ui-1.8.12.custom.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css">
   	<link rel="stylesheet" type="text/css" href="${sysPath}/js/jnotify/jquery/jNotify.jquery.css" target="_blank" rel="external nofollow" >
   	<style type="text/css">@import url(${sysPath}/js/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
   	<script src="${sysPath}/js/common.js"></script>
	<script src="${sysPath}/js/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="${sysPath}/js/plupload/js/plupload.full.js"></script>
	<script type="text/javascript" src="${sysPath}/js/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
	<script type="text/javascript" src="${sysPath}/js/plupload/js/i18n/zh_CN.js"></script>
    <script type="text/javascript" src="${sysPath}/js/png.js"></script>
    <script type="text/javascript" src="${sysPath}/js/divBtn.js"></script>
	<script type="text/javascript" src="${sysPath}/js/tableCss.js"></script>
	<script type="text/javascript">    
	//上传插件初始化
	// Convert divs to queue widgets when the DOM is ready
	$(function() {
		var filters = [],upload_size ;
		$.ajax({
			url:"${sysPath}/page/externalshare/listFileAudit.action",
			async:false,
			type:"post",
			success:function(data){
				if(data.datasList.length>0){
				    var datas = data.datasList;
				    upload_size = data.upload_size;
					for(var i=0;i<datas.length;i++){
						filters[i]= {title:setOptionTxt(datas[i].filetype),extensions:datas[i].extension};
					}
				}
			}
		});
		
		$("#uploader").pluploadQueue({
			// General settings
			runtimes : 'gears,flash,silverlight,browserplus,html5,html4',
			//url : '${sysPath}/page/externalshare/FileUpload.action?userId='+$("#userId").val(),
			url : '${sysPath}/page/externalshare/FileUpload.action',
			max_file_size : upload_size+'mb',
			unique_names : true,
			chunk_size: '2mb',
			
			// Specify what files to browse for
			filters : filters,
			
			flash_swf_url : '${sysPath}/js/plupload/js/plupload.flash.swf',
			// Silverlight settings
			silverlight_xap_url : '${sysPath}/js/plupload/js/plupload.silverlight.xap'
		});

		//新增动态改变url地址start
	    var uploader = $('#uploader').pluploadQueue();
	    uploader.bind('BeforeUpload', function(uploader, filters) {
	    	    uploader.settings.url =  uploader.settings.url+'?userId='+$("#userId").val();
	    	  }
	    );
	  //新增动态改变url地址end
	  
		$('form').submit(function(e) {
	        if (uploader.files.length > 0) {
	            // When all files are uploaded submit form
	            uploader.bind('StateChanged', function() {
	                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
	                    $('form')[0].submit();
	                }
	            });
	            uploader.start();
	        } else {
				alert('请先上传数据文件.');
			}
	        return false;
    	});
		
	});

	
	
	function setOptionTxt(option){
  		var txt = "";
  		switch(option)
  		{
  		   case 'image':
  		   	 txt = '图片';
  		   	 break;
  		   case 'video':
  		     txt = '视频';
  		     break;
  		   case 'music':
  		     txt = '音乐';  
  		     break;
  		   case 'zip':
  		     txt = '压缩文件';
  		     break;
  		   case 'document':
  		     txt = '文档';
  		     break;
  		   default:
  		     txt = '';    
  		}
  		return txt;
  	}
</script>
</head>
<body>
   <div id="msgBox" title="错误告警" style="display: none;">
   <table>
	  <tr>
	    <td rowspan="2" scope="row" style="width:80px"> 
	       <img id="alertMsg" src="${sysPath}/themes/default/images/important.gif">	       
	    </td>
	    <td align="left">
	      <div id="msgShow" style="font-size:15px;text-align:left;margin-top:20px"></div> 
	  	</td>
	  </tr>
	  <tr>
	    <td align="left"> 
	        <div id="showMore" style="float:left;width:54px;height:21px;line-height:21px;text-align:center;margin-top:20px;background:url(${sysPath}/themes/default/images/right_title_bnt.gif) no-repeat left top;display: inline;" οnclick="showMsgMore()">查看详情</div>
	    </td>
	  </tr>
	  <tr>
	    <td colspan="2" scope="row"> 
	       <div id="msgMoreShow" style="display: none;float:left;text-align:left;margin-top:20px"></div>
	    </td>
	  </tr>
	</table>	   
   </div>
	 
	<div class="right">
     	<div class="right_title">
     		<span>
     				<div οnclick="add();" class="divBtn">
	     				<a href="${sysPath}/page/externalshare/toUploadEShare.action" target="_blank" rel="external nofollow" >继续上传</a>
	     			</div>
	     		  文件共享 > 文件上传
     		</span>
     	</div>
     	
         <div class="right_edit" style="height:90%; overflow-y:auto;">
         		<form id="formId" action="${sysPath}/page/externalshare/Submit.action" method="post">
		     	<table>
					<tr bgcolor="#FFFFFF">
						<td class="title_column" style="text-align: left;">
							 <font color="#CD6600">*业务类型:</font>
							 <select name="businessType">
			               		<option value="1">业务类型1</option>	
			               		<option value="2">业务类型2</option>	
			               		<option value="3">业务类型3</option>	
               	 			</select>
						</td>
						<td class="title_column" style="text-align: left;">
							 <font color="#CD6600">*指定用户:</font>
							 <select name="userId" id="userId">
							 	<c:forEach items='${userInfoList}' var ='list'>
							 		<option value="${list.id}">${list.name}</option>
							 	</c:forEach>	
               	 			</select>
						</td>
					</tr>
					<tr>
						<td align="left">
							 <div style="text-align:left;float:left;">
								<div style="width: 750px; margin: 0px auto">
										<div id="uploader">
											<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
										</div>
										<!-- 
										<input type="submit" value="完成"/>
										 -->
								</div>
	 						</div>
						</td>
					</tr>
				</table>
			</form>
		</div>
     </div>
   </form>
</body>
</html>
           

在代码中新增的部分是完成需要的代码。如果没有添加的话,那么将不能动态的获得userId。至于一些js和整体的demo,我有时间了会传完整版的上来。这里只是项目中的一个页面。

http://www.plupload.com/examples/events 另外附带api