文档章节

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

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/25 15:30
字数 895
阅读 9
收藏 0
点赞 0
评论 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

(转载学习)文件上传的渐进式增强

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

heroShane ⋅ 2014/01/24 ⋅ 0

可道云在线资源管理器 - kodExplorer

KodExplorer可道云,原名芒果云,是基于Web技术的私有云和在线文件管理系统。致力于为用户提供安全可控、可靠易用、高扩展性的私有云解决方案。用户只需通过简单环境搭建,即可使用KodExplor...

雾渺 ⋅ 2013/09/07 ⋅ 53

Python自动化开发学习24-Django中(AJAX)

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

骑士救兵 ⋅ 05/18 ⋅ 0

从实战中学前端:打造自己的html5文件上传插件

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

有力量的神经病 ⋅ 2016/12/17 ⋅ 0

Python综合Web案例_在线为头像添加装饰

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

木子昭 ⋅ 01/03 ⋅ 0

文件上传的渐进式增强

文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 网页开发者们想了很多办法,试...

阮一峰 ⋅ 2012/08/10 ⋅ 0

【前端】图片裁剪(二)Jcrop实现裁剪

学着做自己,并优雅的放手不属于自己的。 前一篇文章已经跟大家讲述了如何利用JavaScript实现Web端图片裁剪功能。可能对大多数人来说,利用JavaScript去实现裁剪功能比较费事,那这一篇文章将...

zrunker ⋅ 2017/10/25 ⋅ 0

两种文件上传的实现-Ajax上传和form+iframe

前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了。HTML5支持多图片上传,而且支持ajax上传!而且支持上传之前图片的预览!而且支持图片拖拽上传!而且...

musishui ⋅ 2016/08/25 ⋅ 0

客户端上传工具-SWFUpload

最近,在后台实现广告管理系统,有一个表单选项,想利用SWFUpload组件来实现。现在将该组件的认识和理解记录如下:方便有需要的同行查看. 一、首先来比较下目前的几种的客户端上传: 1、File表...

王锐 ⋅ 2012/09/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

在java中读取文件(也支持读取jar中的文件)

getClass().getResourceAsStream("文件名.格式"); 这个方法是用于获取当前类所在目录下的文件;需要将文件放到和当前类同一个包下面 比如我有个类在 com.test这个包下, 要读取一个test.jpg的图...

太黑_thj ⋅ 50分钟前 ⋅ 0

CentOS 7 源码编译安装 MySQL 5.7记录

没事瞎折腾,本来可以yum安装,却偏偏去要编译源码。 1. 安装依赖包 1). 安装cmake等依赖 # yum install cmake ncurses ncurses-devel bison bison-devel 2). 安装boost 1.59.0 # wget htt...

admin_qing ⋅ 52分钟前 ⋅ 0

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部