1. 程式人生 > >驗證碼點選圖片換驗證碼

驗證碼點選圖片換驗證碼

由於直接設定src為/commons/validator.html由於快取問題會造成圖片不更換,所以需要加一個引數,讓每次請求都不一樣,只有加入時間引數了,這樣每次重新整理都是新的,就不存在快取不更新圖片問題了 ---(? 號一定加在' '裡面)

html:

<div class="input-border">
	<input type="text" id="register-validator" class="input-input" placeholder="驗證碼" size="16">
	<img border="0" src="/commons/validator.html" id="validator" onclick="this.src='/commons/validator.html?'+Math.random();" title="看不清可單擊圖片重新整理">
</div>

validator.jsp:
<%@ page language="java" contentType="image/jpeg" pageEncoding="UTF-8"%><%
%><%@page import="java.util.*"%><%
%><%@page import="com.ncedrapa.util.*"%><%
%><%@page import="com.ncedrapa.web.ServletConstants"%><%
	
	// 生成數字隨機驗證碼圖片
	//String code = RandomUtil.getRandomCode(6);

	// 通過UUID生成隨機的數字或字母,或數字+字母驗證碼
	String uuid = RandomUtil.uuid();
	String code = uuid.split("-")[0].substring(0, 6);
	
	//session.setMaxInactiveInterval(5 * 60);
	session.setAttribute(ServletConstants.SESSION_IMAGE_VALIDATOR, code);
	System.out.println("本次驗證碼 : " + code + "," + (String)session.getAttribute(ServletConstants.SESSION_IMAGE_VALIDATOR));
	
	// 禁止影象快取。
	response.setHeader("Pragma", "no-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);

	//response.setContentType("image/jpeg");
	
	// 返回輸驗證碼資料
	ImageUtil.buildCheckCodeImage(code, response.getOutputStream());
	
%>

還有相關的spring的配置等,不一一列舉。

最終效果圖:


相關推薦

驗證圖片驗證

由於直接設定src為/commons/validator.html由於快取問題會造成圖片不更換,所以需要加一個引數,讓每次請求都不一樣,只有加入時間引數了,這樣每次重新整理都是新的,就不存在快取不更新圖片問題了 ---(? 號一定加在' '裡面) html: <di

HTML 圖片更換驗證的實現

有一些的網站的需要圖片驗證碼當你點選的時候可以變換驗證碼 <img style="height: 22px;" id="codeImg" onclick="this.src='verifycode?'+Math.random()"alt="點選更換" t

thinkPHP5.0框架驗證呼叫及圖片重新整理簡單實現方法

這篇文章主要介紹了thinkPHP5.0框架驗證碼呼叫及點選圖片重新整理簡單實現方法,結合簡單示例形式分析了thinkPHP5框架驗證碼相關配置、後臺驗證、前臺重新整理等操作技巧,學習 thinkphp原始碼的朋友可以參考下,具體如下:   1、配置檔案中

ASP.NET中怎樣實現圖片驗證功能,並且圖片會重新整理

------ 基本思路: 圖片的src=後臺的一個函式,此函式返回按照一定規則生成的圖片檔案流。 然後此圖片即可生成。 那麼怎樣重新整理驗證碼呢,這是個問題。 因為給圖片的src賦了值之後,想要更換一個圖片,那麼src的那個函式必須再執行一次才行。 <img src=

圖片圖片src重新載入(用於圖片驗證

效果圖: 後臺給的連結直接插入html中img的src裡,點選圖片重新載入這個src因為src的內容一直不變,比如都是 src="http://www.xxx.com/xxx/get?tocken

生成動態驗證(工具類)

1.頁面 <!--驗證碼--> <div class="col-sm-3"> <img id="vcode" src="/checkCode" style="cursor:pointer"> </div>

驗證更換

首先需要先建立一個字串,並放好要生成驗證碼的字元,去掉了不容易識別的i,l,o ,I,L,O $str = "abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ0123456789"; 然後再建立一個大小合適的畫布填充一個顏色並輸出: <?

PHPLaravel框架中驗證無法重新整理

PHPLaravel框架中驗證碼點選無法重新整理 驗證碼無法點選重新整理相容解決方案 關鍵部分 其他位置配置 二維碼原始碼(模板) 驗證碼無法點選重新整理相容解決方案 關鍵部分 我們先看這段程式碼關鍵部分

js生成二維帶logo以及下載二維

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Qrcode Test</title> <script src="Script

C# winform生成二維

C# winform 新手例項:點選生成二維碼 效果圖如下: 部分程式碼: //button點選事件 private void button1_Click(object sender, EventArgs e) { if (string.

Android讓ImageView成另外一張圖片

給ImageView設定點選監聽,當點選了,換圖片public class Test extends Activity { ImageView iv; boolean isChanged = false; @Override public v

按鈕呼叫JS驗證驗證未通過依舊會提交表單問題

如果用button的點選事件來呼叫JS對錶單進行驗證,驗證通過則submit,不通過則return false。有時候JS明明未通過,表單還是會提交,這種情況,如果你確信你的JS沒問題,則可能是but

div輸入需要的資料,使用qrcode,生成二維

<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <tit

js圖片放大

HTML程式碼: 1 <img id="img0" src="" style="padding-right:10px; " /> 2 3 <div id="myModal" class="modal"> 4 <!-- 關閉按鈕

微信小程式圖片放大預覽

微信小程式點選圖片放大預覽使用到 wx.previewImage 介面,可以放大、上/下一張 上程式碼 wxml程式碼 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{i

上邊圖片跟隨圖片發生變化,圖片樣式發生變化

一下僅僅將程式碼貼上來了,稍看下就會明白 html程式碼: < view > < image src= '{{pic}}'></ image > <

[IOS]Uiwebview+js,圖片得到地址

網上的教程你複製我,我複製你,特別容易誤導像我這樣的新手,好不容易找到一個方法,卻因為 網上給的js程式碼用了系統的click方法,導致一直無效。 網頁中圖片的節點是 img,利用js 得到圖片節點下的所有地址,並且為每一個圖片新增點選事件 點選時,觸發一個url,即圖片的地址。

jQuery 圖片放大 燈箱效果

使用外掛lightBox2,原文及例項程式碼: http://www.shouce.ren/study/api/s/6948 github地址:https://github.com/lokesh/lightbox2/   引入js及 css <link rel="

圖片放大,再縮小的程式碼段

這段js還挺常用,特此記錄。 1 <form> 2   <div> 3 <div class="form-group left"> 4 <label for="imgs" class="col-sm-3 cont

圖片放大的效果(如果幫助大,關注我後期更好的作品奧)

第一步,要下載燈箱這個外掛 連線:連結: https://pan.baidu.com/s/1o1mYq5oIfo87YSQF9kjy8w 提取碼: used 下載並且解壓到本地 3.1本地的燈箱解壓如圖 進入src 目錄 如下圖 5.1 專案目錄如下 6.HTM