`
mengqingyu
  • 浏览: 332961 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

js实现图片上传客户端回显(兼容IE6和IE7)

阅读更多
利用struts的FormFile对象可以轻松实现文件上传,但是要想在客户端回显选中的图片比较麻烦,需要使用滤镜才能兼容IE7,但不兼容火狐。
function preview()
{
	var picId = $("#picId").val();
	var fileext=picId.substring(picId.lastIndexOf("."),picId.length);
	fileext=fileext.toLowerCase();
	$("#fileext").val(fileext);
	if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.bmp'))
	{
		alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
		$("#picId").focus();
	}
	else
	{
		$("#newPreview").html('');
		var newPreview =$("#newPreview")[0];  
		var imgDiv = document.createElement("div");	
		document.body.appendChild(imgDiv);
		imgDiv.style.width = "180px";    imgDiv.style.height = "140px";
		imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";   
		imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picId;
		newPreview.appendChild(imgDiv);
	}
}

	<input name="uploadFile" type="file" class="input_width" id="picId" maxlength="50" onchange="preview()"/>
	(推荐上传图片像素大小为180*140)
	<div id="newPreview"></div>
分享到:
评论

相关推荐

    轻松实现图片上传并回显

    在IT行业中,图片上传并回显...以上就是实现“图片上传并回显”的关键技术点和流程,实际开发中可能还需要根据具体需求和环境进行调整。通过理解这些知识点,开发者可以构建出高效、安全且用户体验良好的图片上传功能。

    js实现form表单自动回显功能

    js实现form表单自动回显功能

    SpringBoot之图片上传与回显

    在SpringBoot框架中,图片上传和回显是常见的功能需求,尤其对于开发涉及用户交互的Web应用时。本文将深入探讨如何实现这个功能,并提供一个简单易懂的实践示例。 首先,我们要理解SpringBoot的核心组件SpringMVC,...

    基于SSM框架的图片上传并回显

    本项目主要涉及"基于SSM框架的图片上传并回显",这是一个典型的文件上传功能,通常用于用户上传个人头像或者产品图片等,然后在网页上展示出来。下面将详细解析这个知识点: 1. **Spring框架**:Spring作为核心容器...

    手机及PC端web多图片上传及回显.rar

    文件上传成功后,为了实现回显,需要将服务器返回的图片URL存储在客户端,然后在页面上显示出来。这通常涉及到前端的JSON解析和DOM操作。 5. **代码调整**:这个压缩包提供的代码可能只是一个基础示例,实际项目中...

    Ueditor上传图片+图片回显+图片在线管理配置说明

    **Ueditor 图片上传与回显配置详解** Ueditor 是一款功能强大的富文本编辑器,广泛应用于各种内容管理系统中。在使用 Ueditor 进行文本编辑时,图片上传、回显以及在线管理功能是非常关键的。本文将详细介绍如何...

    图片上传并回显插件11111

    图片上传插件,可多文件上传和回显,可删除已上传图片,可进行拖拽上传。 springmvc接收传向后台的值方法 @RequestMapping("/admin/addImage.do") public ModelAndView handleRequest(HttpServletRequest request,...

    SSM框架图片上传及回显

    SSM 框架图片上传及回显 SSM 框架图片上传是指在 SSM 框架中实现图片上传功能,以便在 Web 应用程序中上传和展示图片。本文将详细介绍 SSM 框架图片上传的...通过这些步骤,可以在 SSM 框架中实现图片上传和回显功能。

    用spring,springmvc,mybatis实现图片的上传和回显

    本篇文章将详细讲解如何利用这三个框架实现图片的上传和回显,以及如何在Tomcat服务器中配置图片的存储路径。 首先,我们需要在SpringMVC的配置文件中设置MultipartResolver来支持文件上传。MultipartFile是Spring ...

    解决layui富文本编辑器图片上传无法回显的问题

    在使用layui富文本编辑器进行网页开发时,开发者经常会遇到一个普遍的问题,即上传图片后图片无法在富文本编辑器中正确回显的问题。这个问题困扰了不少开发者,究其原因,主要在于富文本编辑器的图片上传插件对于...

    JS图片上传,回显,排序特效

    在本文中,我们将深入探讨如何使用JavaScript实现一个功能丰富的图片上传、回显和排序特效系统。这个系统的特点是能够在无刷新的情况下实时展示上传的图片,并且用户可以通过浮层的左右箭头来改变图片的显示顺序。 ...

    springboot上传图片并回显

    在Spring Boot框架中,实现图片上传与回显是一项常见的需求,尤其在开发涉及用户交互的Web应用时。本文将深入探讨如何使用Spring Boot实现这一功能,包括上传图片、存储图片以及回显显示。 首先,我们需要引入相关...

    jquery多个图片上传和回显

    本文将深入探讨如何使用jQuery实现多个图片的上传和回显功能,同时支持图片的删除与回显。 首先,让我们了解“图片上传”这一概念。在Web应用中,用户通常需要上传图片到服务器进行存储或展示。为了实现这个功能,...

    ssm上传图片以及回显图片

    本项目"ssm上传图片以及回显图片"主要展示了在SSM框架下如何实现文件上传与图片显示的功能。 首先,我们来理解文件上传的流程。在SSM框架中,通常会使用SpringMVC提供的`@RequestParam`注解来接收前端提交的文件,...

    js实现图片上传到服务器和回显

    在JavaScript中实现图片上传到服务器并进行回显是一项常见的任务,尤其在Web开发中。这里我们将深入探讨如何通过JS来实现这一功能。 首先,我们创建一个HTML结构,包含一个类名为`file-box`的`div`,内部有一个`...

    java操作图片,异步同步上传回显

    总结来说,Java中处理图片上传和回显涉及的技术点包括:使用MultipartFile处理文件上传,理解同步与异步的区别,运用WebFlux或AsyncController实现异步处理,提供图片的RESTful API,以及前端的Ajax请求和图片显示。...

    图片文件上传回显jQuery插件——插件四

    总的来说,"图片文件上传回显jQuery插件——插件四"是前端开发中提高用户体验的一个实用工具,它利用jQuery、JavaScript和Ajax技术实现了图片的预览和上传功能。通过研究和使用这个插件,开发者不仅可以快速实现所需...

    SSM实现跨服务器上传图片,并用Ajax实现图片回显,以及商品的的修改、查询和删除功能

    此项目为SSM项目,实现了跨服务器上传图片,并用Ajax技术实现上传图片之后,在页面上立即回显的功能。实现了对商品的修改、查询和删除功能。 图片上传之后保存在ssmImage19项目的upload文件夹中。(上传的资源中包括...

    采用webuploader插件实现单例、多例上传图片,图片回显等,-- demo资源

    WebUploader是阿里大鱼团队开发的一个前端文件上传组件,它支持多文件选择、断点续传、图片预览、图片压缩等功能,适用于多种浏览器环境,包括IE6+。本资源是一个关于如何使用WebUploader实现单例、多例上传图片以及...

    springboot整合百度富文本编辑器ueditor实现图片上传和文件上传以及回显.doc

    春boot 整合百度富文本编辑器 ueditor 实现图片上传和文件上传以及回显 SpringBoot 是一个基于 Java 的 Web 开发框架,它提供了许多便捷的开发方式,包括与第三方富文本编辑器 ueditor 的集成。ueditor 是一个功能...

Global site tag (gtag.js) - Google Analytics