`
taomac
  • 浏览: 7932 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

submit功能由图片来实现

阅读更多
1、用图片代替提交按钮submit和重置按钮reset,给图片加onclick事件

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<img src="uploads/200707/30_145425_001.jpg"onClick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg"onClick="javascript:freset(document.form1);">
</form>

2、给1的图片加上style,用于弥补方法1鼠标移到图片上无反应,未能给客户好的浏览体验

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<img src="uploads/200707/30_145425_001.jpg"style="cursor:hand;"onClick="javascript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg"style="cursor:hand;"onClick="javascript:freset(document.form1);">
</form>

3、用图片代替提交按钮submit和重置按钮reset,并加上链接,效果同2

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<ahref="javascript:fsubmit(document.form1);"><imgsrc="uploads/200707/30_145425_001.jpg" border="0"/></a>
<ahref="javascript:freset(document.form1);"><imgsrc="uploads/200707/30_145428_002.jpg" border="0"/></a>
</form>

4、使用图像域。由于默认图像域点击时都是提交表单,因而要进行适当的处理:

<scriptlanguage="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post"action="login.asp">
姓名: <input type="text"name="textfield" />
<input type="image" name="imageField"onClick="javascript:fsubmit(document.form1);return false;"src="uploads/200707/30_145425_001.jpg">
<input type="image" name="imageField2"onClick="javascript:freset(document.form1);return false;"src="uploads/200707/30_145428_002.jpg">
</form>

要注意的是JS中表单提交和重置事件后必须加(),如submit()和reset()
分享到:
评论

相关推荐

    java实现上传图片功能

    这里我们主要探讨如何使用Java JSP技术来实现这一功能,以及如何处理上传后的图片,包括图片的剪裁和显示。首先,我们需要了解JSP(JavaServer Pages)是Java Web应用中的视图层技术,它允许我们在HTML页面中嵌入...

    实现图片上传且具有压缩功能

    在JSP(JavaServer Pages)环境中,结合Struts框架,我们可以实现用户端上传图片并进行压缩的功能。以下是对这个主题的详细阐述: 一、图片上传原理 图片上传的核心在于前端与后端的交互。前端通过HTML表单提供一个...

    jsp实现上传图片功能

    本篇将详细讲解如何使用这三个核心技术来实现一个图片上传的功能,并将图片的存放地址存储在数据库中。 一、图片上传流程 1. 前端页面:首先,我们需要创建一个HTML或JSP页面,包含一个表单,用于用户选择要上传的...

    图片上传功能的实现代码

    从给定的文件信息中,我们可以提取到关于在Java环境下实现图片上传功能的关键知识点,主要涉及JSP页面设计、Struts框架配置以及后端处理逻辑。以下是对这些知识点的详细解析: ### JSP页面设计(up.jsp) 1. **...

    PHP上传图片带预览功能

    以上代码实现了基本的图片上传和预览功能,但实际应用中可能还需要考虑其他方面,例如错误处理、文件名冲突、安全检查(防止恶意文件上传)、图像尺寸调整等。你可以根据项目需求进一步扩展这些功能,例如通过GD库或...

    jsp实现图片上传功能

    本文将深入探讨如何使用JSP实现图片上传功能,这对于构建交互性强、用户体验良好的网站至关重要。 首先,我们需要理解图片上传的基本流程。通常,用户通过网页上的表单选择本地图片,点击提交后,这些文件会被发送...

    JSP实现图片上传功能

    在本文中,我们将深入探讨如何使用Java Server Pages (JSP) 实现图片上传功能,并结合数据库来保存图片的路径,以及将上传的图片保存到指定的文件夹中。这一过程通常涉及前端表单设计、后端处理代码编写、文件存储...

    django layui表单加图片上传功能(Django,layui).zip

    在本文中,我们将深入探讨如何在Django框架中结合Layui实现图片上传功能。Layui是一款优秀的前端UI框架,而Django是Python后端开发的流行框架,两者结合可以构建出美观且功能强大的Web应用。以下是实现这一功能的...

    上传并显示图片(使用jsp+tag编程,实现上传并显示图片功能)

    本教程将详述如何使用JSP(JavaServer Pages)结合Tag技术来实现这一功能。JSP是一种动态网页技术,它允许开发者在HTML页面中嵌入Java代码,提供了更便捷的方式来处理服务器端逻辑。Tag则是JSP的一种扩展机制,可以...

    图片和文件上传的前端实现

    这里我们将深入探讨这些技术如何协同工作来实现这一功能。 首先,`index.html`是网页的主文件,它定义了页面的结构。在图片和文件上传的场景下,`&lt;form&gt;`元素通常用来封装上传表单。这个表单可以包含一个或多个`...

    struts2实现单个图片上传

    在本教程中,我们将深入探讨如何利用Struts2实现单个图片的上传功能,无需JavaScript的额外开发。 首先,我们需要理解图片上传的基本流程。用户通过浏览器选择一张图片,然后该图片的文件数据被发送到服务器。...

    struts2实现图片上传的功能

    在Struts2中实现图片上传功能是一项常见的需求,尤其在处理用户提交的表单数据时,例如用户个人资料的头像或者产品图片等。下面将详细介绍如何利用Struts2来实现这一功能。 首先,我们需要理解文件上传的基本概念。...

    asp实现图片的上传下载

    通过以上步骤,我们可以实现ASP中的图片上传和下载功能,从而丰富网站的互动性和实用性。同时,随着技术的发展,现代Web开发中更多地使用PHP、Node.js或ASP.NET等技术,但了解这些基础的ASP知识依然有价值,因为它们...

    struts1.2实现图片上传

    &lt;input type="submit" value="上传图片" /&gt; ``` 在实际应用中,我们还需要考虑错误处理,比如文件类型检查、文件大小限制等。同时,为了保证安全性,上传的文件不应该直接保存在Web根目录下,防止用户直接访问到...

    静态网页 实现登陆注册、留言板功能 图片滑动效果

    在本项目中,初学者可以了解到如何使用HTML和CSS来创建静态网页,并实现登录注册、留言板功能以及图片滑动效果。这些是Web开发基础的重要组成部分,对于想要入门前端开发的人来说非常实用。 首先,我们来看看标题中...

    用asp上实现图片上传浏览

    在ASP(Active Server Pages)开发环境中,实现图片上传和浏览是一项常见的需求,尤其在构建...因此,对于新项目,建议使用ASP.NET搭配更现代的前端框架(如React或Vue.js)来构建更高效、更安全的图片上传和浏览功能。

    extjs+servlet实现图片上传

    在本示例中,我们将探讨如何结合ExtJS 3和Servlet技术来实现图片上传功能。 首先,我们需要理解ExtJS的组件体系。在ExtJS中,`FileUploadField`是一个专门用于文件上传的表单字段。通过这个组件,用户可以在浏览器...

    HTML5实现多文件图片预览上传功能

    总结来说,通过HTML5的File API、jQuery以及zyFile.js插件,我们可以实现多文件图片预览和上传功能。这不仅提高了用户体验,还使得文件上传变得更加简单和高效。在实际项目中,根据具体需求,还可以加入进度条、错误...

    js+koa2 实现上传下载预览功能

    在前端,我们需要监听表单的submit事件,阻止默认提交行为并使用FormData对象来封装文件数据。然后,使用fetch API或XMLHttpRequest向后端发送POST请求。在Koa2中,可以使用`koa-bodyparser`或`koa-multer`等库来...

    php上传图片并预览源码

    这个"php上传图片并预览源码"示例提供了HTML和PHP两种语言的代码,帮助开发者理解如何实现这一功能。下面我们将深入探讨其中涉及的关键知识点。 1. **表单(HTML)**: HTML页面通常使用`&lt;form&gt;`元素来创建一个...

Global site tag (gtag.js) - Google Analytics