wel_coder
wel_coder

input type=file选择图片按钮样式修改与图片预览

1 背景

在这里插入图片描述
通过上图我们可以看到input type=file按钮的默认样式，非常不美观，如果要自定义该按钮的样式，要如何实现呢？

2 方式1样式

input覆盖整个按钮区域，并且设置完全透明

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ccc;
            text-align: center;
        }
        
        #file {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
    style>
head>
<body>
    <div>
        选取图片
        <input type="file" accept="image/*" id="file">
    div>
body>
html>

3 方式2样式

input隐藏，通过label设置按钮样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ccc;
            text-align: center;
        }

        #file{
            display: none;
        }
        
        label {
            display: block;
            width: 100%;
            height: 100%;
        }
    style>
head>
<body>
    <div>
        <input type="file" accept="image/*" id="file">
        
        <label for="file">选取图片label>
    div>
body>
html>

4 图片预览

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<script>
    $(function() {
        // input选取文件后会触发change事件
        $('#file').on('change', function(event) {
            console.log(event.target.files) //选取的文件对象数组

            // 通过FileReader读取文件对象信息
            var reader = new FileReader()
            reader.onload = function(e) {
                var img = new Image()
                img.src = e.target.result //读取结果会转为base64数据格式
                img.style.width = '200px'
                document.body.appendChild(img)
            }
            reader.readAsDataURL(event.target.files[0])
        })
    })
script>

5 js动态创建input方式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .file {
            width: 100px;
            height: 100px;
            line-height: 100px;
            background-color: #ccc;
            text-align: center;
        }
	style>
head>
<body>
    <div class="file">
        选取图片
    div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<script>
	$(function() {
		$('.file').on('click', function() {
                // 动态创建input元素，type为file，样式为隐藏，并追加到body中
                var input = $('')
                input.prop('type', 'file')
                input.css('display', 'none')
                $('body').append(input)
                // 监听选取文件触发的change事件
                input.on('change', function(event) {
                    console.log(event.target.files) //选取的文件对象数组
                    // 通过FileReader读取文件对象
                    var reader = new FileReader()
                    reader.onload = function(e) {
                        var img = new Image()
                        img.src = e.target.result //读取结果会转为base64数据格式
                        img.style.width = '200px'
                        document.body.appendChild(img)
                    }
                    reader.readAsDataURL(event.target.files[0])
                    // 完成选取文件后，从dom中自我删除
                    input.remove()
                })
                // 自动触发click事件去选取文件
                input.click()
            })
        })
    script>
body>
html>

6 效果展示

input type=file选择图片按钮样式修改与图片预览_第1张图片

你可能感兴趣的:(js,css,js)

  • HTML到PDF转换，11K Star 的pdfmake.js轻松应对
    在Web开发中，将HTML页面转换为PDF文件是一项常见的需求。无论是生成报告、发票、还是其他任何需要打印或以PDF格式分发的文档，开发者都需要一个既简单又可靠的解决方案。幸运的是，pdfmake.js库以其轻量级、高性能和易用性，成为了许多开发者的首选。本文将介绍如何使用这个拥有11KStar的GitHub项目来实现HTML到PDF的转换。什么是pdfmake.jspdfmake.js是一个基于
  • EMET8002 Case Studies in Applied Economic 后端
    EMET8002CaseStudiesinAppliedEconomicAnalysisandEconometricsSemester12025ComputerLabinWeek3Question1:SimpleLinearRegressionDownloadthe“states”datafromWattleandopenitinStata.Aspartofthisquestionweexplor
  • Python将json格式数据存储到Mysql数据库 代码轨迹 Pythonpython数据库json
    Python操作Mysql数据库1.安装pipinstallmysql-connector-python2.数据库插入json格式数据importmysql.connectorimportjsonfromdatetimeimportdatetime#创建数据库连接db=mysql.connector.connect(  host="localhost", #MySQL服务器地址  user="ro
  • typescript快速入门--面向对象编程 Mr.Lee jack anyscripttypescriptjavascript前端
    typescript面向对象接口interface接口是对象属性，方法的抽象，也可以理解为预定义//使用接口来抽象方法，接口是需要具体去实现的interfaceAnimals{name:string;age:number;eat:(some:string)=>string;}//定义一个类型来具体实现上面的接口，这种情况可以看作是一个json对象来理解varDog:Animals={name:"d
  • python json转化为字典_Python处理json字符串转化为字典 weixin_39636691 pythonjson转化为字典
    原博文2015-11-0923:02−有一个需求，需要用python把json字符串转化为字典inp_str="{'k1':123,'k2':'345',’k3’,’ares’}"importjsoninp_str="{'k1':123,'k2':'345',’k3’,...相关推荐2017-11-1711:57−在工作中遇到一个小问题，需要将一个python的字符串转为字典，比如字符串：user
  • 纯前端实现「羊了个羊」小游戏(附源码） 软件技术NINI 趣味源码前端
    实现一个类似于「羊了个羊」的纯前端小游戏是一个相对复杂的项目，因为它涉及许多前端技术和游戏逻辑。以下是一个简要的步骤指南，帮助你入门并实现这个项目。由于篇幅限制，这里只提供一个基础框架和一些关键点的实现思路。准备工作工具选择：使用一个现代的前端框架，如React、Vue或Angular。这里以React为例。使用CSS或预处理器（如Sass）进行样式管理。使用状态管理库（如Redux）管理游戏状态
  • 基于Vue&Axios制作音乐播放器(bilibili黑马程序员Vue入门学习记录) xxxrsongseven 前端javascriptvuevue.js前端css
    目录使用Vue制作一个音乐播放器前言VueVue导入Vue挂载Vue指令v-textv-htmlv-onv-showv-ifv-bindv-forv-modelaxiosaxios导入axios使用音乐网站代码HTMLCSSJS使用Vue制作一个音乐播放器前言第一次写，如有不足请指正！音乐播放器效果展示音乐播放器（密码：He371226）（域名出了点问题，临时使用）学习链接：黑马程序员vue前端基
  • Spring Boot 接口 JSON 序列化优化：忽略 Null 值的九种解决方案详解 坎布里奇 SpringBootspringbootjsonpython
    一、针对特定接口null的处理：方法一：使用@JsonInclude注解1.1类级别：在接口返回的‌DTO类或字段‌上添加@JsonInclude注解，强制忽略null值：类级别：所有字段为null时不返回@JsonInclude(JsonInclude.Include.NON_NULL)publicclassMyResponseDTO{privateStringfield1;1.2字段级别：在具
  • [前端笔记——HTML介绍] 3.＜head＞标签里有什么？ 弓早早o_O 前端#前端html
    [前端笔记——HTML介绍]3.head标签里有什么？1.标题2.元数据：元素3.在站点增加自定义图标4.HTML中应用CSS和JavaScript5.为文档设定主语言元素的内容不会再浏览器中显示，它的作用是保存页面的一些元数据。接下来介绍几个head中重要的常用元素：1.标题元素可以为文档添加标题。注意和的区别：元素在页面加载完毕时显示在页面中，是为body添加标题的，通常只出现一次，用来标记页
  • 零基础学习HTML(8)——pre标签、code标签 Dragon水魅 零基础学习Web开发html
    文章目录官方资料学习正文注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文pre标签：htt
  • Go与PHP性能对比分析 大0马浓 golangphp开发语言
    以下是Go1.22版本和PHP8.3版本+Swoole的性能对比一、‌核心性能指标对比‌指标Go(1.22版本)PHP(8.3版本+Swoole)差距倍数‌单请求响应时间‌0.8ms(JSON序列化)2.5ms(Swoole协程模式)3.1倍‌并发吞吐量‌18万QPS(4核8G)5.2万QPS(Swoole+OPcache)3.5倍‌内存占用‌50MB/协程(百万级并发)180MB/进程(协程池模
  • Vue.js 学习笔记 剑走偏锋o.O vue.js学习笔记
    文章目录前言一、Vue.js基础概念1.1Vue.js简介1.2Vue.js的特点1.3Vue.js基础示例二、Vue.js常用指令2.1双向数据绑定（`v-model`）2.2条件渲染（`v-if`和`v-show`）2.3列表渲染（`v-for`）2.4事件处理（`v-on`）2.5表单绑定（`v-model`）三、Vue.js组件化开发3.1组件的概念3.2创建组件3.2.1全局注册3.2.
  • 前端vue面试题 微微的猪食小窝 vue面试题ajaxnode.jsvue.js
    一.自我介绍(我是谁来自哪里,今天来的目的,面试的岗位是什么,几年的工作经验,掌握的技术栈有哪些,开发过什么项目,项目中负责的板块是什么)面试官您好!我叫XXX,来自XXX,很荣幸能来我们公司面试,我从事前端开发有3年了,目前掌握的技术有html,css,js,ajax,vue,小程序,参与过各种类型的项目。我做过的项目有A,B,C,D,E那么最近做的一个项目是XXX在这个项目中我主要负责的板块是
  • 第五十五：计算属性 computed 小画家~ 前端前端javascriptvue.js
    add:{{add()}}add:{{add()}}sum:{{sum}}sum:{{sum}}xyjsimport{createApp,reactive,computed}from'./vue.esm-browser.js'createApp({setup(){constdata=reactive({x:10,y:20})//方法-无缓存letadd=()=>{console.log("add"
  • 【Vue】Vue入门--双向绑定，Vue的组件，Axios异步通信，计算属性，插值，自定义事件 a碟 vuevue前端
    目录1.Vue双向绑定2.Vue的组件3.Axios异步通信3.1.什么是Axios3.2.为什么要使用Axios3.3.第一个Axios应用程序4.Vue的生命周期5.计算属性6.插槽7.自定义事件8.Vue入门小结1.Vue双向绑定Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会同步变化。这就是Vue.js的精髓之处了。可
  • js操作字符串的常用方法 胡歌1 javascript开发语言ecmascript
    1.查找和截取1.1indexOf作用：查找子字符串在字符串中首次出现的位置。是否改变原字符串：不会改变原字符串。返回值：如果找到子字符串，返回其起始索引（从0开始）；如果未找到，返回-1。语法string.indexOf(searchValue[,fromIndex])searchValue：要查找的子字符串。fromIndex（可选）：从字符串的哪个索引位置开始查找，默认为0。1.1.1基本用
  • vue3+vite 封装axios请求 bsefef 前端html面试vue.js前端javascript
    vue3+vite封装axios请求安装axios创建axios实例封装请求方式封装请求接口vue中调用安装axiosnpminstallaxios创建axios实例//http/index.jsimportaxiosfrom'axios'import{ElLoading,ElMessage}from'element-plus';//创建axios的一个实例varinstance=axios.cr
  • UniApp设备适配 uniapp
    UniApp是一个使用Vue.js开发跨平台应用的框架，它支持将同一套代码编译发布到多个平台，如H5、小程序、iOS、Android等。设备适配是UniApp开发中的关键环节，旨在确保应用在不同设备和操作系统上都能提供良好的用户体验。以下是UniApp设备适配的主要策略和技巧：1.使用自适应单位rpx（ResponsivePixel）：定义：rpx是UniApp提供的自适应单位，1rpx等于屏幕宽
  • 鸿蒙中打开相机相册 出了名的会写bug 数码相机harmonyos华为
    1。module.json5中配置相应的权限requestPermissions:[{"name":"ohos.permission.CAMERA","reason":"$string:permission_reason_camera","usedScene":{"abilities":["EntryAbility"],"when":"inuse"}},{"name":'ohos.permissi
  • 基于vue3+vite+axios的接口请求封装 编码七号 前端javascript开发语言
    一、src目录下新建http文件夹，文件夹下新建index.js/request.js文件以及api文件夹二、reques.js文件封装请求方法importaxiosfrom'axios';importqsfrom'qs'//创建axios实例constrequest=axios.create({baseURL:import.meta.env.VITE_BASE_URL,timeout:10000
  • HTML面试题 没资格抱怨 HTML面试题html前端
    1.前端页面有哪三层构成，分别是什么？作用是什么？前端页面主要由三层构成，分别是结构层、表示层和行为层。这三层各自的作用如下：1.HTML（HyperTextMarkupLanguage）：结构层，它是网页的基础，用于定义网页的内容结构，如标题、段落、列表、图像等元素。HTML标签告诉浏览器如何组织和呈现这些内容。2.CSS（CascadingStyleSheets）：样式层，CSS负责为HTML
  • Windows 下启动 gradio 信息: 用提供的模式无法找到文件。（qbit） gradio
    技术栈Windows10Python3.11.8Gradio5.6.0启动gradio报如下信息信息:用提供的模式无法找到文件。经排查，是因为gradio时调用系统where命令去找nodejs$wherenode信息:用提供的模式无法找到文件。本文出自qbitsnap
  • 第五十：使用Axios实现文章搜索案例 动态属性绑定 v-bind 简写：与 Axios get post 请求 小画家~ 前端vue.jsjavascript前端
    value="dengruicode.com"v-bind:value="web.url"简写:value="web.url"src="windows.jpg":src="web.img"class="textColor"邓瑞编程:class="{textColor:web.fontStatus}"dengruicode.comjsimport{createApp,reactive}from'./
  • Node.js——fs模块-文件删除 Fan_web 前端学习分享node.js前端开发语言
    1、在Node.js中，我们可以使用unlink或unlinkSync来删除文件。2、语法：fs.unlink(path,callback)fs.unlinkSync(path)参数说明：path文件路径callback操作后的回调函数本文的分享到此结束，欢迎大家评论区一同讨论学习，下一篇继续分享Node.js的fs模块进行文件夹操作的学习。
  • Node.js——fs模块-文件读取 Fan_web 前端学习分享node.js前端开发语言
    1、文件读取：通过程序从文件中去除其中的数据2、方法方法说明readFile异步读取readFileSync同步读取createReadStrean流式读取3、readFile异步读取语法：本文的分享到此结束，欢迎大家评论区一同讨论学习，下一篇继续分享Node.js的fs模块进行文件读取应用场景的学习。
  • Node.js学习分享（上） miraculous111 node.js学习笔记javascript
    Node.jsfs文件系统模块fs.readFile()fs.writeFile()path路径模块路径拼接path.join()获取路径中的文件名path.basename()的语法格式获取路径中的文件扩展名path.extname()的语法格式http模块服务器相关概念IP地址域名和域名服务器端口号创建最基本的web服务器创建web服务器的基本步骤request请求对象解决中文乱码问题根据不同
  • 【前端】Node.js使用教程 m0_74825172 面试学习路线阿里巴巴前端node.jsvim
    目录一、?Node.js开发环境和编译1.1安装Node.js1.2创建一个Node.js项目1.3编写Node.js程序1.4运行Node.js程序1.5使用Node.js模块二、高级的Node.js编程概念和示例2.1异步编程2.2错误处理2.3网络请求2.4构建Web服务器2.5数据库交互三、Node.js开发中重要方面和概念3.1环境变量和配置文件3.1.1使用环境变量3.1.2使用配置文
  • Node.js连接Mysql 月落玄衣 node.js1mysqlnode.jsmysqljavascript开发语言后端
    node.js连接mysql简单步骤，如下：安装mysql驱动：npminstallmysql连接数据库：//请求mysqlvarmysql=require('mysql');//设置连接信息varconnection=mysql.createConnection({host:'localhost',user:'root',password:'123456',port:'3306',databas
  • 解释 Node.js 中的异步编程模型，如何使用回调、Promise 和async / await 处理异步操作？ 程序员黄同学 node.js前端开发JavaScriptnode.js
    一、Node.js异步模型基础Node.js采用单线程事件循环机制，通过libuv库实现非阻塞I/O操作。这种架构决定了异步编程是其核心特性。当遇到I/O操作（如文件读写、网络请求）时，主线程会将任务交给底层线程池处理，自己继续执行后续代码。操作完成后通过回调通知主线程。二、异步处理的三驾马车1.回调函数（Callback）最基础的异步处理方式，将函数作为参数传递给异步方法：constfs=req
  • 谈谈 Node.js 中的文件系统（fs）模块，如何进行文件读写操作？ 程序员黄同学 node.js前端开发JavaScriptnode.js
    Node.js文件系统（fs）模块深度解析与实践指南一、模块基础与核心能力Node.js的fs模块提供了完整的文件系统操作能力，涵盖50+个方法，主要分为以下类型：文件读写：基础CRUD操作目录操作：创建/删除/遍历目录文件监控：watch/watchFile方法文件信息：stat/access等方法流式处理：createReadStream/createWriteStream//基础引入方式co
  • linux系统服务器下jsp传参数乱码 3213213333332132 javajsplinuxwindowsxml
    在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了
  • Spring 注解区别以及应用 BlueSkator spring
    1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。   2. @Qualifier 当spring中存在至少一个匹
  • printf和sprintf的应用 dcj3sjt126com PHPsprintfprintf
    <?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th
  • config.getInitParameter 171815164 parameter
    web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name>
  • Ant标签详解--基础操作 g21121 ant
            Ant的一些核心概念：         build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。        project：每个构建文
  • [简单]代码片段_数据合并 53873039oycg 代码
            合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。         代码如下:        
  • java 通信技术 云端月影 Java 远程通信技术
    在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来
  • string与StringBuilder 性能差距到底有多大 aijuans
              之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！         由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！        
  • 今天碰到 java.util.ConcurrentModificationException 异常 antonyup_2006 java多线程工作IBM
    今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con
  • PL/SQL的类型和JDBC操作数据库 百合不是茶 PL/SQL表标量类型游标PL/SQL记录
    PL/SQL的标量类型:    字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
  • Mockito：一个强大的用于 Java 开发的模拟测试框架实例 bijian1013 mockito单元测试
    Mockito框架：         Mockito是一个基于MIT协议的开源java测试框架。         Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
  • 精通Oracle10编程SQL(10)处理例外 bijian1013 oracle数据库plsql
    /* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio
  • 【Java】Java执行远程机器上Linux命令 bit1129 linux命令
    Java使用ethz通过ssh2执行远程机器Linux上命令，   封装定义Linux机器的环境信息   package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po
  • java通信之Socket通信基础 白糖_ javasocket网络协议
    正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。   Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc
  • angular.bind boyitech AngularJSangular.bindAngularJS APIbind
    angular.bind 描述：         上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法：          angular.bind(se
  • java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out
  • Redis.conf配置文件及相关项说明（自查备用） Kai_Ge redis
       Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: #
  • [强人工智能]实现大规模拓扑分析是实现强人工智能的前奏 comsci 人工智能
         真不好意思,各位朋友...博客再次更新...      节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....      但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
  • 记录一些常用的函数 dai_lm java
    public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead
  • Hadoop中小规模集群的并行计算缺陷 datamachine mapreducehadoop并行计算
    注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------
  • 小学4年级英语单词背诵第二课 dcj3sjt126com englishword
    egg  蛋 twenty 二十 any 任何 well 健康的，好   twelve 十二 farm 农场 every 每一个 back 向后，回   fast 快速的 whose 谁的 much 许多 flower 花   watch 手表 very 非常，很 sport 运动 Chinese 中国的  
  • 自己实践了github的webhooks, linux上面的权限需要注意 dcj3sjt126com githubwebhook
    环境, 阿里云服务器   1. 本地创建项目, push到github服务器上面   2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "xxx@xx.com"     3. 将密钥添加到github帐号的SSH_KEYS里面   3. 用www用户执行克隆, 源使
  • Java冒泡排序 蕃薯耀 冒泡排序Java冒泡排序Java排序
    冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/
  • Excle读取数据转换为实体List【基于apache-poi】 hanqunfeng apache
    1.依赖apache-poi   2.支持xls和xlsx   3.支持按属性名称绑定数据值   4.支持从指定行、列开始读取   5.支持同时读取多个sheet   6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str
  • 3个处于草稿阶段的Javascript API介绍 jackyrong JavaScript
    原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email   本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API   &
  • 6个创建Web应用程序的高效PHP框架 lampcy Web框架PHP
    以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需
  • 评"救市后中国股市新乱象泛起"谣言 nannan408
    首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天
  • 页面全屏遮罩的实现 方式 Rainbow702 htmlcss遮罩mask
    之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就
  • 关于angularjs的点滴 tntxia AngularJS
      angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我
  • Nutz--->>反复新建ioc容器的后果 xiaoxiao1992428 DAOmvcIOCnutz
    问题： public class DaoZ {     public static Dao dao() { // 每当需要使用dao的时候就取一次     Ioc ioc = new NutIoc(new JsonLoader("dao.js"));     return ioc.get(
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他