`
cyf忆
  • 浏览: 5905 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

图片上传 预览

阅读更多
选择一张图片,先预览,然后上传该图片
<div style="width: 120px;height: 128px;border: 1px solid red; margin-left: 30px;padding: 2px;" id="localImag" >
<img name="showimg" id="showimg" src="" width="116px" height="125px" alt="照片预览"  class="showimg" /> 
</div>
<input name="imgfile" type="file" id="imgfile" class="imgfile" onchange="setImagePreview();"  size="3" style="margin-left: 30px;" />



function setImagePreview() {
	 var docObj=document.getElementById("imgfile");
	 var imgObjPreview=document.getElementById("showimg");
	 if(docObj.files && docObj.files[0]){
		  var imgSrcx =docObj.value;
		  if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG|gif|GIF)$/.test(imgSrcx)) {
              alertMsg.warn("您上传的图片格式不正确,请重新选择!");
              return false;
          }
    	  //火狐下,直接设img属性
    	  //imgObjPreview.src = docObj.files[0].getAsDataURL();
    	  //火狐7以上版本不能用上面的getAsDataURL()方式获取
    	  imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	 }else{
	 	 //IE下,使用滤镜
	 	 docObj.select();
    	  var imgSrc = document.selection.createRange().text;
    	  if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG|gif|GIF)$/.test(imgSrc)) {
    		  alertMsg.warn("您上传的图片格式不正确,请重新选择!");
              return false;
          }
    	  var localImagId = document.getElementById("localImag");
    	  //图片异常的捕捉,防止用户修改后缀来伪造图片
    	  try{
    	   localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    	   localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    	  }catch(e){
    		  alertMsg.warn("您上传的图片格式不正确,请重新选择!");
    	   return false;
    	  }
    	  imgObjPreview.style.display = 'none';
    	  document.selection.empty();
	 }
	 return true;
	}

分享到:
评论

相关推荐

    .Net图片上传预览

    在.NET开发环境中,图片上传预览功能是常见的需求,它允许用户在上传图片到服务器之前进行查看和确认,提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解图片预览的基本原理。图片预览通常涉及到...

    图片上传预览效果,很小的一个插件

    在IT行业中,图片上传预览是一项常见的功能,特别是在网页应用和移动应用中。这个插件的标题"图片上传预览效果,很小的一个插件"表明它是一个轻量级的解决方案,专为实现快速、便捷的图片预览而设计。描述中提到...

    纯 js 实现得 图片上传预览插件

    【纯 js 实现得 图片上传预览插件】 在前端开发中,图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件,无需依赖jQuery或其他第三方库,使代码更加轻量级且...

    Jquery-JS图片上传预览(无浏览器限制)

    在网页开发中,图片上传预览功能是一个常见且重要的需求,它允许用户在实际上传之前预览选定的图片,提供更好的用户体验。`Jquery` 和 `JavaScript` 是实现这一功能的常用工具,它们能轻松地处理DOM操作和事件监听。...

    jQuery php图片上传预览插件_头像上传预览代码

    在图片上传预览中,jQuery可以用来监听文件输入元素的变化,获取用户选择的图片,并实时显示预览效果。 要实现这一功能,你需要在HTML中创建一个`&lt;input type="file"&gt;`元素,让用户选择图片。添加`change`事件监听...

    jQuery带删除功能多图片上传预览插件

    **jQuery带删除功能多图片上传预览插件详解** 在Web开发中,用户常常需要上传图片,特别是社交媒体、电子商务和内容管理系统等应用。为了提供更好的用户体验,开发人员通常会使用前端预览技术,让用户在正式上传...

    java实现图片上传预览

    在Java Web开发中,图片上传预览功能是一个常见的需求,尤其在用户交互性强的网站或应用中。这个功能允许用户在上传图片之前查看其效果,确保上传的图片符合预期。以下将详细介绍如何在Java环境中,结合ASP和JSP技术...

    jQuery 图片上传预览

    jquery图片上传预览插件,通过 IE6、7、8、9 , chrome, firefox测试 测试时采用的是jquery1.7.1,未经过其它jquery版本测试。 使用时,您可以根据需要,随意修改! --------------------------------- =====更新...

    jQuery PHP头像图片上传预览插件.zip

    jQuery PHP头像图片上传预览插件

    多图片上传预览插件

    在IT领域,多图片上传预览插件是网站或应用程序中常见的一种功能,它允许用户在上传图片到服务器之前进行在线预览。这样的插件极大地提升了用户体验,因为用户可以在正式提交之前检查图片的质量、方向和效果。下面...

    Flex4.6+java+servlet上传图片例子+图片上传预览

    这个"Flex4.6+java+servlet上传图片例子+图片上传预览"的项目,结合了前端的Flex技术和后端的Java Servlet,为我们提供了一个完整的解决方案。下面将详细解释这个项目的各个组成部分及其工作原理。 首先,让我们来...

    多图片上传预览控件

    在IT领域,图片上传预览控件是一种常见的用户界面组件,尤其在网页设计和开发中。这个组件允许用户选择并预览多张图片,提升用户体验,确保他们在上传之前能够查看和确认图片的质量和效果。本篇文章将深入探讨“多...

    图片上传预览剪切

    在IT行业中,图片上传预览剪切功能是一个常见的需求,特别是在网站用户界面设计中,比如个人资料设置、社交网络或电子商务平台。这个功能允许用户在上传图片前进行预览和编辑,确保上传的图片符合所需的尺寸和比例。...

    jquery;图片上传;图片上传预览

    在网页开发中,图片上传预览是一个常见的功能,它允许用户在正式上传图片之前查看预览效果,确保图片质量和格式符合需求。这个功能通常通过JavaScript库实现,而jQuery作为一个广泛使用的JavaScript库,提供了便利的...

    js图片上传预览效果

    在JavaScript开发中,图片上传预览效果是一种常见的需求,它允许用户在正式上传图片之前查看其效果,确保图片质量和方向正确。本知识点将围绕“js图片上传预览效果”这一主题,结合提供的文件名列表,深入讲解实现这...

    图片上传预览(兼容所有主流浏览器)

    在现代Web应用中,图片上传预览功能是一个常见的需求,特别是在社交媒体、电子商务和个人博客等网站上。本技术讨论主要围绕“图片上传预览(兼容所有主流浏览器)”这一主题展开,我们将深入探讨如何利用JavaScript...

    图片上传预览多张图Flash大集合

    在IT行业中,图片上传预览功能是网页应用中常见的需求,尤其在社交媒体、电商网站以及内容创作平台等。Flash作为一种曾经广泛使用的交互式内容开发工具,曾被大量用于实现图片上传预览。本文将深入探讨如何利用Flash...

    图片上传预览

    在IT行业中,图片上传预览是一项常见的功能,特别是在网页或应用程序中,用户往往需要在上传图片之前能够预览效果。这个功能提供了用户友好的交互体验,确保上传的图片符合预期。这里我们将深入探讨图片上传预览的...

    ajax多图片上传预览

    "Ajax多图片上传预览"技术就是为了解决这个问题,它允许用户在真正提交图片到服务器之前进行预览,无需等待整个文件上传完成。这种功能极大地提升了用户体验,因为它减少了用户的等待时间,并且在上传过程中提供了...

Global site tag (gtag.js) - Google Analytics