如果那写错了,或者那写的不对路子请帮忙说出来,我好改正,嘿嘿进步都是一点点的哟!~

正文之前

搞不清楚是上传控件的脑残还是我下午脑袋缺氧。这种情况搞不懂是不是常见的形态之一了。

正文之前结束

今天阳光明媚(摔!风很大!),抱着愉悦的心情来等待测试的bug。我个人很有信心木有bug(摔!MB俩模块测试出6个BUG)。没想到第一个BUG出来了。而这个BUG也是这个文章的略点,就不说了,当第3个BUG出来的时候我才知道,今天下午是灾难性的。

问题出现在上传控件上,为了跟后端友好的交互果断拖了个上传控件。客户需求是当点击上传控件的浏览的时候

就是下图

要显示这个图片,当然这个图片是不上传的话是极好的(摔!)

好吧,抱着客户是上帝的想法我果断的写出了如下的JS代码

  $(function () {$("#fileupImg").change(function () {var turl = $("#XXOO").val().replace(':\\', '^').split('^')[1];var location = "file:///" + turl;var type = location.substr(location.lastIndexOf(".")).toLowerCase();var img = new Image();if (type == ".jpg" || type == ".gif" || type == ".jpeg" || type == ".bmp") {img.src = location;img.onload = function () {if (img.width < 1355 || img.width >= 1365) {alert("上传图片的宽度要在1355到1365像素之间");return;}if (img.height < 1015 || img.height > 1025) {alert("上传图片的高度要在1015到1025像素之间");return;}$("#yiku").attr("src", location);$("#yiku").show();}} else {alert("图片格式不对!");}})});

  这段代码在编写阶段的时候是木有问题的(TMD,当时老子要测试下盘符可否显示就好了)

  在桌面上传图片的时候什么问题都没有,当然也可能出现问题,这个一会在说。

测试人员告诉我,上传的图片不显示。我就好奇为什么呢,找她要一下测试图片,自己测试下发现,连桌面的都无法显示,并且看到的源码并不是跟我设想的一样。这个时候我就在考虑原因是什么,首先进入脑帘的就是,权限问题。

浏览器是否有权限读写用户的硬盘信息,换种说法JS是否有权限操作硬盘信息?我想应该是没有,但是为什么本地的源码就可以获取到桌面的图片呢,我想大概是因为我在本地测试,本地预览有关系,希望知道的大牛帮我解答下这个问题。

时间一分一秒的过去了,突然想到,这个方法如果不行怎么办。有的观众会说了用第三方啊。亲,第三方是不让用的,并且我还需要知道他上传图片的尺寸,在上面的代码你们也看到了我需要判断尺寸来决定是否上传。这时候,我想起了亲爱的谷歌。在谷歌上搜索无数个关键字,终于找到一个关键字,滤镜。

JS还有滤镜?这个是我头一次听说,难道美图秀秀是用JS写的?

谷歌的办法无非就是通过滤镜来把图片加载到,我窃喜,终于找到解决办法了!上代码!~

            imgDiv.style.width="必填";imgDiv.height="必填";                   imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";

  这个是关键代码。经过测试,这个代码在浏览器安全级别很低的情况下可用,如果您的客户浏览器安全级别很低,可以使用这段话。

网上是 sizingmethod=scale; 这么写我的没有分号,如果有分号那么他容器就会失效,搞不懂网上为什么都这么写。容器失效的后果就是图片出来之后是原尺寸。

当然,我说了这个是在浏览器安全级别很低的情况下没问题,而默认的浏览器安全级别都是 中或者是中-高。

这样就涉及到一个属性

这个属性,他会让你的上传控件路径变成 X:\fakepath\文件名,你们看到了他把真实路径给掩盖了(浏览器掩盖了事实的真相!!!)。查到的相关资料大意是因为浏览器需要安全,从IE7开始路径就给安全化了。

那么怎么办呢。我们可以在获取 物理路径的时候写上

下面这段话

            var file = document.getElementById('XXOO');file.select();file.blur();            var a= document.selection.createRange().text;

  这样就能获取到真实的路径了,然后就可以做你想做的事情了,这样上面的浏览器安全级别低的那段代码也就可以用了(我没测试,但是应该没问题)。

接下来我要面对的是另一个问题,图片我获取不到他的宽度和高度。当然有的客官说了,你都获取到真实地址了怎么能获取不到宽度高度呢,我没测试,但是应该不能,在IE7之后的安全策略里面,现在是不让获取本地文件属性的。

到这个时候已经是临近下班的点了,我还想下班回家玩XBOX呢。没办法只能把情况如实的反应一下,后来要求我限期整改,选择图片的时候可以上传但是木有上传按钮,页面不能刷新,当然这都是简单的解决(啊?你不会?我没办法了动脑想一下就能解决)。

最终解决方案是上传一张图片。

有的人也问了,为什么当初设计的时候不让上传呢?因为我们这个上传还涉及到很多东西,综合下来如果上传一次的话性能下降很多,要做大量的IO读写。而现的上传是上传到临时的文件夹里面,当确定这条数据的时候删除临时文件夹里面的这一个文件,而非多次IO读写。性能提高一些。

当搞定这些问题的时候已经是快9点了。后面几个BUG都是哭笑不得的疏忽,这样的疏忽,让我老脸通红。。

下午学到了这些知识,我觉得很不错了,至少知道了 IE浏览器的安全策略和几个上传的方法。

今天是多么美好的一天那。

以上代码是IE 7 8 9未测试 其他浏览器。

PS:还有一种是HTML5的方式也很有意思,这个是群里的朋友帮我提供的。

 1 <style>
 2   .thumb {
 3     height: 75px;
 4     border: 1px solid #000;
 5     margin: 10px 5px 0 0;
 6   }
 7 </style>
 8
 9 <input type="file" id="files" name="files[]" multiple />
10 <output id="list"></output>
11
12 <script>
13   function handleFileSelect(evt) {
14     var files = evt.target.files; // FileList object
15
16     // Loop through the FileList and render image files as thumbnails.
17     for (var i = 0, f; f = files[i]; i++) {
18
19       // Only process image files.
20       if (!f.type.match('image.*')) {
21         continue;
22       }
23
24       var reader = new FileReader();
25
26       // Closure to capture the file information.
27       reader.onload = (function(theFile) {
28         return function(e) {
29           // Render thumbnail.
30           var span = document.createElement('span');
31           span.innerHTML = ['<img class="thumb" src="', e.target.result,
32                             '" title="', escape(theFile.name), '"/>'].join('');
33           document.getElementById('list').insertBefore(span, null);
34         };
35       })(f);
36
37       // Read in the image file as a data URL.
38       reader.readAsDataURL(f);
39     }
40   }
41
42   document.getElementById('files').addEventListener('change', handleFileSelect, false);
43 </script>

转载于:https://www.cnblogs.com/minCS/archive/2013/05/21/3091481.html

纠结的上传控件,啊!多么痛的领悟相关推荐

  1. jquery文件上传控件 Uploadify

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...

  2. 在线编辑器 上传控件

    为什么80%的码农都做不了架构师?>>>    在线编辑器 上传控件 http://kindeditor.net/demo.php 上传控件: 转载于:https://my.osch ...

  3. 使用jquery文件上传控件Uploadify来异步上传图片

    1.项目中需要图片的异步上传,度娘之后发现有一个插件可以完成这个需求,即是:Uploadify 下面是这个异步上传的插件的一个简单介绍: 基于jquery的文件上传控件,支持ajax无刷新上传,多个文 ...

  4. JQuery文件上传控件Uploadify文档

    Uploadify是一个基于JQuery的文件上传控件,支持ajax无刷新上传,比较好用,现在用着一个不爽的地方是--每个版本的属性名和事件名.方法名都有一些不一样,这在遇到问题,查资料的时候会比较麻 ...

  5. 文件上传~Uploadify上传控件~续(多文件上传)

    对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Upload ...

  6. 封装直传阿里云存储文件上传控件

    本文目标 封装一个直传阿里云OSS云存储图片上传控件 控件效果图 上传之前 上传成功 预览图片 文件上传前后台及阿里云存储数据流转过程 1.前端先访问后台接口获取上传阿里云存储权限相关信息和文件编号信 ...

  7. 【推荐】.NET批量上传控件——HtmlInputFiles

    阅读: 2421 评论: 15 作者: 飛雪飄寒 发表于 2009-12-02 17:29 原文链接 此控件支持多个文件同时上传,而且上传文件的数量.大小及格式可以根据自己的需要进行设置,并且使用非常 ...

  8. 使用Kendo上传控件实现ASP.NET Core的“批处理模式”

    从Github下载源代码 最初,我将上载控件用于仅表单上的基本上载控件.而且,这正是它的意思.但是,我希望它以一种"批处理模式"工作.我的意思是仅将文件上传到浏览器本身,而不在用户 ...

  9. 文件上传控件 自定义样式

    文件上传控件<input type="file"/>在不同的浏览器下,显示为不同的样式,并且很难随着不同的设计而进行对应变化,这里将实现一种jquery插件的方法,实现 ...

最新文章

  1. JAVA动态读取xml_Java动态生成和解析xml文件步骤详解
  2. 小米和西工大联手,三篇论文被Interspeech接收
  3. QT 4.5 windows版本 安装问题 及 Junction 使用
  4. 网站性能优化之HTTP请求过程简述!
  5. oracle xml文件是什么文件,介绍关于Oracle下存取XML格式数据的方式
  6. 【Tensorflow】tf.set_random_seed(seed)
  7. Wannafly挑战赛24
  8. C++泛型算法的小总结
  9. CodeSheep谈前后端选择
  10. 芝柏 bmw oracle,魅力十足的潜水腕表
  11. java面试第四弹(算法和编程)思路
  12. 金山词霸2007升级v10.0.0.4
  13. 数据分析 第六讲 pandas
  14. 虎牙盈利能力得到改善,但监管风险对其收入产生负面影响
  15. 委托朋友理财有风险吗
  16. 耳机重装系统后服务器坏了,Win7重装后耳机没声音|重装系统后耳机没声音怎么办?...
  17. oracle查询值的字符串长度、字节长度、大小写字母转换
  18. 转载HTMl转义字符大全
  19. 魔兽正式服5区服务器互通信息,魔兽世界怀旧服付费转服能跨区吗
  20. Cisco Firepower 9300 Series FTD Software 7.1.0 ASA Software 9.17.1 下载

热门文章

  1. Autodesk 两场云以及移动为主题的Meetup线下交流会
  2. 2020年甘肃省土地利用数据(矢量)
  3. 手机室内地磁定位软件_一种基于智能手机的室内地磁定位系统
  4. 技术至简-5:动画显示复指数信号的形状与物理意义
  5. 博士申请 | 香港科技大学陈浩老师招收AI医疗方向全奖博士/博后/RA/实习生
  6. python淘宝抢单_Python使用Selenium实现淘宝抢单的流程分析
  7. Codeforces Round #739 (Div. 3) A. Dislike of Threes
  8. Php采集discuz大云采,众大云采集织梦dedecms版php源码 v9.7.0
  9. 网页字体助手 WebFont Helper
  10. 【千里眼智能摄像头V1.1中文免费版】方便录像照相工具