- 浏览: 251466 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
青橙--杰:
我是沙发,第一次做,不见怪
轻松实现图片上传并回显 -
青橙--杰:
...
轻松实现图片上传并回显 -
juedaihuai:
[flash=200,200][/flash]
Spring 3.0 maven的pom配置 -
107x:
不错,谢谢!
Spring 3.0 maven的pom配置 -
narutolby:
iccboy 写道请问博主,这个和commons-httpcl ...
httpclient maven
图片上传及文件上传,前端html实现文件上传和普通的向后台传参数不同,必须用到form表单,同时form标签必须加上enctype="multipart/form-data"属性,method必须为post,表单中的input的type为file,这样前端上传文件的工作就完成了,这里后台文件的存储不做详细的介绍,因为用到的是struts2,文件上传的功能已经封装好了,但是还是需要注意几点,action中类型为File的属性名必须和input标签的name相同,同时action中必须有contentType和fileName属性,这里不是本文讲的重点就不做详细介绍了。
大家知道,form表单的post请求是同步请求,如果没有指定target属性,默认情况下提交后会刷新页面,想要做到提交请求后不页面不动即能回显上传的图片,这就需要一些处理,这里我用到了隐藏的iframe,将form表单的target指向iframe的名字,这样form表单提交后返回的结果将在iframe中显示。
关于iframe中显示的内容是图片回显的关键,以下是返回的内容:
可以看到返回的内容很简单,就是一段javascript代码,因为当form表单提交后,我做了url重定向,并把图片的存储路径作为重定向url的参数,这段javascript代码首先从iframe的location中获得图片的存储路径,然后调用父窗口的showPic函数,并将图片存储路径传入函数,showPic函数是写在父床口中的,为什么可以这么做,因为子窗口可以调用父窗口的函数,但是反过来父窗口调用子窗口的函数是不被允许的。showPic函数如下:
它的作用就是将img标签的src指向传过来的图片路径,这时候浏览器就回去加载这个图片,这样就轻松的实现了图片上传并迅速回显的功能,我附上了实现这个功能的整个工程,是一个eclipse的maven工程,需要通过本机maven命令下载依赖包。
大家知道,form表单的post请求是同步请求,如果没有指定target属性,默认情况下提交后会刷新页面,想要做到提交请求后不页面不动即能回显上传的图片,这就需要一些处理,这里我用到了隐藏的iframe,将form表单的target指向iframe的名字,这样form表单提交后返回的结果将在iframe中显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Upload Image Demo</title> <script type="text/javascript" src="js\jquery-1.7.1.min.js"></script> <script type="text/javascript"> function upload(){ $('form').submit(); $('img').attr('src','img/vote_img_loading.png') } $(document).ready(function(){ $(':input[type=file]').change(upload); }); function showPic(path){ $('img').attr('src','file/'+path).next('span').css('visibility','visible'); } </script> <style type="text/css"> .pic { position: relative; width: 100px; height: 100px; float: left; display: inline; margin: 0 5px 0 0; cursor: pointer; overflow: hidden; } .pic span { position: relative; color: white; margin: -20px 0 0; display: block; height: 20px; width: 100px; text-align: center; overflow: hidden; line-height: 20px; background: url(img/template_list_titlebg.png) ; } .pic form { position: absolute; width: 100px; height: 100px; overflow: hidden; z-index: 10; margin: -100px 0 0; } .pic input { font-size: 100px; cursor: pointer; -moz-opacity: 0; filter: alpha(opacity = 0); opacity: 0; background: none; border: none; margin: -10px 0 0 -650px 9; } </style> </head> <body> <iframe style="display:none" name="if"> </iframe> <div class="pic"> <img height="100" width="100" src="img/update_pic.png"><span style="visibility: hidden">重新上传</span> <form enctype="multipart/form-data" method="POST" action="upload.action" target="if"> <input type="file" name="upload"/> </form> </div> </body> </html>
关于iframe中显示的内容是图片回显的关键,以下是返回的内容:
<html> <head> </head> <body> <script type="text/javascript"> var pid = window.location.search.split('=')[1]; top.window.showPic(pid); </script> </body> </html>
可以看到返回的内容很简单,就是一段javascript代码,因为当form表单提交后,我做了url重定向,并把图片的存储路径作为重定向url的参数,这段javascript代码首先从iframe的location中获得图片的存储路径,然后调用父窗口的showPic函数,并将图片存储路径传入函数,showPic函数是写在父床口中的,为什么可以这么做,因为子窗口可以调用父窗口的函数,但是反过来父窗口调用子窗口的函数是不被允许的。showPic函数如下:
function showPic(path){ $('img').attr('src','file/'+path).next('span').css('visibility','visible'); }
它的作用就是将img标签的src指向传过来的图片路径,这时候浏览器就回去加载这个图片,这样就轻松的实现了图片上传并迅速回显的功能,我附上了实现这个功能的整个工程,是一个eclipse的maven工程,需要通过本机maven命令下载依赖包。
- Image.zip (45.7 KB)
- 下载次数: 357
发表评论
-
【转载】java实现动态切换上网IP (ADSL拨号上网
2013-11-15 14:08 1103转载:http://sesame.iteye.com/bl ... -
java gc过程
2012-07-09 10:30 1149package SRC; /*如果一个对象在根搜索后发现 ... -
实现html进入编辑状态,在线编辑器中用到的(html的designMode)
2012-07-01 16:17 1681<head> <script ty ... -
HTML5 API——无刷新更新地址 history.pushState/replaceState 方法
2012-05-31 14:19 1565[size=large]尽管是上面讲到的《JavaScript ... -
java gc算法
2012-05-05 11:15 843http://developer.51cto.com/art/ ... -
document.compatMode介绍
2012-05-01 09:31 1035用法:p = object.compatMode Prope ... -
雅虎14条前端优化原则
2012-04-21 20:51 1016有兴趣的同学可以装个 Firebug 下的 Yslow ,测试 ... -
Pinyin4j解决用拼音对汉字的搜索
2012-04-16 15:03 16671. 简单介绍 有时 ... -
前端性能优化
2012-04-10 13:38 7608一、 前端性能黄金法则 ... -
drag-and-drop实现浏览器的图片预览
2012-04-04 18:00 2428今天刚试过chrome的drag and drop A ... -
data类型的Url格式
2012-04-03 21:45 9090今天在浏览网站时发现了一个很奇妙的实现,于是就看了下页面 ... -
8个能够有效帮助你提高jQuery代码性能的技巧
2012-04-02 20:50 1064jQuery越来越流行了,大家可能也会发现,在浏览网站过程中, ... -
前端MVC
2012-04-02 19:04 0做过web开发的程序员基本上都听过MVC模式,像Str ... -
三种方法实现js跨域访问
2012-03-26 20:46 49158javascript跨域访问是web开发者经常遇到的问题 ... -
jquery ajaxStart和ajaxStop方法
2012-03-21 13:30 2021jquery提供了一些自定义全局函数,能够为各种与ajax相关 ... -
java实现文件的下载并解决文件名乱码问题
2012-03-05 14:22 1877[size=medium]response.setConten ... -
模仿淘宝首页淘工头像的的自由摇摆
2012-03-02 16:36 1308基于css3的transform实现淘宝首页淘工图像的自由摇摆 ... -
css3实现转动
2012-03-01 14:22 5863转 http://www.douban.com/note/17 ... -
关于jquery 的ajax返回的deferred对象
2012-02-29 22:00 842http://www.ruanyifeng.com/blog/ ... -
访问jsp页面Struts标签报错问题!
2012-02-20 09:56 1380在学习Struts2标签测试的过程中,发现不通过act ...
相关推荐
在网页开发中,图片上传和回显功能是一个常见的需求,特别是在涉及到用户个人资料编辑或商品发布等场景。本文将详细讲解如何使用HTML的`<input>`标签和jQuery库来实现多图片的上传和预览(回显)功能,无需涉及后端...
以上代码实现了WeUI框架中图片上传、预览和删除的基本功能。在实际项目中,你可能需要进一步完善,例如添加上传进度条、错误处理、服务器端上传等逻辑。由于WeUI主要关注UI层面,因此在进行功能扩展时,通常需要结合...
在Vue项目中集成百度UEditor编辑器...记得在实际应用中,根据项目需求调整配置,并确保后端接口能够正确处理图片上传请求。通过Vue-UEditor组件,你可以在Vue项目中轻松集成并定制UEditor,提供强大的富文本编辑功能。
KindEditor 是一个开源的富文本在线编辑...总之,KindEditor与Java的结合,使得在网页上实现图片上传功能变得简单而高效。理解其工作原理并妥善处理可能出现的问题,将有助于构建稳定、安全且用户友好的在线编辑环境。
此外,Guns还注重性能优化,例如,使用MyBatis Plus进行数据库操作,减少了SQL的编写量并提升了执行效率。 四、Guns扩展 Guns的扩展性体现在多个方面。它可以对接各种第三方服务,如支付平台、短信服务等,通过...
Vue Dropzone是一个基于Vue.js框架的开源组件,用于实现便捷的文件上传功能,特别是对于图片预览有着良好的支持。在JavaScript开发中,Vue.js是一个非常流行的前端框架,它以其轻量级、易学习和可复用组件的特点受到...
通过上述步骤,我们可以利用Bootstrap FileInput插件结合JavaScript轻松实现图片上传功能,并支持预览、上传进度等功能。这对于提高用户体验和简化前端开发工作量都大有裨益。此外,还可以根据实际需求进一步扩展和...
在IT行业中,图片上传功能是网站和应用程序中非常常见的一个需求。"支持手机网站上传图片,支持中文名字"这一标题表明我们关注的是一个允许用户通过手机浏览器上传包含中文名字图片的功能。这一特性对于中文用户来说...
通过使用Java和OSS,可以轻松实现下载功能。这种方法可以满足大多数下载需求,并且具有很高的灵活性和可扩展性。 知识点: 1. Java下载功能的实现方式有多种,可以分为三种:将要下载的内容写到本地目录,然后将...
总的来说,Vue、Element-UI和Quill的组合提供了一个强大而灵活的富文本编辑器,可以轻松地实现视频和封面上传功能。通过自定义模块,我们可以扩展编辑器的功能,满足特定项目的需求。同时,确保前后端交互的安全性和...
对于不支持上述API的旧版浏览器(如IE9及以下版本),可以采用ActiveX或VML等技术来实现图片预览。 1. **IE9及以下版本**: - 使用`document.selection.createRange().text`获取图片数据。 - 通过`filter`属性...
通过简单的HTML和JavaScript代码,开发者可以轻松地添加到网页中,并实现各种高级功能,如文件预览、进度条显示、错误提示等。 3. **fileinput.min.css**:这个文件包含了Bootstrap-FileInput的CSS样式,确保了组件...
在实际项目中,你可能还需要考虑一些额外的问题,比如图片上传的处理、裁剪结果的保存和回显、以及错误处理等。`Cropper.js`提供了良好的可扩展性,可以根据项目需求进行定制和扩展。 总之,`Cropper.js`是一个强大...
在“劫持上传图片功能”这个场景中,通常是为了实现用户通过富文本编辑器上传图片到服务器,并将服务器返回的图片URL插入到编辑器中显示。在Vue Quill Editor中,可以通过监听其内置事件和自定义模块来实现这一功能...
在简单的回显上传示例中,服务器可能会直接读取并返回上传的文件内容,这主要用于测试和演示。但实际应用中,我们可能需要对文件进行验证,比如检查文件类型、大小,甚至执行某些转换操作。 对于更复杂的场景,例如...
7. **图片上传**:如果应用需要将选定的图片上传到服务器,那么还需要处理文件上传的逻辑。这通常涉及将图片转换为适合网络传输的格式(如JPEG或PNG),以及使用HTTP请求库(如OkHttp或AFNetworking)发送数据。 8....
在本文中,我们将深入探讨如何使用此插件实现预览和上传照片的功能,以及其核心代码和配置选项。 首先,要使用Bootstrap FileInput,我们需要在HTML文件中引入必要的CSS和JavaScript库。这些库包括Bootstrap的基础...
将此脚本保存并设置为定期执行,即可实现自动的FTP上传或下载。 通过这种方式,您可以轻松地在Windows环境中创建自定义的FTP自动化任务,无论您是要定期备份文件,还是从远程服务器获取数据,都能轻松应对。只需...
**百度WebUploader组件详解** 百度WebUploader是一款强大的前端文件上传...以上就是关于百度WebUploader组件的基本介绍和使用方法,通过熟练掌握这些知识点,你可以轻松地在项目中构建出高效、稳定的文件上传功能。