您的位置：首页 > 其它

SmartUpload实现图片上传&带预览功能

2017-12-27 15:42 323 查看

1.页面设计

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '01.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="css/common.css" />

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<style type="text/css">

#pic {
width: 100px;
height: 100px;
margin: 20px auto;
cursor: pointer;

}

</style>

</head>



<body>
<h2>文件上传</h2>
<form action="smartUploadOne.do" method="post"
enctype="multipart/form-data">
上传文件1：<img id="pic" src="images/preview.jpg">
<input id="upload" name="myfile1" accept="image/*" type="file" style="display: none" /><br>
<input type="submit" value="提交"><br>
${result}
</form>
<script type="text/javascript">
$(function() {
$("#pic").click(function() {
$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
$("#upload").on("change", function() {
var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
if (objUrl) {
$("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
}
});
});
});

//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>

</body>
</html>

2.Servlet后台处理

package com.imooc.servlet;

import java.io.File;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.jspsmart.upload.SmartUpload;

public class SmartUploadOne extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

//设置上传文件保存路径
String filePath = getServletContext().getRealPath("/") + "images";
System.out.println(filePath);
File file = new File(filePath);
if(!file.exists()){
file.mkdir();
}

SmartUpload su = new SmartUpload();
//初始化对象
su.initialize(getServletConfig(), request, response);
//设置上传文件大小
su.setMaxFileSize(1024*1024*10);
//设置所有文件的大小
su.setTotalMaxFileSize(1024*1024*100);
//设置允许上传文件类型
su.setAllowedFilesList("txt,jpg,gif");
String result = "上传成功！";
//设置禁止上传的文件类型
try {
su.setDeniedFilesList("rar,jsp,js");
//上传文件
su.upload();

int count = su.save(filePath);
System.out.println("上传成功" + count + "个文件！");
} catch (Exception e) {
result = "上传失败！";
e.printStackTrace();
}

for(int i =0; i < su.getFiles().getCount(); i++){
com.jspsmart.upload.File tempFile = su.getFiles().getFile(i);
System.out.println("---------------------------");
System.out.println("表单当中name属性值：" + tempFile.getFieldName());
System.out.println("上传文件名：" + tempFile.getFieldName());
System.out.println("上传文件长度:" + tempFile.getSize());
System.out.println("上传文件的拓展名：" + tempFile.getFileExt());
System.out.println("上传文件的全名：" + tempFile.getFilePathName());
System.out.println("---------------------------");
}

request.setAttribute("result", result);
request.getRequestDispatcher("index.jsp").forward(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航