商业源码 java编程：怎么用JSP（javabean）上传一张图片到服务器的指定文件夹呢？
先导smartupload jar包！在写form表单<input tyle="file" enctype="multipart/form-data" method="post">enctype和method别写错了！
写一个简单的吧！
<%page import="comjspsmartupload"%>
<%
SmartUpload su=new SmartUpload ();//初始化SmartUpload对象
try{ //捕获他可能出现的异常
suupload();//执行上传
}catch(Exception ex){
exprintStackTrace;
}
File file=sugetFile()getFile(0); //(得到单个的上传文件的信息)这里得到的File对象是你到的jar包里的comjspsmartuploadFile类型 别写成IO 里面的File了
String filepath="upload\\"; //在这之前要在你所建项目的目录下单建一个upload文件夹
filepath+=filegetFileName();
filesaveAs(filepath,SmartUploadSAVE-VIRTUAL);
不知道是否建了与它相对应的数据库表啊？
不懂得再玩吧！
%>
qs1: 前端上传并展示
an1: 上传file格式转为base64格式
qs2: 要将上传的在宽高固定的窗口里显示完整
an2: 把获取的base64的链接，赋值到image的src上，然后获取到的宽高比例；再与窗口宽高比例对比，选择以高占满还是以宽占满。
#### 具体实现：
结构：
<div class="upload">
<div class="img-box">
<div class="image-no" @clickstop="openFile" v-if="!imageurl">
<div class="tip">
<img src="///assets/myopus/icon-uploadpng" alt="" />
<div class="text">请上传您的照片</div>
</div>
</div>
<div ref="window" class="image-yes" @clickstop="openFile" v-else>
<div class="img">
<img :style="isWidth 'width:89333333vw' : 'height: 56vw'" :src="imageurl" alt="" />
</div>
</div>
<input
type="file"
ref="selectFileImg"
accept="image/"
v-show="false"
@change="selectFileImg"
/>
</div>
<div class="des-box">
<van-field
class="des"
v-model="des"
rows="3"
autosize
type="textarea"
maxlength="20"
placeholder="请简要描述您的照片，体现环保美~"
show-word-limit
/>
</div>
<div class="submit">
<button @clickstop="submit()">确认上传</button>
</div>
</div>
数据:
isWidth: true, // 上传的展示时，是以宽为主还是高为主
image: {
file: null,
url: null,
},
des: '', // 照片描述文字
方法：
// 创建点击事件并出发file选择
openFile() {
const click = new windowMouseEvent("click");
this$refsselectFileImgdispatchEvent(click);
},
// 文件选择
selectFileImg() {
const input = this$refsselectFileImg;
const files = inputfiles;
if (fileslength < 1) return;
const image = files[0];
const size = 20 1024 1024; // 限定大小
if (!imagetypeincludes("image")) {
this$toast("必须上传");
inputvalue = "";
return;
}
if (imagesize > size) {
this$toast("大小不能超过20M");
inputvalue = "";
return;
}
thisimagefile = image;
// 转为base64格式
var reader = new FileReader();
readerreadAsDataURL(image);
readeronload = (e) => {
thisimageurl = ecurrentTargetresult
// 新建image元素，获取宽高比，与用户上传的宽高比 进行比较，得出用宽还是占满
var image = new Image();
imagesrc = thisimageurl
imageonload= () => {
// 获取上传宽高
const width = imagewidth;
const height = imageheight;
// consolelog(width,height)
// 获取窗口宽高比
const window = this$refswindow
// consolelog(windowoffsetHeight, windowoffsetWidth)
const key = windowoffsetWidth/windowoffsetHeight
const mykey = width/height
if(mykey <= key) return thisisWidth = false
thisisWidth = true
}
};
},
// 上传接口
submit() {
if(!thisimageurl) return this$toast('请上传您的照片')
if(!thisdestrim()) return this$toast('请输入照片简述')
consolelog("开始上传")
},
样式:
<style lang="scss" scoped>
upload {
width: 100vw;
min-height: 100vh;
img-box {
width: 89333333vw;
height: 56vw;
overflow: hidden;
border: 1px dashed #ec851a;
border-radius: 32vw;
margin: 4vw auto;
image-no {
width: 89333333vw;
height: 56vw;
background: rgba(236, 133, 26, 004);
display: flex;
justify-content: center;
align-items: center;
tip {
img {
display: block;
width: 10vw;
margin: 0 auto 3vw;
}
text {
font-size: 14px;
color: #ec851a;
letter-spacing: 1px;
}
}
}
image-yes {
width: 89333333vw;
height: 56vw;
display: flex;
justify-content: center;
align-items: center;
img {
img {
display: block;
}
}
}
}
des {
width: 89333333vw;
background-color: #fbfbfb;
border-radius: 32vw;
margin: 0 auto 8vw;
::v-deepvan-field__control {
font-size: 14px;
}
::v-deepvan-field__word-limit {
font-size: 14px;
color: #c9c9c9;
}
}
submit {
text-align: center;
button {
width: 40vw;
height: 112vw;
background-color: #ec851a;
border: none;
border-radius: 5333333vw;
outline: none;
font-size: 16px;
color: #fff;
}
}
}
</style>
1、使用form表单提交
但是这里要记得添加enctype属性，这个属性是指定form表单在向服务器提交之前，对表单数据如何进行编码。 文件域中的name="file"属性的值，需要和后台接收的对象名一致，不然接收不到。
2、使用ajax提交文件
使用ajax提交首先引入jquery-formjs文件才能实现，接着使用上面的html代码，加入以js则可以实现ajax提交文件。
3、使用FormData对象
4、后台接收文件，框架采用的Spring Boot 微服务框架，因为该框架搭建很方便所以采用这个框架写例子。
0条评论