文档章节

利用Ajax完成客户上传图片的实时预览

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/25 15:30
字数 895
阅读 9
收藏 0

首先,先给出前端代码(不要着急,我会在重要的地方都加上注释):

/*

    前台所做的事情:首先先创建一个表单,在表单上,首先出现一个空白头像的图片,但客户点击浏览完图像之后,Ajax大显神威,将input框中的value取到,后然进行正则表达式将‘\’换成‘/’(因为JavaScript中没有replaceAll方法,想要全部替换只能使用正则表达式和replace方法替换全部),Ajax将数据发送给后台,后台进行处理之后,将地址返回给Ajax,最后,Ajax拿到服务器响应之后,动态的创建一个img元素,将服务器返回的地址传入,这样,客户刚刚浏览的图片就可以异步无刷新的情况下展示出。(不要忘了让起初的那张空白头像hidden吧)。

*/

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.displayElement{
	display:hidden;
}
.newStyle{
	position:absolute;
	top:0px;
	left:5px;
}
</style>
<script type="text/javascript">
	//声明一个XMLHttpRequest对象(注意浏览器版本)
	var XMLHttp;
	function getHttpObject(){
		if(window.XMLHttpRequest){
			XMLHttp=new XMLHttpRequest();
		}else{
			XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		return XMLHttp;
	}
	//这是<input type="file" onchange="finish()">
	function finish(){
		var targetValue=document.getElementById("input1").value;
		if(targetValue!==""){
			//在这一步中获取数据 
			//tomcat对URL 中的中文不认识 
			var newValue;
			//JS中没有replaceAll的方法,所以,必须使用真则表达式和raplace连用,才可以全部替换 
			newValue=targetValue.replace(new RegExp("\\\\",'gm'),"/");
			document.getElementById("p1").innerHTML="地址为:"+targetValue;
			//这是服务器端地址,这里我们使用的是Get请求方式,因此,KeyWord要拼接在URL中 
			var url="http://localhost:8080/Project-ajax-02/PicPath?KeyWord="+newValue;
			//调用getHttpObject方法,得到XMLHttpRequest对象 
			XMLHttp=getHttpObject();
			//打开与服务器的链接 
			XMLHttp.open("GET",url,true);
			//因为使用的是Get方式,所以,参数都已经拼装在了URL中,所以这个地方的send中不需要再
			//发送参数了。加入我们使用的是POST方式,那么这个地方还要注意的是,我们必须要写一个
			//setRequestsHeader();方法了。 
			XMLHttp.send(null);
			//在对服务器连接进行监听,并且写上一个回调函数。注意,这个地方是将callback整个函数赋值
			//给XMLHttp.onreadystatechange,所以callback函数,不要加上‘()’了。 
			XMLHttp.onreadystatechange=callback;
		}
	}
	function callback(){
		if(XMLHttp.readyState==4 && XMLHttp.status==200){
			//先让一开始页面上的空白头像隐藏 
			document.getElementById("noPic").className="displayElement";
			//动态的生成一个图片节点 
			var img=document.createElement("img");
			img.setAttribute("width",100);
			img.setAttribute("height",100);
			//新创建的节点,所需要的样式 
			img.className="newStyle";
			//使用responseText方法,得到服务器传递来的地址,然后通过setAttribute方法,将src放入节点中 
			img.setAttribute("src",XMLHttp.responseText);
			var body=document.getElementsByTagName("body")[0];
			//将新产生的节点放入父节点中,就可以展示了 
			body.appendChild(img);
		}
	}
</script>
</head>
<body>
<img id="noPic" alt="" width="100" height="100" src="picture/empty.png"><br/>
<form action="" enctype="multipart/form-data">
	头像:<input type="file" id="input1" name="file" onchange="finish(this)"><br>
	姓名:<input type="text" name="name1">
	<input type="submit" value="提交">
</form>	
<p id="p1"></p>
</body>
</html>

其次,给出后台代码:

/*

  相比刚刚的前台,后台的代码就简单了很多,只要将Ajax传递的数据,传递给Ajax就行。

*/

package njcc.action;

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;

@WebServlet("/PicPath")
public class GetPic extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String keyWord=req.getParameter("KeyWord");
		if(keyWord!=null && !keyWord.equals("")){
			resp.getWriter().write(keyWord);
		}
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		super.doGet(req, resp);
	}
	
}

最后,让我们运行项目,查看结果吧:

 

本文转载自:https://my.oschina.net/zcysxj/blog/880196

共有 人打赏支持
大头儿子程序猿
粉丝 0
博文 20
码字总数 3454
作品 0
奉贤
程序员
08-05更新ThinkPHP+swfupload多图上传实例 经典实用的php多图上传

先上一张图片给大家看看效果,有需要就下载学习。不一定非要在ThinkPHP里,只是我非常喜欢去用ThinkPHP做开发了。 好了。现在咱们需要的东西是,下载一个swfupload.js网上很多,自己百度吧....

3147972
2014/03/21
0
0
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
0
0
Python自动化开发学习24-Django中(AJAX)

讲师的博客地址:http://www.cnblogs.com/wupeiqi/articles/5703697.html 。号称是AJAX全套 原生Ajax Ajax主要就是使用 XmlHttpRequest 对象来完成请求的操作,该对象在主流浏览器中均存在(...

骑士救兵
05/18
0
0
从实战中学前端:打造自己的html5文件上传插件

写在前面的废话:文件上传在web开发当中非常普遍,比如新闻图片、用户头像、商品图片等等,在html5几乎占据统治地位(但是依然有部分顽固派人士)的情况下,基于html5的文件上传也占了多数(...

有力量的神经病
2016/12/17
42
0
Python综合Web案例_在线为头像添加装饰

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程: 前端: BootStrap, Jquery, Jcrop 后端: Django, Pillow 第一步: 选择头像 初始页面 这是一个...

木子昭
01/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部