js实现图片上传并正常显示


Posted in Javascript onDecember 19, 2015

项目经常会用到头像上传,那么怎么实现呢?

首先是HTML布局:

<label for="thumbnail" class="col-md-3 control-label">缩略图</label>
<div class="col-md-6">
 <input type="file" class="form-control" id="thumbnail" name="thumbnail">
</div>

jquery方式,IE不支持,但IE会获得绝对的上传路径信息:

function getObjectURL(file) {
 var url = null ;
 if (window.createObjectURL!=undefined) { // basic
 url = window.createObjectURL(file) ;
 } else if (window.URL!=undefined) { // mozilla(firefox)
 url = window.URL.createObjectURL(file) ;
 } else if (window.webkitURL!=undefined) { // webkit or chrome
 url = window.webkitURL.createObjectURL(file) ;
 }
 return url ;
}

$('#thumbnail').change(function() {
 var eImg = $('<img />');
 eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this->input
 $(this).after(eImg);});

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>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 通用loading动画效果实例代码
Jan 14 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 #Javascript
15个常用的jquery代码片段
Dec 19 #Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 #Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 #Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 #Javascript
jQuery中trigger()与bind()用法分析
Dec 18 #Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 #Javascript
You might like
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
SVG描边动画
2017/02/23 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Python随手笔记之标准类型内建函数
2015/12/02 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python3 Random模块代码详解
2017/12/04 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
企业文明单位申报材料
2014/05/16 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
个人收入证明范本
2014/09/18 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
python基础之文件处理知识总结
2021/05/23 Python
React列表栏及购物车组件使用详解
2021/06/28 Javascript