文档章节

利用SmartUpload+servlet上传图片文字,上传显示图片,解决乱码问题

淘幻幻
 淘幻幻
发布于 2016/04/11 17:03
字数 935
阅读 62
收藏 0

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>


© 著作权归作者所有

淘幻幻
粉丝 2
博文 83
码字总数 36216
作品 0
徐州
程序员
私信 提问
spring mvc中引入xheditor的步骤(二)

用户发表文章(Post),在xheditor中写文字和上传图片,交叉进行,图片文件上传到了服务器,图片的名称,url,大小等信息在上传的同时需要单独保存在一张表里。 因此在上一篇的UploadControlle...

cyper
2012/11/11
1K
0
邮件实用技巧十三:巧妙利用图片点缀你的邮件

用户在编辑邮件时,经常需要使用到图片。比起一大堆文字的介绍,各式各样的图片更能表达用户的意思,也能让邮件显的更通读易懂、生动活泼。 目前,大部分邮箱的图片都是通过外连接方式加入,...

月亮湖泊
2010/08/13
82
0
请教个PHP文件中文名乱码的问题

新手遇到个问题,之前关于上传文件中文名乱码的,用了iconv('utf-8', 'gb2312', $_FILES['upload']['name'])解决了,现在想要把之前上传的图片文件都列出来,又遇到这个问题了。 现在我想要显......

追风小熊猫
2014/05/09
111
1
Python(二)借助七牛云通过脚本自动获取上传图片外链

概述 之前自己写博客的时候,每次的都需要通过将本地图片上传到七牛云,然后获取图片外链,再粘贴到MarkDown编辑器里面,如果一篇博客里面图片比较少的时候,还可以忍受,图片多了就感觉特别...

wustor
2017/11/13
0
0
WordPress中实现Markdown编辑的终极解决方案

欢迎访问Oldpan博客,分享人工智能有趣消息,持续酝酿深度学习质量文。 既然我们的博客 Oldpan博客 主要的内容是人工智能、机器学习、深度学习,许多理论推理和公示展示是必不可少的,不能因...

2018/10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部