jquery 非同步上傳excel 檔案並且進行了 前臺動態展示 上傳數量
------------------addUser.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.ibeifeng.po.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
List<Role> roleList = (List<Role>) request.getAttribute("rolelist");
if (roleList == null) {
response.sendRedirect("findAllRoleAction.action");
return;
}
Set<String> resource = (Set<String>) session
.getAttribute("resource");
if (!resource.contains("4_1")) {
response.sendRedirect(basePath + "admin/login.jsp");
return;
} else {
}
String alertInfo = (String)request.getAttribute("alertInfo");
if (alertInfo == null) {
alertInfo = "";
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><%=Title.TITLE%></title>
<link type="text/css" rel="stylesheet"
href="/style/admin/index/backhead.css" />
<link type="text/css" rel="stylesheet"
href="/style/admin/user/user.css" />
<link type="text/css" rel="stylesheet"
href="<%=basePath%>style/admin/admin_question_questionCtl_addQsn.css">
<script language="javascript" charset="UTF-8" src="<%=basePath %>js/jquery.js"></script>
<!-- 使用的是 ajaxfileupload 上傳外掛; -->
<script language="javascript" charset="UTF-8" src="<%=basePath %>js/ajaxfileupload.js"></script>
<script language="javascript" charset="UTF-8"
src="/include/Of/LanguagePacks/L.js">
</script>
<script type="text/javascript">
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})//開始上傳檔案時顯示一個圖片
.ajaxComplete(function(){
$(this).hide();
});//檔案上傳完成將圖片隱藏起來
$.ajaxFileUpload
(
{
url:'fileUploadAction.action',//用於檔案上傳的伺服器端請求地址
secureuri:false,//一般設定為false
fileElementId:'file',//檔案上傳空間的id屬性 <input type="file" id="file" name="file" />
dataType: 'json',//返回值型別 一般設定為json
success: function (data, status) //伺服器成功響應處理函式
{
alert(data.message);//從伺服器返回的json中取出message中的資料,其中message為在struts2中定義的成員變數
window.clearInterval(int);// 停止計時器; int 是計時器; 名字有點怪;
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
clearInterval(int);// 停止計時器; int 是計時器; 名字有點怪;
}else
{
alert(data.message);
clearInterval(int);// 停止計時器; int 是計時器; 名字有點怪;
}
}
},
error: function (data, status, e)//伺服器響應失敗處理函式
{
alert(e);
clearInterval(int);// 停止計時器; int 是計時器; 名字有點怪;
}
}
)
return false;
}
</script>
<script>
window.onload = function() {
var alertInfo='<%=alertInfo%>';
if(alertInfo!=null&&alertInfo!=""&&alertInfo!=undefined){
alert(alertInfo);
}
}
function clock()
{
// var t=new Date().toLocaleString();
var t="";
// 防止 ie 快取;
var datatime=new Date().getTime();
$.ajax({
type: 'post',
url: '<%=basePath%>findUploadSuccessNumberAction.action',
data: {
// roleid:selectedroleid
time:datatime
},
dataType: 'json',
success: function (data) {
if(data.successNum==null||data.successNum=="undefined"||data.successNum=="null"){
}else{
document.getElementById("clock").value="上傳數量:"+data.successNum ;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
try {
if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown);
} catch (e) {}
}
});
}
</script>
<script language="javascript" charset="UTF-8">
if (typeof window.L === 'object' && typeof window.L.init === 'function') {
window._ROOT_URL = window.L._rootUrl = '';
window.L._adminUrl = '/admin' || undefined;
window.L.init( [], '');
}
if (!window.L.extension.jsErrorLog) {
window.L.extension.jsErrorLog = true;
window.onerror = function(message, file, line) {
file = file.substr(file.indexOf(window.L._rootUrl, 7)
+ window.L._rootUrl.length);
window.L.AJAX( {
url : window.L._rootUrl + '/include/Of/Log/writeJsLog.php',
async : true,
data : window.L.param.encode( {
'message' : message,
'file' : file,
'line' : line
}),
type : 'post'
});
}
}
</script>
</head>
<body>
<link href="../favicon.ico" rel="shortcut icon">
</head>
<body>
<style>
.warning {
border: red 1px solid;
background: #FCC
}
.hand {
cursor: pointer;
}
</style>
<div class="box block_11">
<!-- // block_## 序號對應全域性的顏色定義 -->
<div class="box_inner">
<!-- // 頂部 -->
<div class="header">
<jsp:include page="../top.jsp" />
<div class="nav">
<span>使用者/組織/許可權</span>
<ul>
<li>
<a class='ihover'
style="<%=resource.contains("4_1") ? "" : "display:none"%>"
href="<%=basePath%>admin/user/addUser.jsp"> 新增使用者</a>
</li>
<li>
<a class=''
style="<%=resource.contains("4_2") ? "" : "display:none"%>"
href="<%=basePath%>admin/user/userManager.jsp"> 使用者管理</a>
</li>
<li>
<a class=''
style="<%=resource.contains("4_3") ? "" : "display:none"%>"
href="<%=basePath%>admin/group/organise.jsp"> 組織管理</a>
</li>
<li>
<a class=''
style="<%=resource.contains("4_4") ? "" : "display:none"%>"
href="<%=basePath%>admin/role/roleManage.jsp"> 角色管理</a>
</li>
</ul>
</div>
</div>
<!-- // 使用者資料 -->
<div class="panel_1 con_input">
<div class="title">
<span>使用者資料</span>
</div>
<div class="content">
<form action="www.baidu.com" id="user_form"></form>
<div class="col_left" style="width: 50%;">
<script>
function showUserGroup() {
var option = {
'targetId' : 'select_target_name',
'targetNameId' : 'group_name',
'targetValueId' : 'group',
'dataType' : 'group',
'isCheckBox' : false,
'showRoot' : false,
'allowCheckParent' : true,//是否允許選擇父選單
'expandLevel' : 2
};
getTree(option);
}
function test() {
alert(document.getElementById('group').value)
}
function testupload(){
// 啟動定時器 int 是定時器;起的 名字有點怪; 全域性變數; 否則不管用; 不加上var;
int=self.setInterval("clock()",50)
return ajaxFileUpload();
}
function afterSumbmit(msg) {
alert(msg);
}
function checkNumbernew(o) {
o.value = o.value.replace(/[^\d]/g, '');
o.value = Number(o.value);
if (o.value >= 2147483647) {
o.value = 2147483646;//integer.maxvalue;
}
}
function checkNumber(s) {
var patrn = /^[0-9]{1,20}$/;
if (!patrn.exec(s)) {
return false;
} else {
return true
}
}
function importExcel(){
var msg = "人員過多時會花費系統較長時間，在點選匯入按鈕後請安心等待，不要做其他操作，您確認要執行匯入嗎?";
if (confirm(msg)==true){
var form=document.getElementById("importForm11");
form.submit();
}
}
function checkFormNew(){
// var pwd = document.getElementById('pwd');
// var repwd = document.getElementById('repwd');
var real_name = document.getElementById('real_name');
var employeeNumber = document.getElementById('employeeNumber');
var workNumber = document.getElementById('workNumber');
var group_name = document.getElementById('group_name');
var identy = document.getElementById('identy');
var banZu = document.getElementById('banZu');
var gongZuoZhengBianHao = document.getElementById('gongZuoZhengBianHao');
// var age = document.getElementById('age');
if(group_name.value==""){
alert("請選擇所屬組織");
return ;
}
if(banZu.value==""){
alert("班組不能為空");
return ;
}
if(real_name.value==""){
alert("真實姓名不能為空");
return ;
}
if(employeeNumber.value==""){
// alert("員工編號不能為空");
alert("工號不能為空");
return ;
}else{
}
// if(age.value!=""&&!checkNumber(age.value)){
// alert("年齡只能是數字");
//
//
// return ;
//
// }
if(workNumber.value==""){
alert("工作證號不能為空");
return ;
}if(gongZuoZhengBianHao.value==""){
alert("工作證編號不能為空");
return ;
}
if(workNumber.value!=""&&!checkNumber(workNumber.value)){
alert("工作證號只能是數字");
return ;
}
if(identy.value==""){
alert("身份證號不能為空");
return ;
}
// if (pwd.value == repwd.value&&(pwd.value!="")) {
//
// } else {
// alert("密碼不能為空並且兩次密碼須一致");
// return ;
// }
document.getElementById('myform').submit();
clsSubmitForm();// clearup
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col style="width: 90px;" />
<col style="" />
</colgroup>
<form action="addEmployeeAction.action" method='post'
target='hiddenifr' id="myform">
<tr>
<td style="color: red;">
必填項:
</td>
<td>
</td>
</tr>
<tr>
<td>
所屬部門:
</td>
<td>
<input class="input1 auto_width hand" type="text"
name="group_name" id="group_name" readonly
onClick="showUserGroup()" />
<input type="hidden" id="group" name="groupid" />
</td>
</tr>
<tr>
<td>
員工姓名:
</td>
<td>
<input class="input3 auto_width" type="text"
name="real_name" id="real_name" />
</td>
</tr>
<!-- -->
<!-- <tr>-->
<!-- <td>-->
<!-- 密碼：-->
<!-- </td>-->
<!-- <td>-->
<!-- <input class="input3 auto_width" type="password" name="pwd"-->
<!-- id="pwd" />-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>-->
<!-- 確認密碼：-->
<!-- </td>-->
<!-- <td>-->
<!-- <input class="input3 auto_width" type="password" name="repwd"-->
<!-- id="repwd" />-->
<!-- </td>-->
<!-- </tr>-->
<!--
<!--
<tr>
<td>
是否管理員：
</td>
<td>
<label class="hand">
<input class="radiobox" name="isadmin" type="radio"
value="0" checked="checked" onClick="hiddDiv()" />
否
</label>
<label class="hand">
<input class="radiobox" name="isadmin" type="radio"
value="1" onClick="adminPanel()"
style="padding-left: 35px;" />
是
</label>
</td>
</tr> -->
<tr>
<td>
工作證號:
</td>
<td>
<input class="input3 auto_width" type="text"
name="workNumber" id="workNumber" />
</td>
</tr>
<tr>
<td>
工作證編號:
</td>
<td>
<input class="input3 auto_width" type="text"
name="gongZuoZhengBianHao" id="gongZuoZhengBianHao" />
</td>
</tr>
<tr>
<td>
工號：
</td>
<td>
<input class="input3 auto_width" name="employeeNumber"
type="text" id="employeeNumber" />
</td>
</tr>
<tr>
<td>
身份證號：
</td>
<td>
<input class="input1 auto_width" type="text" name="identy"
id="identy" />
</td>
</tr>
<tr>
<td>
角色：
</td>
<td>
<select class="select3 ~auto_width" id="roleId"
name="roleId" onchange="">
<!-- paprTypeChange() -->
<%
for (int i = 0; i < roleList.size(); i++) {
if (i == 0) {
%>
<option value="<%=roleList.get(i).getId()%>"
selected="selected"><%=roleList.get(i).getRoleName()%></option>
<%
} else {
%>
<option value="<%=roleList.get(i).getId()%>"><%=roleList.get(i).getRoleName()%></option>
<%
}
}
%>
</select>
</td>
</tr>
<tr>
<td>
工種：
</td>
<td>
<select class="select3 ~auto_width" id="workType"
name="workType" onchange="">
<!-- paprTypeChange() -->
<%
List<String> workTypeList = (List<String>) session
.getAttribute("workTypeList");
if (workTypeList != null) {
for (int i = 0; i < workTypeList.size(); i++) {
if (i == 0) {
%>
<option value="<%=workTypeList.get(i)%>"
selected="selected"><%=workTypeList.get(i)%></option>
<%
} else {
%>
<option value="<%=workTypeList.get(i)%>"><%=workTypeList.get(i)%></option>
<%
}
}
}
%>
</select>
</td>
</tr>
</table>
</div>
<div class="col_right">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col style="width: 110px;" />
<col style="" />
</colgroup>
<tr>
<td style=" color: red;">
.
</td>
<td>
</td>
</tr>
<tr>
<td>
班組：
</td>
<td>
<input class="input1 auto_width" type="text" name="banZu"
id="banZu" />
</td>
</tr>
<!-- <tr >-->
<!-- <td>-->
<!-- 電話：-->
<!-- </td>-->
<!-- <td>-->
<!-- <input class="input3 auto_width" type="text" name="telphone"-->
<!-- id="telphone" -->
<!-- />-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>-->
<!-- E-mail：-->
<!-- </td>-->
<!-- <td>-->
<!-- <input class="input3 auto_width" type="text" name="email"-->
<!-- id="email" />-->
<!-- </td>-->
<!-- </tr>-->
<tr>
<td>
出生日期：
</td>
<td>
<input class="input3 auto_width" name="birthday" type="text"
id="birthday" readonly />
</td>
</tr>
<tr>
<td>
性別：
</td>
<td>
<label>
<input class="radiobox" type="radio" name="gender" value="1"
id="gender1" checked />
</label>
<label for="gender1" class="hand">
男
</label>
<label class="hand">
<input class="radiobox" type="radio" name="gender" value="0"
style="padding-left: 31px;" />
女
</label>
</td>
</tr>
<tr>
<td colspan="2">
<div id="adminView"></div>
<input type="hidden" id="adminGroup" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="role" style="display: none">
<span style="margin-left: 30px;"></span>
<input type="hidden" id="role_id" />
</div>
</td>
</tr>
<form />
</table>
</div>
</form>
</div>
</div>
<!--add 2012 11 28 <div class="clear"></div>-->
<div class="clear"></div>
<div class="panel_1 con_input">
<div class="title">
<span>上傳使用者excel</span>
</div>
<div class="content">
<input type="button" id="import_download" value="使用者模板下載"
style="display: block; float: left; margin-left: 15px; margin-right: 2px; width: 130px"
class="btn"
onclick="window.location='<%=basePath%>servlet/DownLoadServlet?path=../resource/ryb.xls'" />
<%-- <form action='<%=basePath%>servlet/FileUploadForUser'--%>
<%-- method='post' enctype='multipart/form-data' id="importForm11"--%>
<%-- target='frameFile11'>--%>
<%----%>
<%----%>
<%-- <input type="hidden" id='hiddenstoreid' name="storeid" value="" />--%>
<%-- <input type='file' name='upfile' id="fileinput"--%>
<%-- style="display: block; float: left; margin-right: 2px; width: 500px;"--%>
<%-- class="btn">--%>
<%-- <input type="button" id="import" value="匯入使用者"--%>
<%-- onclick="importExcel()"--%>
<%-- style="display: block; float: left; margin-right: 2px; width: 80px"--%>
<%-- class="btn" />--%>
<%-- </form>--%>
<%----%>
<%-- <iframe id='frameFile11' name='frameFile11'--%>
<%-- style='display: none;'></iframe>--%>
<img src="loading.gif" id="loading" style="display: none;">
<%-- <input type="file" id="file" name="file" />--%>
<input type='file' id="file" name="file"
style="display: block; float: left; margin-right: 2px; width: 500px;"
class="btn">
<input type="button" value="上傳" style="display: block; float: left; margin-right: 2px; width: 80px" class="btn" onclick="testupload()">
<input type="text" id="clock" size="35" />
</div>
</div>
<div class="clear"></div>
<iframe style="display: none" name="hiddenifr"></iframe>
<!-- // 主按鈕區(分左中右) -->
<div class="button_area_search">
<%-- <div class="center">--%>
<%-- <a href="#" class="btn" id="save" onclick="javascript:document.getElementById('myform').submit()">保 存</a>--%>
<%-- <a href="#" class="btn" onClick="test()" >清 空</a>--%>
<%-- </div>--%>
<a href="#" class="btn" onClick="checkFormNew();return false;">保 存</a>
<a href="#" class="btn" onClick="clsSubmitForm();return false;">清 空</a>
<a href="<%=basePath%>admin/index.jsp" class="btn" onClick="">返 回</a>
</div>
<!-- // footer -->
<%-- <div id="footer"><a href="http://www.orivon.com" target="_blank">Powered by Orivon</a></div>--%>
<jsp:include page="../footer.jsp" />
</div>
<!-- // box_inner end -->
</div>
<!-- // box end -->
<script>
function uploadSuccess(msg) {
alert(msg);
window.location = '/exam2/admin/user/addUser.jsp';
}
function isAdmin() {
var option = {
'targetId' : 'adminPanel',
'dataType' : 'group',
'isCheckBox' : false,
'showRoot' : false,
'isCheckBox' : true,
'callbackFn' : viewCon,
'expandLevel' : 2,
onCheck : treeOnCLick,
'chkboxType' : {
"Y" : "",
"N" : ""
}
};
getTree(option);
}
function treeOnCLick(event, treeId, treeNode) {
var dataObj = {
'id' : treeNode.id,
'name' : treeNode.name
}
if (treeNode.checked) {
viewCon(dataObj, 'a');
} else {
delGroupPanel(dataObj.id)
}
}
function adminPanel() {
$("#adminPanel").css('display', '');
$("#adminView").css("display", '');
$("#role").css("display", '');
}
function viewCon(dataObj, s) {
$("#adminView").css("display", '');
var text = ' 管 理 組 : ';
var spanStr = $("#adminView").html();
var spanId = $("#adminGroup").val();
if (spanStr.length == 0)
$("#adminView").html(text);
$("#adminView").append(
'<span id=gSpan_' + dataObj.id + '>' + dataObj.name
+ ' </span>');
$("#adminGroup").val(spanId + ',' + dataObj.id)
//<img src=# class=delImg onClick=delGroupPanel('+dataObj.id+')></img>
//$("#imgId").attr('src',L._rootUrl+'/images/icon/icon_del_normal.png');
//addDelClass();
}
//"權 限："
function addRole(id, name) {
var oldName = $("#role span").html();
if (oldName.length == 0) {
$("#role").html(
"權 限：" + $("#role").html());
}
var chkS = $("#r_" + id).attr('checked') == 'checked' ? true : false;
var oldVal = $("#role_id").val();
if (chkS) {
$("#role").css('display', '');
var newName = '<span id="rp_' + id + '">' + name
+ '<img src=# class=delImg onClick=delSpan(' + id
+ ')></img></span>';
oldVal += (',' + id);
$("#role_id").val(oldVal);
$("#role span").html(oldName + ' ' + newName);
} else {
//刪除節點,替換節點成空
var str = '<span +id=(\'|"|)rp_' + id + '\\1 *>.*?<\\/span>';
var expStr = eval('/' + str + '/ig');
var newName = oldName.replace(expStr, '');
$("#role span").html(newName);
var val = oldVal.substr(1);
var valArr = val.split(',');
var newVal = '';
for ( var t in valArr) {
if (valArr[t] != id) {
newVal += (',' + valArr[t]);
}
}
$("#role_id").val(newVal);
}
addDelClass();
}
function selRole() {
$("#rolePanel").css('display', '');
var obj = $("#adminPanel");
var objSet = obj.offset();
$("#rolePanel").css('left', (objSet.left + 80));
$("#rolePanel").css('top', objSet.top + 20);
$("#rolePanel").css('zIndex', '500');
$("body").bind('click', function() {
document.onmousemove = mouseMove;
});
return false;
}
function mouseMove(ev) {
var obj = $("#adminPanel");
var objSet = obj.offset();
ev = ev || window.event;
//$("#tel").val(x)
var x = ev.pageX;
var y = ev.pageY;
// ||
if ((x < (objSet.left + 80) || x > (objSet.left + 370))
|| (y < objSet.top || y > (objSet.top + 210)))
$('#rolePanel').css('display', 'none');
}
/*
function selRole()
{
var roleNameStr = '';
var roleId = '';
var obj = {'mouseClickFun':function(returnStatus,windowObj, callBack) {
if(returnStatus){
var divNum = callBack.handle;
var formObj = $(window.frames["oDialogDiv_iframe_"+divNum].document);
var tr = formObj.find('table tr');
tr.each(function()
{
var chk = $(this).find('input[name=uid]:checked').val();
if(chk > 0)
{
var name = $(this).find('td:eq(1)').html();
$("#role").css('display','');
roleNameStr += ('<span id=span_'+chk+'>'+name+'<img src=# class=delImg onClick=delSpan('+chk+')></img></span> ');
roleId += (','+chk);
}
})
$("#role span").html(roleNameStr);
$("#role_id").val(roleId);
addDelClass();
}
}}
window.L.openCom('oDialogDiv')("許可權選擇"
, 'iframe:./userCtl.php?a=adminPower'
, "460", "auto"
, [2,obj]);
return false;
}
*/
function addDelClass() {
$(".delImg").attr('src', L._rootUrl + '/images/icon/icon_del_normal.png');
$(".delImg").bind('mouseover', function() {
$(this).attr('src', L._rootUrl + '/images/icon/icon_del_over.png');
}).bind('mouseout', function() {
$(this).attr('src', L._rootUrl + '/images/icon/icon_del_normal.png');
})
}
function delSpan(id) {
var newRoleId = '';
$("#rp_" + id).remove();
var roleArr = $("#role_id").val().substr(1).split(",");
for ( var t in roleArr) {
if (roleArr[t] != id) {
newRoleId += (',' + roleArr[t]);
}
}
$("#r_" + id).attr('checked', false);
$("#role_id").val(newRoleId);
if ($("#role_id").val() == "") {
$("#role").css("display", 'none');
}
}
function delGroupPanel(id) {
var newGroupId = '';
$("#gSpan_" + id).remove();
var groupArr = $("#adminGroup").val().substr(1).split(",");
for ( var t in groupArr) {
if (groupArr[t] != id) {
newGroupId += (',' + groupArr[t]);
}
}
$("#adminGroup").val(newGroupId);
$("#treeListgrouptrue_1_check").attr('checked', false)
if ($("#adminGroup").val() == "") {
$("#adminView").css("display", 'none');
}
}
function hiddDiv() {
$('#adminPanel').css('display', 'none');
$('#adminView').css('display', 'none');
$('#role').css('display', 'none');
}
//驗證准考證是否唯一
$("#examcard").blur(function() {
var examcard = $('#examcard').val();
if (examcard !== null || examcard !== "") {
var data = {
'examcard' : examcard
}
$.post("./userCtl.php?a=checkExamCard", data, function(returnData) {
if (returnData == '2') {
alert(window.L.getText('准考證111已存在'));
$("#isfalse").attr("name", "istrue");
$("#isfalse").attr("name", "isfalse");
} else {
$("#isfalse").attr("name", "isfalse");
}
})
}
})
</script>
</body>
</html>
<script language="javascript" charset="UTF-8"
src="/js/admin/songComm.js">
</script>
<script language="javascript" charset="UTF-8"
src="/js/admin/user/userAdd.js">
</script>
<script language="javascript" charset="UTF-8"
src="/exam2/js/admin/manyTreesForUser.js">
</script>
</body>
</html>
---------ajaxfileupload.js
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
// 最開始的時候是這樣; 但是ie 不相容; 改成下面的ok了;
// var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
var io = document.createElement("iframe");
io.id=frameId;
io.name=frameId;
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';
document.body.appendChild(io);
return io
},
createUploadForm: function(id, fileElementId)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form actio