js如何提取form 中的内容实现预览!

最新推荐文章于 2024-07-25 08:40:26 发布
最新推荐文章于 2024-07-25 08:40:26 发布
阅读量756 收藏
点赞数
分类专栏： JavaScript 文章标签： button input list function null alignment

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可预览的主页制作器</title>
</head>

<body>
<FORM METHOD="Post" ACTION="">
<script language = "JavaScript">
<!--hide this script from old browsers
document.write('<B>Prompt mode is now working.</B><BR>')
document.write('<PRE><B>Help status:  </B>')
helpon = false  // ...true or false
document.write('<input type="radio" name="radiohelp"  value="true" onClick = " helpon = true"> ON ')
document.write('<input type="radio" name="radiohelp"  value="false" checked onClick = " helpon = false"> OFF <BR>')
document.write('<B>HTML mode:    </B>')
modeindex = 0   // ...0=simple, 1=sample, 2=prompt
document.write('<input type="radio" name="radiomode"  value="Copyright 1996  Ray Daly" checked onClick = " modeindex = 0 "> Simple ')
document.write('<input type="radio" name="radiomode"  value="Copyright 1996  Ray Daly" onClick = " modeindex = 1"> Sample ')
document.write('<input type="radio" name="radiomode"  value="Copyright 1996  Ray Daly" onClick = " modeindex = 2"> Prompt <BR></PRE>')
document.write('<TABLE CELLSPACING="0" BORDER="0">')
document.write('<TR><TH><input type="button" value=" Start " onClick="HjButton(this.form,jStart)">')
document.write('<input type="button" value=" End " onClick="HjButton(this.form,jEnd)">')
document.write('</TH><TH><input type="button" value="页面显示" onClick="preview(this.form)">')
document.write('</TH><TH><input type="button" value="保存" onClick="Save(this.form)">')
document.write('</TH><TH><input type="button" value="关于" onClick="About(this.form)">')
document.write('</TH></TR><TR><TH><input type="button" value=" B " onClick="HjButton(this.form,jBold)">')
document.write('<input type="button" value="  I  " onClick="HjButton(this.form,jItalics)">')
document.write('<input type="button" value=" PRE " onClick="HjButton(this.form,jPre)">  ')
document.write('</TH><TH><input type="button" value=" H1 " onClick="HjButton(this.form,jH1)">')
document.write('<input type="button" value=" H2 " onClick="HjButton(this.form,jH2)">')
document.write('<input type="button" value=" H3 " onClick="HjButton(this.form,jH3)">  ')
document.write('</TH><TH><input type="button" value=" OL " onClick="HjButton(this.form,jOL)">')
document.write('<input type="button" value=" UL " onClick="HjButton(this.form,jUL)">')
document.write('<input type="button" value=" LI " onClick="HjButton(this.form,jLI)">  ')
document.write('</TH><TH><input type="button" value=" DL " onClick="HjButton(this.form,jDL)">')
document.write('<input type="button" value=" DT " onClick="HjButton(this.form,jDT)">')
document.write('<input type="button" value=" DD " onClick="HjButton(this.form,jDD)"><BR>')
document.write('</TH></TR><TR><TH><input type="button" value=" P " onClick="HjButton(this.form,jPara)">')
document.write('<input type="button" value=" BR " onClick="HjButton(this.form,jBreak)">')
document.write('<input type="button" value=" HR " onClick="HjButton(this.form,jRule)">  ')
document.write('</TH><TH><input type="button" value="    Anchor     " onClick="HjButton(this.form,jAnchor)">  ')
document.write('</TH><TH><input type="button" value=" L" onClick="HjButton(this.form,jImageL)">')
document.write('<input type="button" value=" Image " onClick="HjButton(this.form,jImage)">')
document.write('<input type="button" value="R" onClick="HjButton(this.form,jImageR)">  ')
document.write('</TH><TH><input type="button" value="     Center     " onClick="HjButton(this.form,jCenter)">  ')
document.write('</TH></TR></TABLE>')
function HjReset (form) {                // ...required because RESET does not reset values, just GUI
               helpon = false
               modeindex = 0
               form.TEXT.value = ""
}
function HTMLtag (buttonname, insertmode, inserttext, tagstart, tagmiddle, tagend, sampletext, sampletext2, helptext) {
        // ...this fuction defines the object HTMLtag
        this.buttonname = buttonname
        this.insertmode = insertmode   
                // ...1=none 2=standard input 3=lists (UL and OL) 4=DL list 5=anchor
        this.inserttext = inserttext    // ...prompt when asking for insert text
        this.tagstart   = tagstart
        this.tagmiddle  = tagmiddle
        this.tagend     = tagend
        this.sampletext = sampletext    // ...sample text placed between tags in TextArea
        this.sampletext2= sampletext2
        this.helptext   = helptext
}
jStart = new HTMLtag ( "Start", "2", "Enter the document TITLE", " <HTML><HEAD><TITLE>", "",               "</TITLE></HEAD><BODY>",
        "Title of the document (eg. HTMLjive Page)", "" ,
        "Tags for start of document and the TITLE go here.  Use the END button when your document is complete." )
jEnd = new HTMLtag ( "End", "1", "", " </BODY></HTML>", "", "",
        "", "" ,
        "This puts in the closing tags when your document is complete." )
jBold = new HTMLtag ( "B", "2", "Enter the text to be BOLD", " <B>", "", "</B>",
        "This will be bold", "" ,
        "The text placed between the <B> and the </B> will be BOLD" )
jItalics = new HTMLtag ( "I", "2", "Enter the text to be ITALICIZED", " <I>", "", "</I>",
        "This will be in italics", "" ,
        "The text placed between the <I> and the </I> will be ITALICIZED" )
jPre = new HTMLtag ( "PRE", "2", "Enter the text to be PREformatted", " <PRE>", "", "</PRE>",
        "This will be PREformatted", "" ,
        "The text placed between the <PRE> and the </PRE> will be PREformatted" )
jPara = new HTMLtag ( "P", "2", "Enter the text for a PARAGRAPH", " <P>", "", "</P>",
        "Start of a PARAGRAPH that continues until the start of next PARAGRAPH.", "" ,
        "The text placed after the <P> will be a separate PARAGRAPH until the next <P>" )
jBreak = new HTMLtag ( "BR", "1", "", " <BR>", "", "",
        "", "" ,
        "This tag forces a line break, start of the next line." )
jRule = new HTMLtag ( "HR", "1", "", " <HR>", "", "",
        "", "" ,
        "This tag puts a (horizontal rule) line on the page." )
jH1 = new HTMLtag ( "H1", "2", "Enter the text for the HEADLINE", " <H1>", "", "</H1>",
        "This will be a top level HEADLINE", "" ,
        "The text placed between the <H1> and the </H1> will be the HEADLINE." )
jH2 = new HTMLtag ( "H2", "2", "Enter the text for the HEADLINE", " <H2>", "", "</H2>",
        "This will be a next to top level HEADLINE", "" ,
        "The text placed between the <H2> and the </H2> will be the HEADLINE." )
jH3 = new HTMLtag ( "H3", "2", "Enter the text for the HEADLINE", " <H3>", "", "</H3>",
        "This will be a third from top level HEADLINE", "" ,
        "The text placed between the <H3> and the </H3> will be the HEADLINE." )
jCenter = new HTMLtag ( "Center", "2", "Enter the text to be CENTERED", " <CENTER>", "", "</CENTER>",
        "This will be a CENTERED", "" ,
        "The text placed between the <CENTER> and the </CENTER> will be the CENTERED." )
jOL = new HTMLtag ( "OL", "3", "Enter FIRST item for (Numbered) ORDERED LIST", " <OL><LI> ", "</LI><LI> ", "</LI></OL>",
        "This is one item in the numbered list", "Next item in the numbered list" ,
        "Create an ORDERED LIST by placing multiple items between <LI> and </LI>" )
jOL.inserttext2 = "Enter NEXT item for ORDERED LIST"
jUL = new HTMLtag ( "UL", "3", "Enter FIRST item for (Plain) UNORDERED LIST", " <UL><LI> ", "</LI><LI> ", "</LI></UL>",
        "This is one item in the plain list", "Next item in the plain list" ,
        "Create an ORDERED LIST by placing multiple items between <LI> and </LI>" )
jUL.inserttext2 = "Enter NEXT item for UNORDERED LIST"
jLI = new HTMLtag ( "LI", "2", "Enter the text for an item in a LIST", " <LI>", "", "</LI>",
        "This is an item in a LIST", "" ,
        "The text placed between the <L1> and the </L1> will one item in a LIST.  Requires OL or UL." )
jDL = new HTMLtag ( "UL", "4", "Enter item for DEFINITION LIST", " <DL><DT>", "</DT> <DD>", " </DD></DL>",
        "Item to be defined", "Definition of the item" ,
        "DEFINITION LISTS have two elements: item and definition.  Enter the item." )
jDL.inserttext2 = "Enter the definition "
jDL.tagmiddle2='</DD> <DT>'
jDT = new HTMLtag ( "DT", "2", "Enter item for a DEFINITION LIST", " <DT>", "", "</DT>",
        "This is item for a DEFINITION LIST", "" ,
        "The text placed between the <DT> and the </DT> will one item in a LIST.  Requires DL." )
jDD = new HTMLtag ( "DD", "2", "Enter definition for a DEFINITION LIST", " <DD>", "", "</DD>",
        "This is definition in a DEFINITION LIST", "" ,
        "The text placed between the <DD> and the </DD> will one item in a LIST.  Requires DL." )
jImageL = new HTMLtag ("Image", 2, "Enter the URL (e.g., sample.gif)", ' <IMG SRC="', "", '" ALIGN=LEFT>',
        "URL to graphic (e.g. sample.gif)" , "",
        "Enter the URL for the graphic (e.g., sample.gif) for LEFT alignment" )
jImage = new HTMLtag ("Image", 2, "Enter the URL (e.g., sample.gif)", ' <IMG SRC="', "", '">',
        "URL to graphic (e.g. sample.gif)" , "",
        "Enter the URL for the graphic (e.g., sample.gif)" )
jImageR = new HTMLtag ("Image", 2, "Enter the URL (e.g., sample.gif)", ' <IMG SRC="', "", '" ALIGN=RIGHT>',
        "URL to graphic (e.g. sample.gif)" , "",
        "Enter the URL for the graphic (e.g., sample.gif) for RIGHT alignment" )
jAnchor = new HTMLtag ("Anchor", 5, "Enter the URL (e.g., http://www.yahoo.com)", ' <A HREF="', '"> ', '</A>',
        "http://www.yahoo.com", "Yahoo (description here)",
        "Enter the URL (e.g., http://www.yahoo.com/index.html) followed by the description." )
jAnchor.inserttext2 = "Enter description (e.g., Yahoo)"
function About (form) {
        alert('建站资源网panda  http://www.jzzy.com')
}
function Save (form) {
        alert('No SAVE function is available.  You must "cut & paste" your document into another application.')
}
function HjButton (form,selection) {    // ...all HTML button call this routine
        if (helpon) {
                if (confirm(selection.helptext)){
                        addHTML (form,selection)
                }
        }else{
                addHTML (form,selection)
        }
}
function addHTML (form,selection) {
        // ...add text to value ot TextArea
        cancel = false
        addText=selection.tagstart
        if (modeindex==2) {     // ...insert mode
                if (selection.insertmode != 1 ) {       // ...if none, skip it all
                        addText += addHTMLinsert (selection, addText, form)
                        if (addText == selection.tagstart) {
                                cancel = true
                        }
                }
        }
        if (modeindex==1) {     // ...sample mode
                addText = addText + selection.sampletext + selection.tagmiddle + selection.sampletext2
        }
        if (modeindex==0) {     // ...simple mode
                addText += selection.tagmiddle
        }
        addText += selection.tagend
        if (cancel == false) {  // ...put text into TextArea unless canceled
                form.TEXT.value += addText
        }
}
function addHTMLinsert (selection, addText, form) {
        // ...insert mode
        // ...addText alread as .tagstart, cancel=false
        // ...insertmodes 1=none, 2=insert, 3=lists (UL and OL), 4=DL list, 5=anchor
        if (selection.insertmode ==2) {         // ...simple insert (eg.<B>...</B>
                i = ""
                i = prompt (selection.inserttext, "")
                if ((i != null) && (i != "")) {                 // ...if input add
                        addText = i
                }else{
                        addText = ""
                }
        }
        if (selection.insertmode == 3) {        // ...UL and OL lists
                addText = ""
                i = ""
                i = prompt (selection.inserttext, "")
                if ((i != null) && (i != "")) {
                        addText = i
                        while ((i != null) && (i != "")) {      // ...get next until null
                                i=prompt (selection.inserttext2, "")
                                if ((i != null) && (i != "")) {
                                        addText=addText + selection.tagmiddle + i
                                }
                        }
                }
        }
        if (selection.insertmode == 4) {        // ...DL list
                i= "dummy"
                j = i
                addText = ""
                count = 0
                while ((i != null) && (i != "") && (j != null) && (j !="")) {   // ...get next until null
                        ++count
                        i = ""
                        i = prompt (selection.inserttext, "")
                        // ... used for debugging form.TEXT.value += "-->" + i + "<--"
                        if ((i != null) && (i != "")) {
                                j = ""
                                j=prompt (selection.inserttext2, "")
                                if ((j != null) && (j != "")) {
                                        if (count > 1){
                                                addText += selection.tagmiddle2

                                        }
                                        addText=addText +i + selection.tagmiddle + j
                                }
                        }
                }
        }
        if (selection.insertmode == 5) {        // ...Anchor
                addText = ""
                i = ""
                i = prompt (selection.inserttext, "")
                // ... used for debugging form.TEXT.value += "-->" + i + "<--"
                if ((i != null) && (i != "")) {
                        j = ""
                        j=prompt (selection.inserttext2, "")
                        if ((j != null) && (j != "")) {
                                addText=i + selection.tagmiddle + j
                        }
                }
        }
        return addText

}

function preview(form) {

             msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=yes");
             msg.document.write(form.TEXT.value);
}

<!-- done hiding from old browsers -->

</script>

<b>HTMLjive Document:</b><br>

<TEXTAREA NAME="TEXT" ROWS="16" COLS="75" WRAP="VIRTUAL"></TEXTAREA>

<INPUT TYPE="reset" VALUE= "Erase and Restart Document" onClick="HjReset(this.form)">

</FORM>
</body>

</html>

Sky_666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现图片在线预览
八月长安w的博客
09-12 1213
js在线预览图片   一、效果预览 二、实现代码： js图片在线预览 function viewPic(obj){ var fileUrl=$(obj).attr("fileUrl"); var title=$(obj).attr("title"); $("#pic").attr("src",fileUrl); $("#pictitle").html(tit
用js实现预览待上传的本地图片
10-30
本文将详细解析如何利用JavaScript（简称JS）来实现这一功能。 #### 一、核心概念与原理 1. **文件API**：这是一个浏览器提供的接口，允许JavaScript访问用户计算机上的文件系统中的文件，特别是通过`...
form action实现pdf预览
dchenge的博客
12-07 336
接口返回的数据流会在浏览器上按照默认形式打开；paf格式会直接在浏览器显示，doc格式会直接下载。action添加预览接口，返回数据流；form表单中添加具体参数；
JS使用H5实现图片预览
零学IT
07-18 6993
上传图片实现预览的功能，以下是代码的实现：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传预览</title> <script type="text/javascript"> //预览图片,参数说明：第一个参数：要预览的file对象，第二个参数：预览的img标签的id名称 function yl(obj,id) {
form表单中，file选择图片后预览
sayyy的专栏
05-29 945
前言 略 代码 <!DOCTYPE html> <html lang="zh" > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .preview-item {width:400px;height:300px;overflow:hidden;} </s
form表单、右侧预览功能，form表单与右侧预览区域联动
m0_52743009的博客
10-10 420
【react】form表单提交、右侧预览功能，form表单与右侧预览区域联动
[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]
Tobey(我是机器人)
09-21 745
1. 在开发`JavaWeb`后台功能的时候，有时候需要对正在编辑的表单里的数据进行前端模拟预览，这样能提前发现问题并修正，修正完之后就可以正式提交。好处就是避免了让客户浏览到错误的数据，那么如何做？
js 实现文件上传预览（学习）
jhg6452的博客
08-28 1699
2.1formData是一个对象，在html的form表单触发提交后，可以通过formData来接受，其对应的数据会存储进去。4.5 执行html，从localhost进入，选择文件上传后就能看到文件已经在当前目录了。4.2 vscode打开服务端目录在里边新建文件（就是默认的www的目录，客户端上有入口）1.2 依靠js提供的api，FormData来实现获取二进制流文件。1.3 依靠js提供的api，XMLHttpRequest发送请求。1.4 依靠js提供的api，FileReader实现本地预览。.
odoo16 使用JS实现图片预览
m0_62065137的博客
01-08 661
该模块主要解决form视图中图片字段无法进行预览，可能是odoo底层对form视图的图片字段有特别处理，加上了编辑按钮却没有加载zoom属性，而正常zoom属性加载的话会给img加上'data-tooltip-template'和'data-tooltip-info'属性，所以通过js的方式给加载完成的img加上这两个属性，注意事项在清单文件里面的描述都写了，实力有限只能通过给原图片字段加class和使用js来进行控制望见谅。
js 实现选择图片，预览，上传功能
zcc的博客
12-26 1202
js选择图片，预览，上传功能。
vue中video标签实现视频预览
weixin_45861491的博客
08-01 2149
vue中video标签实现视频预览
JS使用H5实现图片预览功能
10-16
在JavaScript和HTML5中，实现图片预览功能是一项常见的需求，尤其在用户上传图片时，预览功能可以提供即时的反馈，提升用户体验。本篇文章将详细介绍如何使用JS和H5来实现这一功能。 首先，H5（HTML5）引入了许多新...
js实现的在本地预览图片功能示例
10-16
在JavaScript中，本地预览图片功能通常用于Web应用，让用户在上传图片之前先预览效果。这个功能对于用户体验至关重要，因为它允许用户确认所选文件是否符合预期，特别是在处理图像时。以下是对这个功能的详细解释和...
js实现图片上传预览原理分析
10-19
在本文中，我们将深入探讨JavaScript实现图片上传预览的原理。图片上传预览是网页中常见的一种功能，它允许用户在上传图片之前先预览效果，确保图片符合预期。这一功能的实现依赖于HTML5中的FileReader API。 首先...
Form-Preview:使用表单预览预览表单
05-08
几个演示：特征预览表单输入在预览元素中输出之前处理输入在元素或元素的属性中填写输入文献资料 jQuery预览功能$(element).preview(options) -是Form Preview jQuery插件的核心。 这是此函数的语法： $ ( '#...
Arraylist与LinkedList的区别
尚未佩妥剑 转眼便江湖
07-25 565
概念概念。
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
最新发布
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
jsp中如何实现上传图片时预览图片的功能
06-10
在JSP中实现上传图片时预览图片的功能，可以使用HTML5的File API和JavaScript来实现。 首先，在表单中添加一个type为file的input元素，用于选择要上传的图片文件： ```html <form> <input type="file" id="upload" onchange="previewImage()" /> <br/> <img id="preview" src="#" alt="预览图片" /> </form> ``` 然后，在JavaScript中编写预览图片的函数previewImage()，该函数获取选中的文件，将其转换为DataURL格式，然后将其赋值给img元素的src属性即可实现预览功能： ```javascript function previewImage() { var file = document.getElementById("upload").files[0]; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { document.getElementById("preview").src = e.target.result; } } } ``` 在用户选择图片后，调用previewImage()函数即可预览图片。注意，该方法只能在现代浏览器中使用，不支持IE9及以下版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值