form表单的提交和图片上传、预览

最新推荐文章于 2023-06-17 12:09:59 发布

蜡笔小ming

最新推荐文章于 2023-06-17 12:09:59 发布

阅读量1.2w

点赞数 1

本文链接：https://blog.csdn.net/qq_40826106/article/details/80214691

版权

step 1:前端jsp页面

<table>

<tr>

<td>

</td>

</tr>

<tr>

</div>

</td>

</tr>

</table>

</form>

step 2:前端js

//step 1 选择图片触发此方法
function showPic(param){
var f = $("#"+param).val();//高端的浏览器版本现在都是无法直接拿到文件的路径的，处于保护文件考虑
var picType = f.substring(f.lastIndexOf(".")+1);
var nowTime = getNowTime();
var ficName = nowTime + "."+picType;
if(picType != "JPG" && picType != "jpg" && picType != "png" && picType != "PNG" && picType != "bmp" && picType != "BMP" && picType != "gif" && picType != "GIF"){
$.messager.alert('提示','请png/jpg/bmp/gif格式图片！');
}
var file = document.getElementById('pic').files; //获取上传的文件是一个集合
var fileSize = file[0].size;//文件大小单位：字节
//var fileName = file[0].name;//文件名

if( fileSize >= 1024*1024*2){
$.messager.show({
title: '提示',
msg: '您上传的图片大于2M',
timeout:2000,//默认4秒关闭
showType:'slide'
});
return;
}
$("#fm").ajaxSubmit({
url:"/test/showPic.action?fileName="+ficName+"",
async:false,
type:"post",
//dataType:"json",//指定返回值类型
//data:{"fileName":ficName},
success:function(data){
if(data.res){
$("#upload_img").css("height"," 240px");
$("#upload_img").css("width"," 430px");
$("#upload_img").attr("src","/test/downLoad.action?fileName="+ficName+"");
}

}
});
return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交

}

step 3 Action层记得set/get

private InputStream woshiStream;
private String fileName;//文件名
private File uploadFile;//图片tmp
private Map<String,Object> result = new HashMap<String,Object>();
private User user;
private Advert advert;

String path = "";

//step 1:点击上传图片将原文件复制到指定文件夹内
public String showPicture(){
path = ServletActionContext.getServletContext().getRealPath("/advert");//通过传入服务器的相对路径来拿到文件的绝对路径：父目录绝对路径
try {
File ff = new File(path);
if(!ff.exists()){
ff.mkdirs();
}
FileUtils.copyFile(uploadFile, new File(path,fileName));
if(uploadFile.delete()){
System.out.println("临时文件删除成功");
};
} catch (IOException e) {
e.printStackTrace();
}
if(uploadFile!=null){
result.put("res", true);
}else{
result.put("res", false);
}
return "success";
}

//struts图片上传配置

<action name="showPic" method="showPicture" class="getPicAction">
<result name="success" type="json">
<param name="root">result</param>
<param name="contenType">text/html</param>
</result>
<result name="error" type="json">
<param name="root">result</param>
<param name="contenType">text/html</param>
</result>
</action>

//step 2:复制完成后，再将复制好的图片以流的形式展现
public String downLoadPic(){
File f = new File(path+File.separator+fileName);
try {
woshiStream = new FileInputStream(f);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return "success";

}

//struts图片预览配置

<action name="downLoad" method="downLoadPic" class="getPicAction">
<result type="stream" name="success">

<param name="inputName">woshiStream</param>
<param name="contentType">application/octet-stream</param>

</result>

</action>

step 3：当你点击上传将图片以及表单一起传过去

function upload(){
$("#fm").ajaxSubmit({
url:"/test/upload!upload.action",
async:false,
type:"post",
dataType:"json",//指定返回值类型
success:function(data){

},
error:function(){

}
})

}

struts配置

<action name="upload!*" method="{1}" class="getPicAction">
<result name="success" type="json">
<param name="root">result</param>
<param name="contenType">text/html</param>
</result>
<result name="error" type="json">
<param name="root">result</param>
<param name="contenType">text/html</param>
</result>