利用SmartUpload+servlet上传图片文字，上传显示图片，解决乱码问题
2016-04-11 00:00
796 查看
摘要: 利用SmartUpload+servlet上传图片文字，并用json输出图片网址+标签内容
2.jsp页面代码
乱码问题解决
另加javascript图片直接显示
1.首先需要一个SmartUploa的jar包+一个json的包（源码包里 面有）
2.jsp页面代码
<%@ 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 'index.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">
</head>
<script>
function setImagePreview(pic) {
var docObj = document.getElementById(pic);
switch (pic) {
case 1:
var imgObjPreview = document.getElementById(preview);
break;
case 2:
var imgObjPreview = document.getElementById(preview1);
break;
default:
var imgObjPreview = document.getElementById(preview2);
}
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "250px";
localImagId.style.height = "200px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
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();
}
return true;
}
</script>
<body>
<div>
<hr style="height:3px;border:none;border-top:3px double red;" />
</div>
<body>
<form action="IM" method="post" enctype="multipart/form-data">
图片1：<input type="file" name="myfile1" id="1"
onchange="javascript:setImagePreview(1);">标签：<input
type="text" name="label0" id="label0"><br>
<hr style="height:3px;border:none;border-top:3px double red;" />
图片2：<input type="file" name="myfile2" id="2"
onchange="javascript:setImagePreview(2);">标签：<input
type="text" name="label1"><br>
<hr style="height:3px;border:none;border-top:3px double red;" />
图片3：<input type="file" name="myfile3" id="3"
onchange="javascript:setImagePreview(3);">标签：<input
type="text" name="label2"><br>
<hr style="height:3px;border:none;border-top:3px double red;" />
图片4：<input type="file" name="myfile4" id=4>标签：<input
type="text" name="label3" id="4"><br>
<hr style="height:3px;border:none;border-top:3px double red;" />
<input type="submit" value="上传">
</form>
<div id="localImag">
<img id="preview" width=-1 height=-1 style="diplay:none" />
<div>
</body>
</html>3.servlet页面
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.JsonObject;
import com.jspsmart.upload.SmartUpload;
@WebServlet("/IM")
public class IM extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 获取标签的内容
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String filePath = getServletContext().getRealPath("/" + "imgs");
// 如果不存在就创建
File file = new File(filePath);
if (!file.exists()) {
file.mkdir();
// System.out.println(">>>>>>>>>>>>>>>>>>>>>>>成功创建" + filePath);
}
// 利用SmartUpload上传
SmartUpload su = new SmartUpload();
su.initialize(getServletConfig(), request, response);
// 设置大小
su.setMaxFileSize(1024 * 1024 * 10);
String result = "上传成功";
try {
// 设置上传图片的格式
su.setDeniedFilesList("exe");
su.upload();
int count = su.save(filePath);
System.out.println("上传成功了" + count);
} catch (Exception e) {
// TODO Auto-generated catch block
result = "上传失败";
e.printStackTrace();
}
for (int i = 0; i < su.getFiles().getCount(); i++) {
com.jspsmart.upload.File tempFile = su.getFiles().getFile(i);
System.out.println("-----------------------");
// 获取标签的内容
// String name = new String(su.getRequest().getParameter("label"+
// i).trim().getBytes(),"utf-8");
String label = su.getRequest().getParameter("label" + i);
System.out.println(label + "??????????");
System.out.println("表单的name值" + tempFile.getFileName());
System.out.println("表单的上传的文件名" + tempFile.getFileName());
System.out.println("表单的上传的文件大小" + tempFile.getSize());
System.out.println("上传文件的扩展名" + tempFile.getFileExt());
System.out.println("上传文件的全名" + filePath + "/"
+ tempFile.getFilePathName());
String url = filePath + "/" + tempFile.getFilePathName();
System.out.println("-----------------------");
// 生成json文件 判断是否为空
if ("".equals(label)||"".equals(tempFile.getFileName().equals(""))) {
}else {
JsonObject object = new JsonObject();
object.addProperty(label,
url);
System.out.println(object.toString());
}
}
// 设置前台
request.setAttribute("result", result);
request.getRequestDispatcher("index.jsp").forward(request, response);
// 生成json文件
JsonObject object = new JsonObject();
}
}源码下载：http://pan.baidu.com/s/1jIpkMJc
乱码问题解决
String url = new String((filePath + "/" + tempFile.getFilePathName()).getBytes(),"utf-8");
另加javascript图片直接显示
<script>
function setImagePreview(pic) {
var docObj = document.getElementById(pic);
switch (pic) {
case 1:
var imgObjPreview = document.getElementById(preview);
break;
case 2:
var imgObjPreview = document.getElementById(preview1);
break;
default:
var imgObjPreview = document.getElementById(preview2);
}
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "250px";
localImagId.style.height = "200px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
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();
}
return true;
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 将JSON对象带有格式的写出到文件中
- Python处理json数据
- ios 将数据生成文件
- 如何向json文件中写入数据
- PHP生成及获取JSON文件的方法
- 利用java读取web项目中json文件为map集合方法示例
- Python实现的读写json文件功能示例
- Python SQL查询并生成json文件操作示例
- java导出json格式文件的示例代码
- PHP生成及获取JSON文件的方法
- jQuery读取本地的json文件(实例讲解)
- jQuery ajax读取本地json文件的实例
- 详解vue 模拟后台数据（加载本地json文件）调试
- JavaScript生成GUID的算法
- jsonp详解
- JS实现父页面跳转、iframe实现整页面跳转
- 从零开始学_JavaScript_系列（八）——js系列<2>（事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单）
- JavaScript语言精粹之继承篇
- [RxJS] Observables can complete
- Javascript高级篇-JS闭包