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

2016-02-19 14:59 110 1 收藏

下面这个带有图片预览功能的上传表单完整HTML教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

带有图片预览功能的上传表单,完整的HTML代码如下所示
  
  html
  
  head
  
  metahttp-equiv="Content-Type"content="text/html;charset=gb2312"
  
  title带有图片预览功能的上传表单webjx.com/title
  
  script
  
  functionviewmypic(mypic,imgfile){
  
  if(imgfile.value){
  
  mypic.src=imgfile.value;
  
  mypic.style.display="";
  
  mypic.border=1;
  
  }
  
  }
  
  /script
  
  /head
  
  body
  
  center
  
  form
  
  inputname="imgfile"type="file"id="imgfile"size="40"onchange="viewmypic(showimg,this.form.imgfile);"/
  
  br/
  
  /form
  
  imgname="showimg"id="showimg"src=""style="display:none;"alt="预览图片"/
  
  br/
  
  /div
  
  divstyle="display:none"
  
  /div
  
  /center
  
  /body
  
  /html
  

来源:https://www.tulaoshi.com/n/20160219/1608554.html

延伸阅读
标签: Web开发
在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的input标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选。请看下面的例子: 下面给出这个例子的源代码,结合代码来讲各参数的设置: form name="form1" 你是否...
标签: Web开发
我们平时在日常网络生活当中,上传则是一个非常重要的功能。尤其是对于那么依靠网友分享的站点来说,上传是用户体验的重要的部分,分享是web2.0时代的主流特色,随之分享而来的上传,则是其中的关键一环。 先来说说以前的上传吧,真是令人苦恼。网络速度缓慢是最直接的原因,当然在交互设计上也存在着让人崩溃的地方,没有清晰的提示和防止...
标签: Web开发
表单在Web网页中用来给访问者填写信息,从而能获得用户信息,使网页具有交互的功能。一般是将表单设计在一个Html文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上的 ASP 或 CGI 等处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。这里我们...
标签: Web开发
   组成Cgi程序的是两部分,一部分是html页面,就是用户看到的东西。另一部分则是运行在服务器上的程序。一般来说,我们先些html页面,再些程序。所以我们的学习页是这样,先看看表单的写法,再去学习CGI程序。 对于html的表单,有比较复杂和详细的规定。但由于它们是属于html标准里的东西,所以我不打算详细讲解。最好是你自己...
标签: Web开发
表单的文本框分为单行文本框和多行文本框,故名思义,单行文本框用于输入一些简短的信息,如:姓名、E_mail地址、口令等等;多行文本框用于输入内容较长的信息,如:用户意见、评论、留言等。只要你理解了表单的文本框参数的含义,制作接收信息的文本框是不难的,请看下面的例子。 一、一个单行文本框的例子 本例的源代码如下...

经验教程

386

收藏

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