js图片上传及显示
html部分:
<form action='' method='post' name='myform'>
<input type='file' id='iptfileupload' onchange='show()' value='' />
<img src='1.jpg' alt='' id='img' />
</form>
js部分:
<script type="text/javascript">
function getPath(obj,fileQuery,transImg) {
var imgSrc = '', imgArr = [], strSrc = '' ;
if(window.navigator.userAgent.indexOf("MSIE")>=1){ // IE浏览器判断
if(obj.select){
obj.select();
var path=document.selection.createRange().text;
alert(path) ;
obj.removeAttribute("src");
imgSrc = fileQuery.value ;
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.setAttribute("src",transImg);
obj.style.filter=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');"; // IE通过滤镜的方式实现图片显示
}else{
//try{
throw new Error('File type Error! please image file upload..');
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
//}
}
}else{
// alert(fileQuery.value) ;
imgSrc = fileQuery.value ;
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.src = fileQuery.value ;
}else{
//try{
throw new Error('File type Error! please image file upload..') ;
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
//}
}
}
} else{
var file =fileQuery.files[0];
var reader = new FileReader();
reader.onload = function(e){
imgSrc = fileQuery.value ;
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.setAttribute("src", e.target.result) ;
}else{
//try{
throw new Error('File type Error! please image file upload..') ;
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
//}
}
// alert(e.target.result);
}
reader.readAsDataURL(file);
}
}
function show(){
//以下即为完整客户端路径
var file_img=document.getElementById("img"),
iptfileupload = document.getElementById('iptfileupload') ;
getPath(file_img,iptfileupload,file_img) ;
}
</script>
效果:
js图片上传及显示的更多相关文章
- ruby on rails爬坑(三):图片上传及显示
一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...
- 图片上传并显示(兼容ie),图片大小判断
图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- 图片上传即时显示javascript代码
这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...
- 前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- MVC图片上传并显示缩略图
前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...
- js图片上传 的方法
先规划出框架 <div id="AQA" style="width:300px; height:200px; background-color:aquamarine ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
随机推荐
- 电容有什么作用?为什么cpu电源引脚都并联一个电容?
管理 随笔- 17 文章- 1 评论- 1 电容有什么作用?为什么cpu电源引脚都并联一个电容? 正文: 参考资料:http://blog.sina.com.cn/s/blog_7880d3 ...
- java.lang.UnsupportedClassVersionError: Unsupported major.minor version 49.0的错误 [转]
一:要解决的问题 我们在尝鲜 JDK1.5 的时候,相信不少人遇到过 Unsupported major.minor version 49.0 错误,当时定会茫然不知所措.因为刚开始那会儿,网上与此相 ...
- Sping Boot入门到实战之实战篇(二):一些常用功能的Spring Boot Starters
包含功能 阿里云消息服务MNS 阿里云消息队列服务(即时消息.延迟消息.事务消息) AOP日志 基于MyBatis通用Mapper及DRUID的数据库访问 dubbo支持 错误处理 七牛图片服务 re ...
- 机器学习实战之K-Means算法
一,引言 先说个K-means算法很高大上的用处,来开始新的算法学习.我们都知道每一届的美国总统大选,那叫一个竞争激烈.可以说,谁拿到了各个州尽可能多的选票,谁选举获胜的几率就会非常大.有人会说,这跟 ...
- 过滤XSS的HTMLPurifier使用
什么是HTMLPurifier? 在php里解决XSS最简单的方法是使用htmlspecialchars转义xml实体,但对于需要使用xml的时候就搏手无策了. HTML Purifier是基于php ...
- typeof 与 instanceof 区别
typeof typeof 是一元运算符,返回值是字符串,且只能是number,string,boolean,object,function,undefined typeof用来判断一个值是否存在 i ...
- HDU 1452 Happy 2004(唯一分解定理)
题目链接:传送门 题意: 求2004^x的全部约数的和. 分析: 由唯一分解定理可知 x=p1^a1*p2^a2*...*pn^an 那么其约数和 sum = (p1^0+p1^1^-+p1^a1)* ...
- doT.js具体使用介绍
官网: http://olado.github.iodoT.js具体使用介绍 用法: {{= }} for interpolation {{ }} for evaluation {{~ }} for ...
- IOS获取当前地理位置文本
本文转载至 http://blog.csdn.net/lvxiangan/article/details/28101119 以下内容摘抄自网络,著作权属于原作者 方法1:使用ios自带联网查询功 ...
- Altera Quartus 13.1 仿真工具路径错误问题解决 Can't launch the ModelSim-Altera software
Altera Quartus 13.1 仿真工具路径错误问题解决 Quartus13.1 自带的ModelSim-Altera 10.1d 版本, 在做仿真时调用 ModelSim-Alteara,发 ...