Nginx实现静态资源服务器
apache实现静态资源服务器
参考文章记录
JavaWeb静态资源分离思路
静态资源分离就是把静态资源放到另一台服务器上,web服务器只发布web项目
配置启动静态资源服务,让资源文件通过http方式可访问,
常见方案是使用nginx或者apache设置映射,这样就能通过浏览器访问到 Linux服务器中的文件
java 实现上传文件到远程服务器常用方案:
java上传文件到ftp服务器(这个方案需要在静态资源服务器安装ftp服务)
java使用HttpURLConnection上传文件到远程服务器 (分为客户端和服务端,客户端负责上传,服务端负责接收文件)
java使用HttpClient通过Post上传文件(分为客户端和服务端,客户端负责上传,服务端负责接收文件)
java上传文件到远程服务器(一)---HttpURLConnection方式
未实验
java上传文件到远程服务器(二)---HttpClient方式
未实验
java上传文件到远程服务器七牛云
未实验
SpringMVC中servletFileUpload.parseRequest(request)解析为空获取不到数据问题
springMVC 已经在配置的CommonsMultipartResolver这个转换器里面完成了文件解析:
调用common-fileupload的方式解析,然后再使用parseFileItems()方法封装成自己的文件对象。
所以如果再次使用common-fileupload的方式进行解析获取到的肯定是空, 这个就是问题的所在:
在Controller里面接收到的request都已经是解析过的。
删除Spring MVC文件上传配置,可以自己实现解析(见文章内)
实现进度监控:
重写 CommonsMultipartResolver的parseRequest方法,
为解析类FileUpload 设置自定义的ProgressListener监听器,
进行解析文件,上传并进行进度监控。修改配置文件。
java完成ftp传输
目的
java接收前端上传的文件并将文件转发存储到静态资源服务器。
分析
- java实现ftp上传(
commons-net
包使用及封装) - 不使用进度,解析
HttpServletRequest
得到上传文件 - 将文件上传到ftp地址
- 进度监听及封装(未实现)
- 前端上传js、HTML代码
实现
java上传实现:
前端上传js、HTML代码
<div>
<label>上传标题图片:</label>
<form method="post" enctype="multipart/form-data" id="uploadImgForm">
<!-- 多选multiple="multiple" -->
<input type="file" name="img" id="uploadImgFile" onchange="imagePreviews()" accept="image/*" value="选择图片" />
</form>
</div>
<script type="text/javascript">
//下面用于多图片上传预览功能
function imagePreviews(avalue) {
var docObj = document.getElementById("uploadImgFile");
var preview = document.getElementById("preview");
preview.innerHTML = "";
var fileList = docObj.files;
var tishi = "";
for (var i = 0; i < fileList.length; i++) {
preview.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
var imgObjPreview = document.getElementById("img"+i);
if (docObj.files && docObj.files[i]) {
if(docObj.files[i].size>20*1024*1024){
tishi+="第"+Number(i+1)+"张图片过大,图片上传限制为20M;";
continue;
}
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '200px';
imgObjPreview.style.height = '200px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
}
else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
alert(imgSrc)
var localImagId = document.getElementById("img" + i);
//必须设置初始大小
localImagId.style.width = "200px";
localImagId.style.height = "150px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
}
if(tishi!=""){
alert(tishi);
}
return true;
}
//获取(input type="file")的file数组,参数1:input的id
// 无文件返回null
function createFormData(inputIdStr) {
var inputObj = document.getElementById(inputIdStr);
var files = inputObj.files;
if (files.length == 0) {
return null;
}
// 通过FormData将文件转成二进制数据
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
// 将文件转二进制
formData.append('files', files[i]);
}
return formData;
}
// 开始上传请求
// formData:文件参数 ,由createFormData() 创建 ;添加其它参数formData.append('a', 其它参数);
function uploadWithXMLHttpRequest(formData, successCallback) {
var xhr = new XMLHttpRequest;
xhr.open('post', '${ctx }/upload/uploadImage.do');
// 监听上传进度
xhr.upload.onprogress = function (ev) {
// 事件对象
//var percent = (ev.loaded / ev.total) * 100 + '%';
// progress.style.width = percent;
}
xhr.upload.addEventListener("loadend", function(){
//使用 loadend 事件可以侦测到所有的三种加载结束条件(abort、load,或 error):
//需要注意的是,没有方法可以确切的知道 loadend 事件接收到的信息是来自何种条件引起的操作终止;但是你可以在所有传输结束的时候使用这个事件处理。
//console.log('loadend');
});
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
if(typeof successCallback=='function'){
successCallback(xhr.responseText);//返回结果
}
}
}
xhr.send(formData);
}
function uploadWithJQuery() {
//var formData = createFormData("uploadImgFile");example
var formData = new FormData($("#uploadImgFile")[0]);// example
$.ajax({
url: '${ctx }/upload/uploadImage.do',
type: 'POST',
data: formdata, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success:function (data) { //成功回调
//console.log(data);
}
});
}
//添加内容
function add_new() {
var title = $("#title").val();
var intro = $("#intro").val();
var contentURL = $("#contentURL").val();
if (isEmpty(title)) {
huialertautohide("标题不能为空");
return;
} else if (isEmpty(intro)) {
huialertautohide("简介不能为空");
return;
} else if (isEmpty(contentURL)) {
huialertautohide("内容链接不能为空");
return;
}
var formData = createFormData("uploadImgFile");
if (formData == null) {
huialertautohide("请选择需要上传的图片");
return;
}
formData.append('title', title);
formData.append('intro', intro);
formData.append('contentURL', contentURL);
uploadWithXMLHttpRequest(formData, function(responseText){
var obj = JSON.parse(responseText);
console.log(obj);
var code = obj["code"];
console.log(code);
if (obj["code"] == "1") {
huialertautohide("添加成功");
setTimeout(function(){
user_add_close();
window.location.href = "${ctx }/newsManager/news_listIndex.do";
}, 1000);
}
});
}
</script>
<script type="text/javascript">
/* 关闭当前弹出框 */
function user_add_close(){
var index=parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
function huialertautohide(str) {
$.Huimodalalert(str, 2000);
}
//判断字符是否为空的方法
function isEmpty(obj){
if(typeof obj == "undefined" || obj == null || obj.length == 0 || obj.replace(/(^s*)|(s*$)/g, "").length == 0) {
return true;
}else{
return false;
}
}
</script>
网友评论