利用struts实现jsp中的图片上传和预览

最新推荐文章于 2021-10-17 23:46:10 发布

原创最新推荐文章于 2021-10-17 23:46:10 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JSP实现图片预览与上传的方法。通过整合jQuery和AjaxFileUpload插件，实现了图片的选择、预览及上传功能。文章详细展示了页面布局、JavaScript代码、配置文件以及后端Action等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp代码

<input type=”file” name=”file” id=”f_UpImgId” value=”” style=”width: 200px”/>//选取图片
<input type=”button” value=”预览” id=”preBtnId”/>//预览按钮
<div id=”previewImgId” ></div>//要显示的图片
<input type=”hidden” id=”imgUrlID” name=”imgUrl” value=”sa”/>

ajax代码

$("#preBtnId").click(function(){
            $.ajaxFileUpload
            (
                {
                    url: '${url}adminjs/image!preview.action', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'f_UpImgId', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        $("#previewImgId").html("&lt;img style='height: 100px;' src='${url}admin/image!toView.action?imgPath="+data.imgNewPath+"'/>");

                        $("#imgUrlID").val(data.imgNewPath);
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {

                    }
                }
            )
        });

引入头文件

配置文件

adminjs包下面的用来上传图片的配置文件
<action name=”image” class=”adminArticleAction”>
<interceptor-ref name=”defaultStack”>
<param name=”allowedTypes”>image/bmp,image/pjpeg,image/x-png,image/png,image/gif,image/jpg</param>
<param name=”fileUpload.maximumSize”>4MB</param>
</interceptor-ref>
<result type=”json”>
<param name=”contentType”>text/html</param>
</result>
</action>
admin包下面的用来预览图片的配置文件
<action name=”image” class=”adminArticleAction”>
<result name=”stream” type=”stream”>
<param name=”contentType”>image/jpeg</param>
<param name=”inputName”>photo</param>
</result>
</action>

action

private File file;
private InputStream photo;//预览图片
private String fileFileName;//与jsp中的对应。否则获取不到
private String fileFileContentType;
private String imgNewPath;
public InputStream getPhoto() {
return photo;
}
public void setFile(File file) {
this.file = file;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public void setFileFileContentType(String fileFileContentType) {
this.fileFileContentType = fileFileContentType;
}
public String getImgNewPath() {
return imgNewPath;
}
//上传图片
public String preview() throws Exception{
if(file == null){
s = -101;
return SUCCESS;
}
String path = SysConfigStatic.COVER_IMAGE_UPLOAD_PATH;//要上传的目录
imgNewPath = path+adminArticleService.addImage(file, fileFileName, path);//上传图片到指定目录
return SUCCESS;
}

//预览
public String toView() throws Exception{
String imgPath=request.getParameter(“imgPath”);
System.out.println(imgPath);
File f = new File(imgPath);
photo = new FileInputStream(f);
response.setHeader(“Pragma”, “No-cache”);
response.setDateHeader(“Expires”, 0L);
response.setHeader(“Content-Length”,f.length()+”“);
return “stream”;
}

service

@Override
public String addImage(File srcFile, String oldFileName, String path) {
boolean f = false;
String suffix = oldFileName.substring(oldFileName.lastIndexOf(“.”));//获取图片后缀
String fileName = String.valueOf(new Date().getTime())+suffix;//随机生成文件名

try {
FileInputStream fis = new FileInputStream(srcFile);
FileOutputStream fos = new FileOutputStream(path+”/”+fileName);
byte[] buffer = new byte[(int)fis.available()];
fis.read(buffer);
fos.write(buffer);
f = true;
} catch (FileNotFoundException e) {
e.printStackTrace();
f = false;
} catch (IOException e) {
e.printStackTrace();
f = false;
}
if(!f)
return “error”;
return fileName;
}