ie8测试始终不支持，非ie方法一、二都正常

 <!DOCTYPE html>

 <html lang="zh">

     <head>

         <meta charset="UTF-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge" />

         <title>Document</title>

         <style type="text/css">

             img {

                 width: 200px;

                 height: 100px;

             }

             .m-top{

                 margin-top: 10px;

             }

         </style>

         <script type="text/javascript">

             function PreviewImage(file) {

                 var filextension = file.value.substring(file.value.lastIndexOf("."), file.value.length);

                 filextension = filextension.toLowerCase();

                 if((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {

                     alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");

                     file.focus();

                 } else {

                     var url;

                     if (file.files && file.files[0]){

                         /*

                         // 方法一：FileReader API实现本地图片预览

                         var file = file.files[0];

                         //创建一个FileReader对象

                         var reader = new FileReader();

                         //读取file文件；

                         reader.readAsDataURL(file);

                         //当文件读取成功后，将结果保存到url变量里；

                         reader.onload = function(evt) {

                             url = evt.target.result;

                             document.getElementById('img').src = url;

                         }

 */

                         //url = file.files[0].getAsDataURL();// FF 3.0

                         //document.getElementById("img").src = url;

                         // 方法二：HTML5 URL API

                         url=window.URL.createObjectURL(file.files[0]);// FF 7.0以上

                         document.getElementById("imgPreview").innerHTML = "<img id='img' src='"+url+"'/>";  

                     } else {

                         // 兼容IE9及以下

                         //获取上传文件控件的值；

                         file.select();

                         url = document.selection.createRange().text;

                         document.getElementById("imgPreview").innerHTML="";

                         document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + url + "\")";//使用滤镜效果

                     }

                 }

             }

         </script>

     </head>

     <body>

         <input id="fileItem" type="file" onchange='PreviewImage(this)' />

         <div id="imgPreview" class="m-top" style='width:200px; height:100px;'>

             <img src="" id="img" alt="pic" />

         </div>

     </body>

 </html>

图片上传 纯js编码的更多相关文章

  1. js 图片压缩上传(纯js的质量压缩，非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  2. 前端图片压缩上传(纯js的质量压缩，非长宽压缩)

    此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...

  3. js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  4. 前台图片上传展示JS（单张图片展示）

    <script type="text/javascript">    //下面用于多图片上传预览功能    function setImagePreviews(aval ...

  5. 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

    项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...

  6. 玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

    var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = ne ...

  7. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  8. bootstrap-fileinput多图片上传

    在页面写一个input框: <input id="subGraphAddress1" name="subGraphAddress" type=" ...

  9. 用Ajax图片上传、预览、修改图片

    首选图片的上传和下载并不是很难,但要注意细节. 一,给出前端图片上传的html代码 1.图片上传的控件 <img src="/${res}/images/default.png&quo ...

随机推荐

  1. CMD中goto语句会中断for循环特性详解

    在这个程序里面由于用到了上篇文章中所说的字符串切割,而用到了Goto强制跳转语句 但是在程序中使用的时候却发现一个错误,当把这个字符切割的代码段如果直接作为非嵌套语句执行正常 但是一旦放到for循环的 ...

  2. 201621123010《Java程序设计》第7周学习总结

    1. 本周学习总结 1.1思维导图:Java图形界面总结 2.书面作业 1. GUI中的事件处理 1.1 写出事件处理模型中最重要的几个关键词. addActionListener(new Actio ...

  3. synchronized一个（二）

    今天遇到了一个关于synchronized的一个问题,关于其持有锁的问题.这个问题以前是有看过相关文章的,但是一直没有记录,今天大概记录一下当前的认知. 对于静态方法,synchronized的使用的 ...

  4. OMAP4之DSP核（Tesla）软件开发学习（三）使能DSP核

    目标: 1.编译或直接获取DSP映像tesla-dsp.bin. 2.boot并使能DSP核(这个可以看启动打印或者进入/d/remoteproc/omap-rproc.0/参看dsp调试信息).   ...

  5. 64位的ubuntu14.04 LTS安装 Linux交叉编译工具链及32位“ia32-libs”依赖库

    ubuntu又迎来了其新一代的长期支持版本 14.04 LTS,其带来了许多令人期待的新特新,遂决定进行升级. 装好了64位版本及安装 Linux交叉编译工具链 运行GCC,${CROSS_COMPI ...

  6. yaf 笔记（持续更新）

    1.如果action不需要输出视图文件(如果ajax请求之类的),只需要在action里面加Yaf\DisPatcher::getInstance()->disableView(); 2.获取客 ...

  7. CI框架的引导流程以及基准测试类

    一[CI]框架的引导流程了解一下,并掌握如何新增自己的扩展类库   http://www.cnblogs.com/ohmygirl/p/CIRead-4.html // CI框架源码阅读笔记4 引导文 ...

  8. opencv之批量转换灰度图并保存

    当图片名字有数字规律时,批量处理方式. ①srcImage 图片名字有规律 ②将srcImage文件下的图片,转换为灰度图并保存入grayImage文件夹. ③ #include <iostre ...

  9. POJ2728 Desert King 最优比率生成树

    题目 http://poj.org/problem?id=2728 关键词:0/1分数规划,参数搜索,二分法,dinkelbach 参考资料:http://hi.baidu.com/zzningxp/ ...

  10. Windows下Java JDK8配置环境变量

    JDK最新版已经出到了jdk8u60,下载安装完成后,还需要配置环境变量,下面小编就给大家分享下jdk 8.0的环境变量配置教程,希望大家喜欢. jdk8.0环境变量配置教程 右键选择 计算机→属性→ ...