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

2016-02-19 21:10 108 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的带有图片预览功能的上传表单的完整HTML源码,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

如何在上传图片的时候能预览到该图片的样式,是很多网页制作者的所求,下面的完整html源码就是带有图片预览功能的上传表单,完整的HTML代码如下所示

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

html      
head      
meta http-equiv="Content-Type" content="text/html; charset=gb2312"      
title带有图片预览功能的上传表单webjx.com/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/webkaifa/)

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

延伸阅读
标签: Web开发
我们平时在日常网络生活当中,上传则是一个非常重要的功能。尤其是对于那么依靠网友分享的站点来说,上传是用户体验的重要的部分,分享是web2.0时代的主流特色,随之分享而来的上传,则是其中的关键一环。 先来说说以前的上传吧,真是令人苦恼。网络速度缓慢是最直接的原因,当然在交互设计上也存在着让人崩溃的地方,没有清晰的提示和防止...
标签: Web开发
   组成Cgi程序的是两部分,一部分是html页面,就是用户看到的东西。另一部分则是运行在服务器上的程序。一般来说,我们先些html页面,再些程序。所以我们的学习页是这样,先看看表单的写法,再去学习CGI程序。 对于html的表单,有比较复杂和详细的规定。但由于它们是属于html标准里的东西,所以我不打算详细讲解。最好是你自己...
标签: Web开发
表单的文本框分为单行文本框和多行文本框,故名思义,单行文本框用于输入一些简短的信息,如:姓名、E_mail地址、口令等等;多行文本框用于输入内容较长的信息,如:用户意见、评论、留言等。只要你理解了表单的文本框参数的含义,制作接收信息的文本框是不难的,请看下面的例子。 一、一个单行文本框的例子 本例的源代码如下...
标签: Web开发
HTML 5 让 HTML 这个一度单纯的置标语言焕发出成熟的魅力,使之成为 Web 开发者的强力工具。 近日W3C又推出一个新草案 HTML5 File API ,这个 API 将让大大改善基于Web 的文件上传操作,甚至可以实现直接将文件从桌面拖放至Web。 该草案使用 input type="file" /  实现文件的上传,而其对应的 API 为开发者提供了操控...
标签: Web开发
点击这里返回脚本之家 HTML教程 栏目. 上文: 标记语言引用 原文出处chapter 5 表单 互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从使用者那里收集资料,因此在设计网站时总是属于"任何状况都能拿来用"的那一类,举例来说,我们发现大概有10000种标记表单的不同方式.好吧,...

经验教程

632

收藏

21
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部