带有图片预览功能的上传表单的完整HTML

2016-02-19 21:42 193 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享带有图片预览功能的上传表单的完整HTML的教程，热爱PS的朋友们快点看过来吧！

【 tulaoshi.com - Web开发】

带有图片预览功能的上传表单，完整的HTML代码如下所示

html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title带有图片预览功能的上传表单it.com.cn/title
script
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
/script
/head
body
center
form
input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" /
br /
/form
img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" /
br /
/div
div style="display:none"
/div
/center
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1626886.html

上一篇： WPS 2024艺术字的实用操作技巧
下一篇： VC中锁定ListView的栏目头宽度

看过《带有图片预览功能的上传表单的完整HTML》的人还看了以下文章更多>>

用好HTML表单的文本框

标签： Web开发

表单的文本框分为单行文本框和多行文本框，故名思义，单行文本框用于输入一些简短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于输入内容较长的信息，如：用户意见、评论、留言等。只要你理解了表单的文本框参数的含义，制作接收信息的文本框是不难的，请看下面的例子。一、一个单行文本框的例子本例的源代码如下...

HTML5 File API改善网页上传功能

标签： Web开发

HTML 5 让 HTML 这个一度单纯的置标语言焕发出成熟的魅力，使之成为 Web 开发者的强力工具。近日W3C又推出一个新草案 HTML5 File API ，这个 API 将让大大改善基于Web 的文件上传操作，甚至可以实现直接将文件从桌面拖放至Web。该草案使用 input type="file" / 实现文件的上传，而其对应的 API 为开发者提供了操控...

HTML标记语言——表单

标签： Web开发

点击这里返回脚本之家 HTML教程栏目．上文：标记语言引用原文出处chapter 5 表单互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从使用者那里收集资料,因此在设计网站时总是属于"任何状况都能拿来用"的那一类,举例来说,我们发现大概有10000种标记表单的不同方式.好吧,...

通过Canvas及File API缩放并上传图片完整示例

标签： Web开发

示例地址：Canvas Resize Demo 原文作者：Dr. Tom Trenka 原文日期： 2013年8月6日翻译日期： 2013年8月8日 Tom Trenka 能为"我"的博客写一篇文章,对我来说是一个巨大的荣誉。Tom是Dojo框架的最初贡献者之一，也是我在SitePen公司的良师益友.我见证了他最顶级的天才能力，并且他总是第一个以前瞻性的解决方案预见了很多棘手的问...

多表单域无组件文件上传的例子

标签： ASP

最近经常有人问到这类问题,在此转贴一下,内容: 1。数据库表结构(Access)： UserID:Text(保存上传文件的用户ID) FileContentType:Text(用来保存上传文件的类型，eg:"Application/msword"，主要用来使用户能正确下载此文件） FileContent:OLE Object（保存文件数据） 2。HTML文件 muploadfile.htm <Form name="uploa...

查看更多精彩>>