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 相关文章推荐
Jquery异步请求数据实例代码
Dec 28 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
JavaScript 异步调用
Oct 25 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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学习教程之第1天
2008/06/15 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
对Python3 序列解包详解
2019/02/16 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python 从attribute到property详解
2020/03/05 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
奉献爱心演讲稿
2014/09/04 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
会计简历自我评价
2015/03/10 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
初三毕业感言
2015/07/31 职场文书
新人入职感言
2015/07/31 职场文书
2019年工作总结范文
2019/05/21 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android