小技巧:图片在上传之前先预览,无需先上传到服务器上

我在网上看到好多人问如何使用FileUpload上传之前,先预览图片,前提条件,不允许先上传到服务 器上!因为大多搜索的结果实现的方法都是先上传到服务器上,然后显示,如果不确定上传,就删除,这 样的风险太大,性能也消耗很大!下面的代码告诉大家我们不需要先把图片上传到服务器上就可以预览了 ,是不是很酷!不说了,上代码!

<%@ Page Language="C#" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<script runat="server">
  
</script>
  
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Preview Image In FileUpload</title>
  <style type="text/css">
    #newPreview
    {
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
  </style>
</head>
<body>
  
  <script language="javascript" type="text/javascript">
    function PreviewImg(imgFile)
    {  
      var newPreview = document.getElementById("newPreview");
      newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = 

imgFile.value;
      newPreview.style.width = "80px";
      newPreview.style.height = "60px";
    }
  
  </script>
  
  <form id="form2" runat="server">
  <div>
    <asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />
  </div>
  <div id="newPreview">
  </div>
  <input type="file" onchange="document.getElementById('img').src=this.value" />
  <img id="img">
  </form>
</body>
</html>

当然,如果你有更好的方法,也可以共享出来和大伙分享,谢谢了。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索服务器
, 图片
, fileupload
, microsoft
, 上传图片预览
, java图片上传预览
, 上传预览
, 上传到服务器
图片上传预览
,以便于您获取更多的相关知识。

时间: 2024-08-04 11:40:34

小技巧:图片在上传之前先预览,无需先上传到服务器上的相关文章

分离与继承的思想实现图片上传后的预览功能:ImageUploadView_javascript技巧

本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模

php图片上传,可实现预览

php教程图片上传,可实现预览 <?php header("content-Type: text/html; charset=gb2312"); $uptypes=array('image/jpg',  //上传文件类型列表  'image/jpeg',  'image/png',  'image/pjpeg',  'image/gif',  'image/bmp',  'application/x-shockwave-flash',  'image/x-png',  'appl

Ajax上传图片及上传前先预览功能实例代码

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

一次上传多张图片,并且上传前可以预览其缩略图 兼容IE7

问题描述 我想要一个,一次上传多张图片,并且上传前可以预览其缩略图兼容IE7的jquery插件 解决方案 解决方案二:js干不了这事,一般都是flush插件解决方案三:这需要插件.ActiveX.Silverlight.Flash都可以考虑.

让旅行者在踏上旅程之前可以预览各地风光

香格里拉酒店集团启用新网站,让旅行者在踏上旅程之前可以预览各地风光.新网站内有香格里拉旗下酒店和酒店所在地图片,拉近客人与目的地的距离.同时,香格里拉启动Instagram互动活动,鼓励游客随手拍下身边的美丽和感动. 香格里拉酒店集团电子商务总监梁一龙说:"我们还将陆续推出更多数字化和社交功能,提供更丰富便捷的网络平台.希望新版网站可以帮助客人更轻松地了解目的地.预订酒店,以及通过社交媒介分享给亲朋好友." 香格里拉酒店方面称,新网站的预订系统升级之后已通过四个月的用户检测,更加简便快

右侧栏将会看到同一内容板上其他内容的预览图

改版之后的详细视图下,右侧栏将会看到同一内容板上其他内容的预览图.页面下方,将显示该用户还转发了哪些内容. 图片社交网站Pinterest(http://pinterest.com/)周一发布了新版网站设计,并表示将"很快"通过邀请方式向用户推出这一新设计.Pinterest从1月份开始对新设计进行了测试. 新版设计中最引人关注的变化是图片的详细视图.当用户查看某一照片或网页截图的详细视图时,在右侧栏将会看到同一内容板上其他内容的预览图.这些预览图采用类似Pinterest主页和内容板

如何在Mac上安装Windows 10预览版

  本月初,微软正式发布了Windows 10系统及首个预览版,供所有用户下载体验.经过我们测试,Windows 10在数年前的酷睿2笔记本上依然可以流畅运行,同时针对不同设备的版本划分更加清晰,尤其是针对传统桌面的强化,有望挽回Windows 8所流失的用户. 不过,如果你是苹果Mac用户.又想体验一下Windows 10预览版,可能会稍微麻烦一些.那么,如何在Mac上安装Windows 10预览版呢?感兴趣的朋友不妨参考一下这篇文章. 决定安装形式 在Mac上安装Windows,基本上可以通

照相机-android camera开始预览以后 数据时怎么刷到surfaceview上面的

问题描述 android camera开始预览以后 数据时怎么刷到surfaceview上面的 当camera打开以后 初始化 调用 initDisplayBuffers()以后 是如何刷新 界面的 也就是如何将数据传到屏幕的,代码看到了好久 ,也没有了解这个刷新机制,求指点. 解决方案 当APP调用系统API打开摄像头时,命令从framework到HAL,再到内核,内核的摄像头驱动会初始化摄像头接口,摄像头sensor,然后经由摄像头采集图像数据,存放到事先分配好的内存中.完成之后,内核会将存

图片上传判断及预览脚本的效果实例_javascript技巧

复制代码 代码如下: <div id="imgbox">    <img id="imghead" src="img/no_photo.gif" alt="" width="100" height="125" />    </div><asp:FileUpload ID="FileUploadImg" runat="