`

轻松实现图片上传并回显

阅读更多
  图片上传及文件上传,前端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中显示。

  <!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命令下载依赖包。
分享到:
评论
2 楼 青橙--杰 2015-12-01  
我是沙发,第一次做,不见怪
1 楼 青橙--杰 2015-12-01  

相关推荐

    如何用input标签和jquery实现多图片的上传和回显功能

    在网页开发中,图片上传和回显功能是一个常见的需求,特别是在涉及到用户个人资料编辑或商品发布等场景。本文将详细讲解如何使用HTML的`&lt;input&gt;`标签和jQuery库来实现多图片的上传和预览(回显)功能,无需涉及后端...

    weui框架实现上传、预览和删除图片功能代码

    以上代码实现了WeUI框架中图片上传、预览和删除的基本功能。在实际项目中,你可能需要进一步完善,例如添加上传进度条、错误处理、服务器端上传等逻辑。由于WeUI主要关注UI层面,因此在进行功能扩展时,通常需要结合...

    解决Vue使用UEditor百度编辑器,上传图片服务配置问题(源码)

    在Vue项目中集成百度UEditor编辑器...记得在实际应用中,根据项目需求调整配置,并确保后端接口能够正确处理图片上传请求。通过Vue-UEditor组件,你可以在Vue项目中轻松集成并定制UEditor,提供强大的富文本编辑功能。

    kindeditor 上传图片java

    KindEditor 是一个开源的富文本在线编辑...总之,KindEditor与Java的结合,使得在网页上实现图片上传功能变得简单而高效。理解其工作原理并妥善处理可能出现的问题,将有助于构建稳定、安全且用户友好的在线编辑环境。

    Guns文档-完整版

    此外,Guns还注重性能优化,例如,使用MyBatis Plus进行数据库操作,减少了SQL的编写量并提升了执行效率。 四、Guns扩展 Guns的扩展性体现在多个方面。它可以对接各种第三方服务,如支付平台、短信服务等,通过...

    vuedropzone一个拖动文件上传的Vuejs组件支持图片预览

    Vue Dropzone是一个基于Vue.js框架的开源组件,用于实现便捷的文件上传功能,特别是对于图片预览有着良好的支持。在JavaScript开发中,Vue.js是一个非常流行的前端框架,它以其轻量级、易学习和可复用组件的特点受到...

    【JavaScript源代码】Bootstrap FileInput实现图片上传功能.docx

    通过上述步骤,我们可以利用Bootstrap FileInput插件结合JavaScript轻松实现图片上传功能,并支持预览、上传进度等功能。这对于提高用户体验和简化前端开发工作量都大有裨益。此外,还可以根据实际需求进一步扩展和...

    支持手机网站上传图片,支持中文名字

    在IT行业中,图片上传功能是网站和应用程序中非常常见的一个需求。"支持手机网站上传图片,支持中文名字"这一标题表明我们关注的是一个允许用户通过手机浏览器上传包含中文名字图片的功能。这一特性对于中文用户来说...

    java利用oss实现下载功能

    通过使用Java和OSS,可以轻松实现下载功能。这种方法可以满足大多数下载需求,并且具有很高的灵活性和可扩展性。 知识点: 1. Java下载功能的实现方式有多种,可以分为三种:将要下载的内容写到本地目录,然后将...

    vue结合element-ui和quill富文本编辑器实现上传视频和封面

    总的来说,Vue、Element-UI和Quill的组合提供了一个强大而灵活的富文本编辑器,可以轻松地实现视频和封面上传功能。通过自定义模块,我们可以扩展编辑器的功能,满足特定项目的需求。同时,确保前后端交互的安全性和...

    上传图片预览

    对于不支持上述API的旧版浏览器(如IE9及以下版本),可以采用ActiveX或VML等技术来实现图片预览。 1. **IE9及以下版本**: - 使用`document.selection.createRange().text`获取图片数据。 - 通过`filter`属性...

    bootstrap文件上传bootstrap-fileinput

    通过简单的HTML和JavaScript代码,开发者可以轻松地添加到网页中,并实现各种高级功能,如文件预览、进度条显示、错误提示等。 3. **fileinput.min.css**:这个文件包含了Bootstrap-FileInput的CSS样式,确保了组件...

    cropper制作图片裁剪不失真

    在实际项目中,你可能还需要考虑一些额外的问题,比如图片上传的处理、裁剪结果的保存和回显、以及错误处理等。`Cropper.js`提供了良好的可扩展性,可以根据项目需求进行定制和扩展。 总之,`Cropper.js`是一个强大...

    vue-quill-editor.7z

    在“劫持上传图片功能”这个场景中,通常是为了实现用户通过富文本编辑器上传图片到服务器,并将服务器返回的图片URL插入到编辑器中显示。在Vue Quill Editor中,可以通过监听其内置事件和自定义模块来实现这一功能...

    一个简单的node文件上传程序

    在简单的回显上传示例中,服务器可能会直接读取并返回上传的文件内容,这主要用于测试和演示。但实际应用中,我们可能需要对文件进行验证,比如检查文件类型、大小,甚至执行某些转换操作。 对于更复杂的场景,例如...

    自定义界面选图片

    7. **图片上传**:如果应用需要将选定的图片上传到服务器,那么还需要处理文件上传的逻辑。这通常涉及将图片转换为适合网络传输的格式(如JPEG或PNG),以及使用HTTP请求库(如OkHttp或AFNetworking)发送数据。 8....

    bootstrap fileinput插件实现预览上传照片功能

    在本文中,我们将深入探讨如何使用此插件实现预览和上传照片的功能,以及其核心代码和配置选项。 首先,要使用Bootstrap FileInput,我们需要在HTML文件中引入必要的CSS和JavaScript库。这些库包括Bootstrap的基础...

    windows ftp 自动上传下载

    将此脚本保存并设置为定期执行,即可实现自动的FTP上传或下载。 通过这种方式,您可以轻松地在Windows环境中创建自定义的FTP自动化任务,无论您是要定期备份文件,还是从远程服务器获取数据,都能轻松应对。只需...

    百度webuploader组件使用例子

    **百度WebUploader组件详解** 百度WebUploader是一款强大的前端文件上传...以上就是关于百度WebUploader组件的基本介绍和使用方法,通过熟练掌握这些知识点,你可以轻松地在项目中构建出高效、稳定的文件上传功能。

Global site tag (gtag.js) - Google Analytics