文件下载
1.页面
2.后台
下载弹出框代码如下(没有打包)
public void downloadZip(String url,String filename,HttpServletResponse response, HttpServletRequest request) {
//响应头的设置
response.reset();
response.setCharacterEncoding(“utf-8”);
response.setContentType(“multipart/form-data”);
//设置压缩包的名字
//解决不同浏览器压缩包名字含有中文时乱码的问题
//返回客户端浏览器的版本号、类型
String agent = request.getHeader(“USER-AGENT”);
try {
//针对IE或者以IE为内核的浏览器:
if (agent.contains(“MSIE”)||agent.contains(“Trident”)) {
filename = java.net.URLEncoder.encode(filename, “UTF-8”);
} else {
//非IE浏览器的处理:
filename = new String(filename.getBytes(“UTF-8”),“ISO-8859-1”);
}
} catch (Exception e) {
e.printStackTrace();
}
try {
//获得请求文件名
String path = request.getSession().getServletContext().getRealPath(url);
System.out.println(path);
//以下载方式打开
response.setHeader(“Content-Disposition”, “attachment;filename=”+filename);
File file = new File(path);
FileInputStream fis = new FileInputStream(file);
//写出
ServletOutputStream out = response.getOutputStream();
//定义读取缓冲区
byte buffer[] = new byte[1024];
//定义读取长度
int len = 1024;
//循环读取
while((len = fis.read(buffer))!=-1){
out.write(buffer,0,len);
}
//释放资源
fis.close();
out.flush();
out.close();
} catch (Exception e) {
// TODO: handle exception
}
}
效果
文件上传
1.前台页面
弹出模态框
<div class="modal fade" id="gallery-image-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-gallery-image" style="font-size: 17px;padding-bottom: 10px;margin: 0;">
文件上传
<div class="loading-length"></div>
</div>
<div class="modal-body">
<form id="playUpdate" action="${ctx!}/admin/play/update.do" method="post">
<div class="row">
<!--文件上传开始-->
<div class="form-group">
<div class="col-sm-12">
<div id="dropz" width="100px" height="20px" class="dropzone" style="background: url('${ctx!}/assets/images/upload.png') 100px no-repeat;"></div>
<div id="uploadifymes">
<div id="fileQueue" style="width: 400px;height: 210px;"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>
</p>
</div>
<input type="hidden" name="imageurl" id="changephoto" value=""/>
</div>
</div>
</div>
</div>
<div class="modal-footer modal-gallery-top-controls" style="right:30px;">
<input type="hidden" id="billid" name ="billid" value="">
<button type="button" class="btn btn-xs btn-white" data-dismiss="modal"><@spring.message "play_Shutdown"/></button>
</div>
</form>
</div>
uploadify和dropz上传插件导入相关的js和css文件
$("#dropz").dropzone({
url: "${ctx!}/fileupload.do?path=confsoft", ***跳转后台保存上传文件路径***
addRemoveLinks: true,
dictRemoveLinks: "移除文件",
dictCancelUpload: "取消上传",
maxFiles: 1,
autoProcessQueue: true,
acceptedFiles: ".xml",
init: function() {
this.on("success", function(file) {
$("#gallery-image-modal").modal('hide');
history.go(0);
console.log("File " + file.name + "uploaded");
$("#changephoto").val("/vod/soft/"+file.name)
});
this.on("removedfile", function(file) {
console.log("File " + file.name + "removed");
});
}
});
$(document).ready(function() {
var mes=IEVersion();
//alert(mes)
$("#uploadify").uploadify({
'uploader' :'${ctx!}/assets/script/swf/uploadify.swf',
'script' : '${ctx!}/fileupload.do?path=confsoft',***跳转后台保存上传文件路径***
'cancelImg' :'${ctx!}/assets/script/cancel.png',
'folder': 'UploadFile',
'queueID' : 'fileQueue',
'fileExt' : '*.xml',
'auto' : false,
'multi' : true,
'buttonImg':'${ctx!}/assets/script/uploads.jpg',
//'displayData' : 'percentage',
onComplete: function (evt, queueID, fileObj, response, data) {
$("#gallery-image-modal").modal('hide');
history.go(0);
$("#changephoto").val(response);
}
});
});
function IEVersion() {
var message="";
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
$("#dropz").css("display","none");
$("#uploadifymes").show();
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
message="当前浏览器为ie"+fIEVersion;
} else if(isEdge) {
message="当前为edge浏览器";
} else if(isIE11) {
$("#dropz").css("display","none");
$("#uploadifymes").show();
message="当前浏览器为ie11";
}else{
$("#uploadifymes").css("display","none");
$("#dropz").show();
message="当前浏览器不是ie浏览器";
}
return message;
}
**文件保存位置(imageUploadController.java)**
效果