js 上传头像img

<label>
  <div class="myusercenter-image-none">
    <img src="" class="myusercenter-image" alt="">
    <input type="file" class="myusercenter-hard-img">
  </div>
</label>
// 上传头像
            $(function() {
                $(‘.myusercenter-hard-img‘).on(‘change‘, function(e) {
                    var files = e.target.files;
                    var reader = new FileReader();
                    reader.readAsDataURL(files[0], "UTF-8");
                    reader.onload = function(evt) {
                        var fileString = evt.target.result;
                        var date = {
                            "file": fileString
                        };
                        $(‘.myusercenter-image‘).attr(‘src‘, fileString);

                        console.log(fileString)

                        // $.post("", date).success(function (result) {
                        // alert("ok");
                        // });
                    }
                })
            })

原文地址:https://www.cnblogs.com/chen527/p/9591697.html

时间: 2024-11-09 03:53:45

js 上传头像img的相关文章

js 上传头像+略缩图

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script language="javascript" type="text/javascript"> var allowExt = ['j

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

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

刚完成的一个上传头像模块,望指点(含详细代码)

file API,直接读取本地文件.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" name="file" onchange="showPic();"/> <img id="avatar" src="" style="width:200px"> 2.fileAPI预览图

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

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

asp.net mvc上传头像加剪裁功能

正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc 4 核心的js调用代码是crop.js和helper文件夹下的ImgHandler.cs 效果图 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href=

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

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