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. html里文本编辑器如何制作呢?

    初入it职场,文本编辑器真的让人捉摸不透.最终在前端姐姐帮助下弄好了↓ 先在头部写好编辑器的各种功能的总体模型 <script>var editor; KindEditor.ready(f ...

  2. 转:python webdriver API 之简单对象的定位

    对象(元素)的定位和操作是自动化测试的核心部分,其中操作又是建立在定位的基础上的,因此元素定位就显得非常重要. (本书中用到的对象与元素同为一个事物)一个对象就像是一个人,他会有各种的特征(属性) , ...

  3. jQuery基础学习1

    标准HTML文件引入jQuery库方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. hdu 3724 Encoded Barcodes

    Trie模板.把所有单词都用字典树存起来,然后给每个节点赋权值表示前缀到该节点出现了几次.然后直接查询就可以了. #include <algorithm> #include <ios ...

  5. Spring ApplicationContext的事件机制

    ApplicationContext的事件机制是观察者设计模式的实现,通过 ApplicationEvent 类和 ApplicationListener 接口,可以实现 ApplicationCon ...

  6. uva11584

    将课本上所述方法实现即可,代码如下: /* * Author: Bingo * Created Time: 2015/1/25 23:49:49 * File Name: uva11584.cpp * ...

  7. scrapy---callback 传递自定义参数

    在scrapy提交一个链接请求是用 Request(url,callback=func) 这种形式的,而parse只有一个response参数,如果自定义一个有多参数的parse可以考虑用下面的方法实 ...

  8. Java内存泄露监控工具:JVM监控工具介绍

    本文将对JVM监控工具jstack, jconsole, jinfo, jmap, jdb, jstat进行详细的介绍,具体内容请看下文 Sun JDK监控和故障处理工具 名称 主要作用 jps JV ...

  9. Redis 穿透和雪崩

    Redis穿透 出现原因:频繁的查询一个不存在的数据,由于缓存不命中,每次都要查询持久层,从而失去缓存保护后端的意义 解决方法: 部署过滤器拦截: 将数据库中数据的存在的Id存入列表,放入缓存中,每次 ...

  10. laravel教程入门笔记

    安装laravel框架 1.安装命令 composer create-project --prefer-dist laravel/laravel ytkah ytkah表示文件夹名,如果不写的话自动会 ...