js 上传头像+略缩图

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><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></body></html>
时间: 2024-10-21 00:48:27

js 上传头像+略缩图的相关文章

js 上传头像img

<label> <div class="myusercenter-image-none"> <img src="" class="myusercenter-image" alt=""> <input type="file" class="myusercenter-hard-img"> </div> </label>

js上传头像功能

这也是学习过程中的一个很使用的知识点就分享给大家了 注释都写在里面了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq

jQuery 自制上传头像插件-附带Demo实例(ajaxfileupload.js第三弹)

这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章 <ASP.NET 使用js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹> <jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)> 的一个收关.但是最初也是因为想做这么一个功能,一点一点的引发出了好多问题,不断去学习,研究,才写了这三篇. 早些时候已经实现了上传头像的功能,但是代码却是零零散散的,有html,有jQuery

Jcrop+uploadify+php实现上传头像预览裁剪

最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁切点的坐标进行裁剪. 首先看一下uploadify上传插件的API: uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf.script :   后台处理程序的相对路径 .默认值:

仿新浪微博上传头像组件FaustCplus.swf 修复版

因系统需要,网上下载了这个文件.界面效果如图: 但是很可惜,部分系统访问报错. 错误一:无法选择照片.点击本地照片无反应. 网上寻找了好久也没有找到新版本,但是有老版本的flash源文件,只是有人提过可能是as文件的判断语句问题,硬着头皮下载flash自己修改.先下载的flash 8,打不开.看来用的是高版本的flash做的,再下载flash cs3.还是打不开.好吧,下载个flash cs6,终于打开了. 找到sourcecode\view\browse\BrowseComp.as文件 可以看

php 制作略缩图

一.需求 最近公司的项目中有个需求,就是用户上传自己的微信二维码,然后系统会自动将用户的微信二维码合并到产品中 二.分析 因为该系统是手机端的,所以从用户端的体验出发,用户当然是直接在微信上保存二维码然后上传.这里有个问题就是, 微信的安卓版本与ios版本保存下来的图片尺寸是不一样的.所以为了更加谨慎的使用二维码,这里需要将上传的二维码 进行转化为统一的规格.所以需要制作略缩图 三.过程 我们可以使用php的GD库来处理,定义一个目标尺寸画布,然后将二维码拷贝布满画布,就是代码 /** * 制作

上传头像裁剪功能

我之前做项目的时候有需求是需要实现上传头像裁剪再上传到服务器,所以上网看了一下别人写的案例.方法.文章,浪费了1天的时间,最后才跌跌碰碰的终于写了出来. 现在给大家分享一下吧. 所用到的js文件 cropper.min.js, canvas-to-blob.js(这个是IE上需要用到的,不然会不支持转blob) jquery.min.js, bootstrap.min.js ajaxfileupload.js css文件 cropper.min.css,bootstrap.min.css htm

js 上传文件后缀名的判断 var flag=false;应用

js 上传文件后缀名的判断  var flag=false;应用 <!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> &

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu