文件上传下载代码项目实践

文件上传下载代码项目实践

前端页面 js代码 html自行编写（使用zDialog插件）

		function equipmentAdd(){
			 top.jzts();
			 var diag = new top.Dialog();
			 diag.Drag=true;
			 diag.Title ="<spring:message code='msg.equipment.batchAdd'/>";
			 diag.URL = '${ pageContext.request.contextPath }/deviceinfo/goEquipmentAdd.do';
			 diag.Width = 450;
			 diag.Height = 180;
			 diag.CancelEvent = function(){ //close event
				 setTimeout("location.reload()",100);
				diag.close();
			 };
			 diag.show();
		}

展示页面

<form action="" name="Form" id="Form" method="post" enctype="multipart/form-data">
		<div id="zhongxin">
		<table style="margin-top:10px" id="table_report" class="table table-striped table-bordered table-hover">
			<tr>
			<td style="width:100px;text-align: right;padding-top: 13px;"><spring:message code="msg.TPM_DEVICE_INFO.DEVICE_TYPE"/>:</td>
			    <td><framework:DictCombox name="deviceType" id="deviceType"  dictKey="DM_TPM_DEVICE_INFO_DEVICE_TYPE" type="select"  defaultValue='${obj.deviceType}' /></td>
			</tr>
			<tr>
				
			
				<td style="width:100px;text-align: right;padding-top: 13px;"><spring:message code="msg.equipment.batchAdd"/>:</td>
				<td>
				<label for="upfile">
				<input type="button" id="btn" value="<spring:message code="msg.equipment.batchUpload"/>"><span id="text"><spring:message code="msg.equipment.batchText"/></span>
				<input type="file" id="upfile" name="upfile" oninput="modify();" />
				</label>
				</td>
			</tr>
			<tr>
				<td style="text-align: center;" colspan="10">
					<a class="btn btn-mini btn-primary" onclick="upload();"><spring:message code="msg.equipment.uploadFile"/></a>
					<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();"><spring:message code="msg.common.cancel"/></a>
				</td>
			</tr>
		</table>
		</div>
		<div id="zhongxin2" class="center" style="display:none"><br/><br/><br/><br/><br/><img src="${ pageContext.request.contextPath }/static/images/jiazai.gif" /><br/><h4 class="lighter block green"><spring:message code="msg.common.commiting"/></h4></div>
	</form>

展示页面Js

<style type="text/css">
	label{
            position: relative;
        }
        #upfile{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
/*             visibility: hidden; */
        }
        #btn{
            margin-right: 5px;
        }
        #text{
            color: green;
        }
	</style>
<script type="text/javascript">
	//upload

	function modify(){
		var file=$("#upfile").get(0).files[0];
		var size=file.size;
		var name=file.name;
		if(size>0){
			$("#text").html(name);
		}else{
			$("#text").html('<spring:message code="msg.equipment.batchText"/>');
		}
	}
	
	
	function upload(){
	var file=$("#upfile").get(0).files[0];
	var type=file.type;
	var size=file.size;
	if(size<=0){
		$("#upfile").tips({
			side:3,
            msg:'<spring:message code="msg.equipment.nothingFile"/>',
            bg:'#AE81FF',
            time:3
        });
		$("#upfile").focus();
		return false;
	}
	if(type!="text/plain"){
		$("#upfile").tips({
			side:3,
            msg:'<spring:message code="msg.equipment.errorType"/>',
            bg:'#AE81FF',
            time:3
        });
		$("#upfile").focus();
		return false;
	}
	$("#Form").submit();
	$("#zhongxin").hide();
	$("#zhongxin2").show();
	}
	
</script>

下载文件页面js

<form action="" name="Form" id="Form" method="post">
		<div id="zhongxin">
		<input type="hidden" id="count" name="count" value="${count}">
		<input type="hidden" id="successN" name="successN" value="${successN}">
		<input type="hidden" id="path" name="path" value="${path}">
		<div style="margin: 35px auto 35px auto; width:300; height:100;">
		<h2><spring:message code="msg.equipment.uploadFail"/></h2>
		<a class="btn btn-small btn-success" onclick="downData();"><spring:message code="msg.equipment.downloadException"/></a>
		</div>
		</div>
		<div id="zhongxin2" class="center" style="display:none"><br/><br/><br/><br/><br/><img src="${ pageContext.request.contextPath }/static/images/jiazai.gif" /><br/><h4 class="lighter block green"><spring:message code="msg.common.commiting"/></h4></div>
		</form>

<style type="text/css">
		body{text-align: center; background-color: gray;}
		h2{color: red;}
	</style>
	<script type="text/javascript">
		function downData(){
			$("#Form").submit();
			setTimeout("top.Dialog.close()",2000);//时间单位是毫秒
			setTimeout("top.parent.Dialog.close()",3000);//时间单位是毫秒
			//刷新父页面
			//window.location.replace(document.referrer);
			 //parentDialog.parentWindow.location.reload();
			//self.opener.location.reload();
			//location.replace('http://localhost:8080/tpm/deviceinfo/list.do');
	}
	</script>

后台下载返回文件流（弹出选择路径对对话框）

	public void errorFile(HttpServletRequest request,HttpServletResponse response) {
		PageData pd = new PageData();
		pd = this.getPageData();
		String pathIn=(String) pd.get("path");
		
        // path是指欲下载的文件的路径。
        File file = new File(pathIn);
        // 取得文件名。
        String filename = file.getName();

        // 以流的形式下载文件。
        InputStream fis;
		try {
			fis = new BufferedInputStream(new FileInputStream(pathIn));
		
        byte[] buffer = new byte[fis.available()];
        fis.read(buffer);
        fis.close();
        // 清空response
        response.reset();
        // 设置response的Header
        response.addHeader("Content-Disposition", "attachment;filename=" + new String(filename.getBytes()));
        response.addHeader("Content-Length", "" + file.length());
        OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
        response.setContentType("application/octet-stream");
        toClient.write(buffer);
        toClient.flush();
        toClient.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}