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 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
JavaScript Split()方法
Dec 18 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Vue.js实现备忘录功能
Jun 26 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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删除数组中特定元素的两种方法
2019/02/28 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
js对象的复制继承实例
2015/01/10 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
Bootstrap插件全集
2016/07/18 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python实现俄罗斯方块
2018/06/26 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python多线程与多进程及其区别详解
2019/08/08 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python实现汇率转换操作
2020/05/03 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
2014年秋季开学演讲稿
2014/05/24 职场文书
大学生自荐材料范文
2014/12/30 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书