图片上传及预览（IE10 下已验证没问题）

最新推荐文章于 2019-05-05 17:32:01 发布
最新推荐文章于 2019-05-05 17:32:01 发布
阅读量686 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingwangjiwoba/article/details/23269393
版权
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Uploadpicture2.aspx.cs" Inherits="Warehouse.Uploadpicture2" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">  
        function setImagePreview(docObj,localImagId,imgObjPreview) {

  if(docObj.files && docObj.files[0]) {
                alert("nengdaozhema:If:" + docObj.files); 
                
                //火狐下，直接设img属性  
                imgObjPreview.style.display = 'block';  
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '200px';
                               
  
  
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式    
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                alert("nengdaozhema:If:" + docObj.files[0]);
            }  
            else  
            {
                //IE下，使用滤镜  
              //  alert("nengdaozhema:else:");
               docObj.select();

               var imgSrc = document.selection.createRange().text;
                alert("nengdaozhema:else:" + imgSrc);
                  
                //必须设置初始大小  
                localImagId.style.width = "300px";  
                localImagId.style.height = "200px";  
                  
                //图片异常的捕捉，防止用户修改后缀来伪造图片  
                try  
                {  
                     
                 localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
                 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
                 }  
                 catch(e)  
                 {  
                    alert("您上传的图片格式不正确，请重新选择!");  
                    return false;  
                  }                            
                  imgObjPreview.style.display = 'none';  
                  document.selection.empty();  
            }  
            return true;  
        }  
</script>


</head>
<body>
    <div id="localImag"  style="width: 300px; height: 200px">  
   <img id="preview" alt="预览图片" src="../../Images/noImage.gif" width="300px"  
height="200px" />  
</div>  


<form id="form1" runat="server">
<asp:FileUpload ID="PicLoad" runat="server" Width="300px"  οnchange="setImagePreview(this,localImag,preview)"/>


<span style="font-family:Arial, Helvetica, sans-serif;"/>


</form>








</body>
</html>


复制上面的代码新建一个页面试试看！

下天啸虎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
10-28
在本文中，我们将深入探讨如何使用jQuery来实现一个图片上传功能，包括图片类型验证、大小验证以及预览效果。在Web开发中，这样的功能是非常常见的，尤其在社交媒体、电子商务和个人博客等网站上。jQuery库提供了...
ie8本地图片上传预览示例代码
09-04
总结起来，IE8本地图片上传预览的关键在于使用滤镜和`<div>`元素来规避浏览器的安全限制。而在现代浏览器中，我们可以利用更先进的FileReader API来实现相同的功能。这种差异性使得前端开发需要考虑到兼容性问题，...
兼容IE10上传并预览图片的方法（ie9暂时没有弄好）
tangcc的博客
01-05 1760
以下代码会用到:1.jQuery   2.layui.all.js(要把整个插件downloaded)   3.jQuery.form.js jQuery.form.js 使用很简单的，请参考：https://www.cnblogs.com/azhw/p/4661838.html html:   &lt;form id="designer_form" class="layui-form"...
IE9 IE10 无法上传文件 解决方案
zero_295813128的专栏
08-12 8542
IE9和IE10都无法上传，这是由于IE浏览器的版本升级问题。修改方法如下： if(window.ActiveXObject) {       var io = document.createElement('');        if(typeof uri== 'boolean'){            io.src = 'javascript:false';        }  
在IE 10以下无法（有时可以有时不可以）预览本地所上传的图片
Xu小开的博客
07-19 625
在IE 10以下无法（有时可以有时不可以）预览本地所上传的图片 IE下iframe中使用滤镜document.selection.createRange().text获取不到值得解决办法 最近公司项目上线，客户反馈：在IE 10以下无法（有时可以有时不可以）本地预览所上传的图片 判断是否为IE 的方法 //判断是否是IE浏览器，包括Edge浏览器 functio...
最近项目上传图片遇到input="file" 不能清空在ie10及以下
chenqunjian的博客
07-28 2300
应用场景就是图片上传成功后清空file值 。 测试了360极速模式、火狐、谷歌、Edge、ie不过遇到的问题是用以下代码  document.getElementById("execlImportForm").reset(); 这代码简单吧，原生js清空表单，不过在ie10及以下并没有什么卵用， 在换jQuery 写 $("execlImportForm")[0].reset();
图片上传本地图片预览（兼容ie10）
sinat_40390240的博客
05-05 265
近期做了一个小项目，要实现一个功能，多张图片上传并且需要有缩略图 ，然后用户在上传图片之前要确认一下自己的上传的是什么图片，是否需要修改，SO————如何读取文件路径呢？ 首先，我们有一个input 然后当我们点击这个input的时候 $(".business_picture_Input").change(function () { console.log(getPath(this));　　　...
图片上传及预览+时间水印
09-14
在IT领域，图片上传及预览以及时间水印是常见的功能需求，特别是在Web应用和移动应用中。这个压缩包文件“photosupload”很可能是提供了一套解决方案，让我们详细了解一下这两个核心知识点。 首先，图片上传是网页...
vue+elementUI实现表单和图片上传及验证功能示例
10-17
主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【SCI一区】Matlab实现金豺优化算法GJO-CNN-LSTM-Attention的风电功率预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于Spring Boot+javaScript开发的目前最火爆校园二手交易网站+源码+项目文档+数据库+运行教程（毕业优秀项目
07-29
基于Spring Boot+javaScript开发的目前最火爆校园二手交易网站+源码+项目文档+数据库+运行教程，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 该C2C校园二手交易平台，界面简洁明了，能给用户一种美的视觉上的享受。并且操作简单易懂，可以大胆但是毫不夸张的说，本系统适用于99%的青少年愉快的使用，对于不是很了解智能科技的人来说，只要看看就基本可以掌握然后熟练的使用该系统了。并且本系统的动画效果做得非常的完美，前端工作人员争取使用最少的代码实现最炫酷的动态效果，例如3D页面转换，动态加入购物车效果，搜索的时候动态自动提示商品名字功能等等，无一不是本系统的亮点。由于前端本着使用最少的代码，实现最炫酷的动态效果，所以其性能可以来说是杠杠的。并且前端所构建的网站为响应式网站，当页面的大小发送变化的时候，页面会随着变化，但是我们的变化不会出现任何的纰漏。在兼容性方面，本网站可以完美的兼容ie8+，Firefox8+，chrome6+等等，虽然目前比较少用户使用这些版本以下的浏览器，.................
【创新未发表】Matlab实现白鲸优化算法BWO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于ARM64架构CPU使用docker-compose一键离线部署zookeeper 3.8.4分布式集群工具
07-29
原文链接：https://blog.csdn.net/m0_37814112/article/details/140762915 实现功能如下： 1、支持单机部署（1 zookeeper）。 2、支持单机伪集群部署（3 zookeeper）。 3、支持多机分布式机部署（3 zookeeper）。 4、支持数据目录、端口、JVM内存。 5、支持zookeeper配置文件、数据目录持久化。 6、支持部署、启动、停止、卸载、检测等操作。
JavaScript实现图片上传预览技术及兼容性处理
"这篇文章主要介绍了如何使用JavaScript实现图片上传预览效果，包括各种浏览器的兼容性和不同的预览方法，如ie7/8的滤镜预览法，Firefox 3的getAsDataURL方法，以及针对Opera、Safari和Chrome的后台支持预览方案。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值