图片上传大小和预览

最新推荐文章于 2022-08-23 11:53:02 发布

原创最新推荐文章于 2022-08-23 11:53:02 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JSP #Struts #XHTML #HTML #UP

JSP 专栏收录该内容

45 篇文章

订阅专栏


<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> 
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
<img src="about:blank" id="fileChecker" alt="test"  height="18"/>

<script type="text/javascript">
//前面为网页
var oFileChecker = document.getElementById("fileChecker");

function changeSrc(filePicker)
{
    oFileChecker.src = filePicker.value;//读图片
}

//这个很重要，判断是否完全读完，否则判断图片大小不准确
oFileChecker.onreadystatechange = function ()
{
     if (oFileChecker.readyState == "complete")
     {
        checkSize();
     }
}

function checkSize()
{
     var limit  = document.getElementById("fileSizeLimit").value * 1024;

     if (oFileChecker.fileSize > limit)
     {
        alert("too large");
     }
     else
     {
        alert("ok");
     }
}
</script>


<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="dict" uri="/dict-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<%@include file="/jsp/common.jsp"%>
<style type="text/css">
.thumbImage{
	max-width:300px;
	max-height:340px;
　　} 
</style>
<script type="text/javascript" src="js/branchAftercareWorkMgr.js"></script>
</head>

<body>
<%@include file="/jsp/include/navigation.jsp"%>
<form onsubmit="return up_load();" id="branchAftercareWorkForm" name="branchAftercareWorkForm" action="<%=request.getContextPath()%>/uploads_fileUpload.do?maximumSize=512000&allowedTypes=image/bmp,image/png,image/x-png,image/gif,image/jpeg,image/pjpeg&path=branchAftercareWork" method="post" enctype="multipart/form-data" target="aaa">
<s:hidden id="elisorId" name="branchAftercareWorkForm.elisorId"></s:hidden>
<s:hidden id="year" name="branchAftercareWorkForm.year"></s:hidden>
<s:hidden id="docType" name="branchAftercareWorkForm.docType"></s:hidden>
<table class="bg" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <table class="tb_add" width="100%" border="0" cellpadding="1" cellspacing="1">
    <tr>
     <td class="td_title" colspan="3" align="center">附件上传</td>
      </tr>
      <tr> 
      </tr>
      <tr>
	 <th class="tb_lable" width="25%" align="right">附件一：</th>
	 <td>
	 <table width="100%" border="0" cellpadding="0" cellspacing="0">
	 <tr>
	 <td align="center" width="300" id="td1">
	 <input id="cl_picture1" type="file" name="upload"  style='width:300px' ContentEditable="false" onchange="showPicture('btn1');"/>
	 </td>
	 <td align="left">
	 <input type="button" id="btn1" style="width:60px;height:19px" value="重置" disabled="disabled" onclick="deleteFilePath('td1');"/>
	 </td>
	 </tr>
	 </table>
	 <div id="cl_picture1Tip"></div>
	 </td>
	 <td width="30%" style="text-align:center">图片预览</td>
	 </tr>
	 <tr>
	 <th class="tb_lable" align="right">附件二：</th>
	 <td>
	 <table width="100%" border="0" cellpadding="0" cellspacing="0">
	 <tr>
	 <td align="center" width="300" id="td2">
	 <input id="cl_picture2" type="file" name="upload"  style='width:300px' ContentEditable="false" onchange="showPicture('btn2');"/>
	 </td>
	<td align="left">
	 <input type="button" id="btn2" style="width:60px;height:19px" value="重置" disabled="disabled" onclick="deleteFilePath('td2');"/>
	 </td>
	 </tr>
	 </table>
	 <div id="cl_picture2Tip"></div>
	 </td>
	 <td rowspan="7" id="tdUpload" style="text-align:center"></td>
	 </tr>
	 <tr>
	 <td class="bottom" align="center" colspan="3">
	 <input value="上传" type="submit"  onmouseout="this.className = 'button'"
	 class="button"	onmouseover="this.className = 'buttonOver'" />
	 <input value="返回" type="button" onclick="javascript:history.back();"  onmouseout="this.className = 'button'" class="button"	onmouseover="this.className = 'buttonOver'" />
	 </td>
	 </tr>
	 </table>
	 </td>
	 </tr>
  </table>
</form>
<iframe name="aaa" style="display:none"></iframe>
<script type="text/javascript">
function up_load()
{
	$('#button').attr('disabled','disabled');
	var uploadsFileName = document.getElementsByName("upload");
	var sign = false;
	for(var i = 0;i<uploadsFileName.length ;i++)
	{
		if(uploadsFileName[i].value!=null && uploadsFileName[i].value!="" && uploadsFileName[i].value.length> 0)
		{
			sign = true;
			break;
		}
	}
	if(!sign)
	{
		alert("请上传图片");
		return false;
	}
	else
	{
		return true;
	}
}

function success(fileNamse){
	alert("上传成功");
	$('#button').attr('disabled','');
	save_branchAftercareWork(fileNamse);
}

$.formValidator.initConfig( {
	formid :"setForm",
	onerror : function(msg) {
		alert(msg)
	},
	onsuccess : function() {
		return true;
	}
});

$("#cl_picture1").formValidator( {
	onshow :"请上传图片",
	onfocus :"请选择JPG、JEPG等图片文件，大小不要超过500K",
	oncorrect :"路径合法"
});
$("#cl_picture2").formValidator( {
	onshow :"请上传图片",
	onfocus :"请选择JPG、JEPG等图片文件，大小不要超过500K",
	oncorrect :"路径合法"
});


function showPicture(btnid){
	var id = event.srcElement.id;
	var src = document.getElementById(id).value;
	document.getElementById("tdUpload").innerHTML = "<img src='"+src +"' class='thumbImage'/>";	
	document.getElementById(btnid).disabled = "";	
}	

function deleteFilePath(id)
{
	document.getElementById(id).innerHTML="<input type='file' id='cl_picture"+id.substring(id.length-1)+"' name='upload' value='' style='width:300px' ContentEditable='false' onchange='showPicture(\"btn"+id.substring(id.length-1)+"\");'/>";
	document.getElementById("tdUpload").innerHTML = "";
	document.getElementById("btn"+id.substring(id.length-1)).disabled = "disabled";	
}
</script>

</body>
</html>