图片上传即时显示缩略图的js代码

2024-12-01 02:23:58

<script language="javascript" type="text/javascript">
 var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
 var preivew = function(file, container){
  try{
  var pic = new Picture(file, container);
  }catch(e){
  alert(e);
  }
 }
 //缩略图类定义
   var Picture = function(file, container){
  var height = 0, 
  widht = 0, 
  ext = '',
  size = 0,
  name  = '',
  path  = '';
  var self = this;
  if(file){ 
    name = file.value;
  if (window.navigator.userAgent.indexOf("MSIE")>=1){ 
   file.select(); 
   path = document.selection.createRange().text; 
  }else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 
   if(file.files){ 
   path = file.files.item(0).getAsDataURL(); 
   }else{
   path = file.value;
   }
  } 
  }else{
  throw "bad file";
  }
ext = name.substr(name.lastIndexOf("."), name.length);
if(container.tagName.toLowerCase() != 'img'){
  throw "container is not a valid img label";
  container.visibility = 'hidden';
  }
  container.src = path;
  container.alt = name;
  container.style.visibility = 'visible';
  height = container.height;
  widht = container.widht;
  size  = container.fileSize;
this.get = function(name){
  return self[name];
  }
this.isValid = function(){
  if(allowExt.indexOf(self.ext) !== -1){
   throw 'the ext is not allowed to upload';
   return false;
  }
  }
 }
</script>
  <div class='previewDemo'>
 <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));">
 <img id="img" style="visibility:hidden" height="100px" width="100px">
</div>

Javascript图片上传前的本地预览实例

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil
Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20
图片上传之前检查大小、尺寸、格式并预览的js代码

下面的代码,需要保存到本地种执行,在线看不到实际效果. validate before upload by Lance Zhang File type :gif,jpg,jpeg,png,bmp File Size limit: K Image Height Limit: Image Width Limit: Image Preview function CheckFileSize() { var limit = document.getElementById("fileSizeLimit&qu
js图片上传的封装代码

本文实例为大家分享了js图片上传的具体代码,供大家参考,具体内容如下 js封装的方法 function uploadImages(picker, url, callback) { var img_uploader = WebUploader.create({ auto: true, server: url, pick: picker, fileNumLimit: 1, fileSingleSizeLimit: 2097152, // 2M accept: { title: 'Images', e
js实现图片上传并正常显示

项目经常会用到头像上传,那么怎么实现呢? 首先是HTML布局: <label for="thumbnail" class="col-md-3 control-label">缩略图</label> <div class="col-md-6"> <input type="file" class="form-control" id="thumbnail"
node.js实现多图片上传实例

先上效果图: 这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的) 总共涉及到三处文件(常规来说) 1.路由入口文件(我这里是/routes.js,很多时候会在/app.js) 复制代码代码如下: //添加美食 app.all('/add', users.add); 2.路由控制器文件(我这里是/routes/users.js) 复制代码代码如下: //添加美食exports.add = function (req, res) { if (req.
javascript实现图片上传前台页面

这篇文章主要通过代码分析javascript实现图片上传前台页面,废话不多说了,直接贴代码了. 代码示例一: <script> //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型 if (obj.value == '') { $.messager
兼容IE和FF的图片上传前预览js代码

效果图如下: 代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta
使用jquery.form.js实现图片上传的方法

本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',
JavaScript多图片上传案例

JS多图片上传小小实例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>上传多图片</title> <script type="text/javascript"> function JM_wu(ob) { ob.style.display = "none"; } function JM_you(ob) { ob.sty

图片上传即时显示缩略图的js代码

相关推荐

随机推荐