<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery-1.8.3.min.js"></script>

</head>

<body>

    <div id="divimg" >

   </div>

    <input type="button" name="name" value="上传" id="btnUpload"/>

    <div >

        <img src="" id="selectId" style="width:100px; height:100px" />

    </div>

</body>

</html>

<script>

    $(function (e) {

        var arrImg = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg",

            "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg"];

        $("#divimg").append(function () {

            for (var i = ; i < arrImg.length; i++) {

                $("#divimg").append("<img src='img/" + arrImg[i] + "', style='width:100px; height:100px' class='eachImg'/><&nbsp;&nbsp;/>");

            }

        });

    //});

    //$(function () {

        $(".eachImg").click(function () {

            var src = $(this).attr("src");

            //alert(src.replace("img/", ""));

            $("#selectId").attr("src", src);

        });

        $("#btnUpload").click(function () {

            var srcimg = $("#selectId").attr("src").replace("img/", "");

            $.ajax({

                type: "POST",

                url: "/Home/DownloadFile",

                contentType: "application/json",

                data: srcimg

            });

        });

    });

</script>

在线头像上传（js）的更多相关文章

  1. js会员头像上传拖动处理头像类

    js会员头像上传拖动处理头像类 点击下载源码文件

  2. 原创：HTML 头像截取上传 JS+PHP 整合包~

    关于: 关于头像上传这个东西,网上一搜乱七八糟的一堆然而很少很少有自己中意的插件一怒之下就自己写一个... 用法: <!DOCTYPE html> <html lang=" ...

  3. js实现裁剪头像上传编辑器

    插件: 1.富头像上传编辑器是一款支持本地上传.预览.视频拍照和网络加载的flash头像编辑上传插件,可缩放.裁剪.旋转.定位和调色等. http://www.fullavatareditor.com ...

  4. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  5. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  6. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  7. struts 头像上传

    java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...

  8. ASP.NET简单实现APP中用户个人头像上传和裁剪

    最近有个微信项目的用户个人中心模块中,客户要求用户头像不仅仅只是上传图片,还需要能对图片进行裁剪.考虑到flash在IOS和Android上的兼容性问题,于是想着能从js这块入手,在网上发现了devo ...

  9. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

随机推荐

  1. paip.函数方法回调机制跟java php python c++的实现

    paip.函数方法回调机制跟java php python c++的实现 作者Attilax 艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  2. 这样leetcode简单题都更完了

    这样leetcode简单题都更完了,作为水题王的我开始要更新leetcode中等题和难题了,有些挖了很久的坑也将在在这个阶段一一揭晓,接下来的算法性更强,我就要开始分专题更新题目,而不是再以我的A题顺 ...

  3. Filter的用法之注解

    一.filter的概念及功能       Filter就像用滤纸来过滤杂物一样,它也叫过滤器.过滤器是Servlet2.3之后新增加的功能,它可以更变一个request请求也可以修改一个respons ...

  4. Android图片处理-图片压缩处理

    这里先重复温习一下上一篇,调用相册获取图片: /*** * 这个是调用android内置的intent,来过滤图片文件 ,同时也可以过滤其他的 */ Intent intent = new Inten ...

  5. 10TSQL语言概述-脚本调试-命名规范-天轰穿数据库2014

    关键字:sqlserver 数据库脚本 数据库 编码规范大纲:sql概念,TSQL脚本调试,数据库编码规范 优酷超清地址 腾讯超清地址 土豆超清地址

  6. [推荐]PaaS技术知识贴

    [推荐]PaaS技术知识贴 云计算PaaS技术与应用 http://wenku.baidu.com/view/08f77eefaeaad1f346933f20?fr=prin大型WEB网站架构深入分析 ...

  7. [aaronyang]WPF4.5 - AyTabControlBase样式分享，绝对好看

    样式代码如下: 对于博客园将文章移除首页的做法:我就迁移了.文章已经迁移:http://www.ayjs.net/post/75.html 由于例子比较简单,你只要指定Style即可,难点,透明区域的 ...

  8. scikit-learn主要模块和基本使用方法

    从网上看到一篇总结的很不错的sklearn使用文档,备份勿忘. 引言 对于一些开始搞机器学习算法有害怕下手的小朋友,该如何快速入门,这让人挺挣扎的.在从事数据科学的人中,最常用的工具就是R和Pytho ...

  9. 当创业遇上O2O，新一批死亡名单，看完震惊了！

    当创业遇上O2O,故事就开始了,总投入1.6亿.半年开7家便利店.会员猛增至10万……2015半年过去后,很多故事在后面变成了一场创业“事故”,是模式错误还是烧钱过度?这些项目的失败能给国内创业者带来 ...

  10. Android定位&地图&导航——基于百度地图移动获取位置和自动定位

    一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyAppl ...