下面是个小例子：
jsp页面：
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.js"></script>
</head>
<body>
<div id="content">
//form里面的是要提交到服务器的内容
<form method="post" action="add.html" enctype="multipart/form-data">
<textarea id="title" name=“title"></textarea>
</form>
//因为预览不用提交到浏览器，所以写在form外面
<input type="button" id="previewBt" value="预览"/>
</div>
//这个是要显示的预览的内容
<div id="previewContent">
</div>
</body>
<script type="text/javascript">
$(function(){
$("#previewContent").hide();//预览的div一开始隐藏
$("#previewBt").click(preview);//绑定点击事件
});
//预览事件
function preview(){
$("#content").hide();//隐藏form
$("#previewBt").hide();
var contentStr = $("#title").val();//获取textarea里面的文本信息
$("#previewContent").html(contentStr);//注意：这样用的是html()不是用val()，因为用val的话，获取到的文本信息假如含有html标签，是不会转换的
$("#previewContent").show();//把预览的显示出来
}
</script>
</html>
相关推荐
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
但是，在这个示例中，提交动作被定义在了`previewForm.js`脚本中，该脚本通过jQuery的`.submit()`方法绑定了表单提交的事件处理函数。 此外，还包含了两个外部文件的引用：`jquery-1.9.1.min.js`和`previewForm.css...
在实际应用中，jQuery的`.val()`方法用于获取表单字段的值，`.on('change', function() {...})`用于监听表单元素的变化，`.submit(function(event) {...})`用于阻止默认的表单提交行为，同时处理数据发送到服务器。...
本篇文章将详细讲解如何利用jQuery实现图片预览功能，这在网页设计中是非常常见且实用的功能，特别是对于上传图片或者展示大图时，能为用户提供更好的用户体验。 首先，我们要理解图片预览的基本原理。当用户点击...
本项目“jQuery自定义表单添加删除代码”基于jQuery 1.10.2版本，旨在实现动态地向表单中添加或删除输入元素，以及自定义标题和附件功能，这对于创建灵活的用户交互界面特别有用。以下将详细解析这个项目的重点内容...
在本文中，我们将深入探讨如何实现一个基于PHP和jQuery的多图上传功能，并带预览效果。这个功能允许用户在提交文件之前查看所选图片，从而提供更好的用户体验。虽然提供的代码可能界面简单，但核心功能是完全可行的...
本插件就是针对这一需求设计的，它允许用户一次性上传多张图片，并在上传前进行预览，提高了交互性和效率。 首先，我们需要理解`jQuery`的核心概念。`jQuery`是对JavaScript的封装，它简化了DOM操作、事件处理、...
本文将深入探讨如何使用jQuery实现一个简单的图片上传预览功能，这是一个常见的需求，尤其在网页表单中，用户需要在提交之前查看所选图片的效果。 首先，我们需要明白图片预览的基本原理。在用户选择图片文件后，...
在本实例中，我们主要探讨了如何利用Layui库进行图片上传，同时结合表单提交和Spring MVC框架实现后端处理。Layui是一个轻量级的前端组件库，提供了丰富的UI组件，包括上传功能。以下是具体的知识点： 1. **Layui...
2. **文件上传**: 在Web应用中，文件上传功能通常涉及到表单提交和HTTP协议。通过`<input type="file">`元素，用户可以选择本地文件，然后通过Ajax技术异步发送到服务器，避免页面刷新。jQuery有多种插件如`jQuery ...
这是jQuery Form Plugin，一个扩展了jQuery库，专门处理表单提交的插件。它支持异步文件上传，使得用户在无需刷新页面的情况下就能完成文件上传。通过调用`$("#formID").ajaxSubmit()`，我们可以轻松地实现Ajax提交...
HTML5手机身份证上传表单提交代码是针对移动设备优化的一项技术，它允许用户在网页上方便地上传身份证图片，并进行表单提交。这项技术主要基于HTML5的新特性，包括File API、FormData对象以及Canvas等，使得在手机端...
【jQuery拖拽式表单设计器】是Web开发中一种创新的工具，它允许用户通过简单的拖放操作在网页上创建自定义的表单。这款基于jQuery的特效利用了JavaScript库的强大功能，为开发者和非技术用户提供了一种直观、便捷的...
2. 图片预览：使用`change`事件监听文件输入控件，`FileReader` API读取文件内容并显示为预览图。 3. 图片大小和类型限制：检查文件大小，确保不超过服务器允许的最大值，同时验证文件类型，如仅接受.jpg、.png等...
**jQuery拖拽式表单设计器——Formbuild** Formbuild是一款基于jQuery技术的高效、易用的Web拖拽式表单设计器。它为开发者提供了一种简单直观的方式，使得非编程背景的用户也能轻松创建和编辑复杂的在线表单。在...
用户调整裁剪框时，使用jQuery动态更新预览图，使得用户在提交前就能看到最终裁切效果。这通常涉及到计算新的CSS变换属性，如`transform: translate(x, y) scale(w, h)`。 在安全方面，要注意限制上传文件的类型和...
在“6个非常精美的Web前端表单提交”中，我们可以看到各种创新的设计，如动态验证、实时预览、响应式布局等。这些特性不仅提高了表单的可用性，也增强了整体的视觉吸引力。例如，通过AJAX实现无刷新提交，可以在不...
"jquery上传图片预览"是Web开发中的一个常见功能，允许用户在提交图片到服务器之前先在页面上看到预览效果。这个功能提高了用户体验，让用户在上传之前可以确认图片的质量和方向，避免误传。 实现这一功能的关键...
3. 考虑到表单提交，我们需要处理图片数据。通常，我们会使用Ajax将图片数据与其他表单数据一起发送到服务器。这涉及到`FormData`对象的使用： ```javascript var formData = new FormData(); formData.append(...