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 (三) 管理jQuery包装集
Feb 23 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
Javascript设计模式之原型模式详细
Oct 05 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代码
2010/08/08 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Js apply方法详解
2017/02/16 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python实现的矩阵类实例
2017/08/22 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Django model反向关联名称的方法
2018/12/15 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python输出指定字符串的方法
2020/02/06 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
几个判断型的面试题
2012/07/03 面试题
社区志愿者培训方案
2014/06/10 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书