2b勿扰
2b勿扰

JS 第三方工具封装经典案例（图片上传预览）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
  <style>
    ul,
    li {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .out-main-top {
      height: auto;
      overflow: auto;
      display: flex;
      justify-content: flex-start;
    }

    .out-main-top button {
      padding: 10px 40px;
      font-weight: bold;
      font-size: 21px;
      height: 52px;
      margin-left: 30px;
      vertical-align: middle;
      margin-top: 60px;
    }

    .canvas-img {
      margin-top: 20px;
      clear: both;
    }

    .canvas-img li {
      width: 150px;
      height: 150px;
      position: relative;
      border: 1px solid #ccc;
      cursor: pointer;
      float: left;
      margin-right: 10px;
      overflow: hidden;
    }

    .canvas-img li img {
      width: 90%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .canvas-img li .close {
      position: absolute;
      right: 4px;
      top: 1px;
      font-style: normal;
      font-size: 12px;
      color: #666;
    }

    .add-pic-box {
      width: 200px;
      height: 200px;
      border: 1px dashed #999;
      border-radius: 4px;
      cursor: pointer;
      background: #fff url('./images/upload.png') center center no-repeat;
    }

    .drag-box {
      width: 250px;
      height: 200px;
      border: 1px dashed #ccc;
      margin-left: 20px;
      color: #ccc;
      font-size: 15px;
      text-align: center;
      padding-top: 90px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <!-- <input type="file" id="myinput" onchange="uploadFile()"> -->
  <div class="out-main-top">
    <div class="add-pic-box" id='addPicBox'>
      <input type="file" name="pic[]" multiple id="myinput" onchange="uploadFile()" style="display: none">
    </div>
    <div id="dropbox" class="drag-box">
      或者将文件拖到此处
    </div>
    <button onclick="uploadFileNow()">上传</button>
  </div>
  <ul id="canvasImg" class="canvas-img"></ul>
  <script>
    var myinput = document.getElementById('myinput');
    var canvasImg = document.getElementById('canvasImg');
    var dropbox = document.getElementById('dropbox');
    var allBaseImg = []; //需要给到后台的图片数据
    var AllowImgFileSize = 1024 * 400; //上传图片最大值(单位字节)超过400K上传失败

    document.getElementById('addPicBox').addEventListener('click', function (ev) {
      myinput.click();
    })

    function uploadFile() {
      var files = myinput.files;
      //处理图片
      transferBase(files);
    }

    function transferBase(files) {
      for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];
        var reader = new FileReader();
        //用于图片显示
        reader.readAsDataURL(file);

        //ArrayBuffer
        // reader.readAsArrayBuffer(file);
        reader.onload = function (e) {
          var base64 = e.target.result;

          var index = allBaseImg.indexOf(base64);
          if (index != -1) {
            console.log('图片已经上传过了！');
            return;
          }

          var str = `
  • ${base64}">X
    • `    ;
          // var str = '
  • X
    • ';    
          canvasImg.innerHTML += str;
          allBaseImg.push(base64);
        }

      }
    }

    canvasImg.addEventListener('click', function (ev) {
      var target = ev.target;
      if (target.className == 'close') {
        var thisbase = target.offsetParent.querySelector('img').getAttribute('src');
        var index = allBaseImg.indexOf(thisbase);
        allBaseImg.splice(index, 1);
        target.offsetParent.remove()
      }
    })

    function uploadFileNow() {
      //调接口
      console.log(allBaseImg);
    }


    dropbox.addEventListener('dragover', function (e) {
      e.stopPropagation();
      e.preventDefault();
    }, false);

    dropbox.addEventListener('drop', function (e) {
      e.stopPropagation();
      e.preventDefault();

      var dtfiles = e.dataTransfer.files;

      transferBase(dtfiles); //转化成banse64 
      //  transferBlob(dtfiles);  //arraybuffer
    }, false);
  </script>
</body>

</html>

    你可能感兴趣的:(前端)

    • 个人网站搭建1-域名及虚机 一条西瓜皮
      前情提要由于本人的初衷不是做网站，只是想搭建后台，为前端提供服务，所以网站放在国外服务器上。国内服务器上搭建网站，需要备案，备案需要准备材料，大概耗费一个月时间。根据网上的资料，国外建站，只要不发布非法内容，被墙的概率极小。虽然概率小，但是为了不影响后期的服务，时间充裕后会考虑进行备案，将网站迁移至国内。毕竟天朝的网络响应速度比出去绕一圈要快得多。本文只涉及域名购买、云虚拟主机购买、域名解析等基础
    • 从面向对象(OOP)到面向切面(AOP)：编程范式的演变 妍思码匠 妍思码匠的前端乐园面向切面编程AOP前端代码复用模块化设计装饰器模式
      什么是AOP？AOP是一种编程范式，它允许你将那些横切应用程序多个部分的“例行公事”（称为“切面”）从核心业务逻辑中分离出来，以模块化的方式进行管理和重用。在前端开发中，AOP可以用于处理日志记录、性能监控、错误处理等。想象一下，你在一家餐厅工作，每次有顾客点餐时，你都需要记录订单，然后在厨房和顾客之间传递信息。这个过程包括了接收订单、记录、传递信息等多个步骤，每个步骤都可能需要执行一些“例行公事
    • JavaWeb——前端工程化 A_Tai2333333 JavaWeb前端
      一、前端工程化1.什么是前端工程化:前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题，以提高效率和降低成本。2.前端工程化实现技术栈:ES6+Nodejs+npm+Vite+VUE3+Router+Pinia+Axios+Element-plusECMAScript6:VUE3中大量使用ES6语法;Nodejs:前端项目运行环境npm:依赖下载工具Vit
    • Vue搭建前端监控，采集用户行为的 N 种姿势 奋斗的工程师 前端vue.jsjavascript
      Vue搭建前端监控，采集用户行为的N种姿势最近我在3A平台购买了服务器。在一个产品中，用户最基本的行为就是切换页面。用户使用了哪些功能，也能从切换页面中体现出来。因此通用数据一般是在页面切换时产生，表示某个用户访问了某个页面。页面切换对应到前端就是路由切换，可以通过监听路由变化来拿到新页面的数据。Vue在全局路由守卫中监听路由变化，任意路由切换都能执行这里的回调函数。//Vue3路由写法const
    • BCrypt.checkpw()报错java.lang.IllegalArgumentException: Invalid salt 玩物丧志汪某人 Java异常参数传递前端开发后端交互明文密文数据库操作
      先看一下方法参数，放两个String第一个参数是明文（一般是前端传过来的值），第二个是密文（从数据库取出来的值），各位大聪明们是不是把参数放反了
    • 前端性能监控、异常监控的一些记录 一只小白菜~ 其他!前端异常监控性能监控
      文章目录常见异常类型常用的一些异常监控的方法window.errorwindow.addEventListener('error')window.addEventListener('load')window.addEventListener('DOMContentLoaded')window.performancenavigator.sendBeacon1*1像素gifaxios请求/响应拦截器V
    • 前端监控之白屏异常 github_35780652 前端监控JavaScript前端javascript监控类
      一、意义：  这里和测速的白屏不同，测速的白屏是指：导航页面开始到TTFB之间的时间称之为白屏时间。白屏异常是指：用户看到的一直是白屏，页面没有任何内容。比如渲染函数报错、Vue或React路由页面没有内容、网页加载很慢很慢以至规定的时间范围内一直没内容。  监控白屏异常能发现一些遗漏的bug并及时修复。二、捕获方法：  页面加载后2秒或进入页面后12秒（兼容一些特殊页面不会触发load事件）检查
    • Spring Boot + Mybatis + Shiro 后台权限管理系统 chuxia_vlog
      平台简介一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。性别男，若依是给还没有出生女儿取的名字（寓意：你若不离不弃，我必生死相依）若
    • 前端速通面经八股系列(六）—— Vue(下) 真的很上进 前端面经八股合集前端javascript开发语言面试javavue.js前端框架
      接上ueueVue下篇四、路由1.Vue-Router的懒加载如何实现2.路由的hash和history模式的区别1.hash模式2.history模式3.两种模式对比3.如何获取页面的hash变化4.`$route和$router`的区别5.如何定义动态路由？如何获取传过来的动态参数？6.Vue-router路由钩子在生命周期的体现7.Vue-router跳转和location.href有什么区
    • uniapp开发中遇到的兼容性问题（待续） 呆呆papa uniapp开发ios
      1、日期格式问题使用uniapp开发过程中，有这么一段代码，将两个时间字符串通过JS的date构造函数，构造出两个日期并比较大小，在Android平台没有问题，在ios上就出现了日期比较失败，无法执行正常的校验。ios中不支持-作为日期之间的分隔符，需要使用/。使用replaceAll替换掉日期字符串中的-就好了。参考文献进阶之路-前端：ios对newDate()的兼容问题2、输入框click事件
    • 提交保存，要做重复请求拦截，避免出现重复保存的问题 niceLiuSir 幂等性
      **问题：**前端ajax提交数据的时候，当频繁点击的时候，或者两个账号以相同数据创建的时候，会出现问题。**处理办法：**前端拦截，防止重复提交数据，在上一次请求返回结果之后才允许提交第二次；后端和数据库也同意做拦截判断。**1.前端拦截：**结合layer.confirm可以屏蔽掉重复点击确认按钮产生重复请求的情况。//创建征地补差价协议functioncreateDisparityContr
    • 使用 Shell 脚本管理 RocketMQ 服务：启动、停止与状态检查 heromps rocketmq
      在分布式系统中，RocketMQ是一个流行的消息队列中间件。在开发和运维过程中，能够高效地启动、停止和检查RocketMQ相关服务的状态非常重要。本文将介绍如何使用Shell脚本来管理RocketMQ的NameServer、Broker和Dashboard服务，并提供相应的脚本示例和说明。安装可以查看这篇博客RocketMQ实战：在macOS上安装与前端访问全流程指南1.脚本概述这个脚本将涵盖以下
    • 马云谈未来暴利行业：高省APP，让你走在赚钱的最前端！ 高省APP
      随着科技的飞速发展，互联网经济的日益成熟，越来越多的人开始关注未来的赚钱行业。在众多行业中，电商导购平台因其独特的商业模式和广阔的市场前景，吸引了众多投资者的目光。其中，高省APP作为2021年推出的平台，以其0投资、0风险、高佣金的特点，成为了电商导购行业的一匹黑马。高省APP，是一个自用省钱佣金高，分享推广赚钱多的平台。运行三年以来，稳定可靠，吸引了百万终端用户。注册送2皇冠会员，送万元推广大
    • 2019-03-21 蜜思1013
      SPA:单页应用https://baike.baidu.com/item/SPA/175363131.场景（1）中后台管理系统（2）H5前端开发（3）跨端APP开发2.技术栈（1）SpringBootvue-cliIDEnpmElementUI（2）vue-cliSPA,npm,建议自己布局写样式（3）uni-app,Flutter,RN,cordova(调用底层API)3.IDE（1）WSVSc
    • Web前端 2301_78085386 前端
      网页开发学习内容:htmlcssJavaScript两个框架:VUE.jsElementUIUI->userinterface用户界面html(HyperTextMarkupLanguage):超文本标记语言文本:文字字符超文本:网页内容标记:标签标识例如商品上的标签,介绍了商品的信息html语言就是一种标记语言,提供许多的标签,不同的标签功能不同,网页就是通过这些标签描述出来的,最终通过浏览器解
    • Chapter 06 axios使用指南 Heaven645 vue.js前端Vueaxios
      欢迎大家订阅【Vue2+Vue3】入门到实践专栏，开启你的Vue学习之旅！文章目录前言一、导入二、发送GET请求三、发送POST请求四、处理响应前言在现代前端开发中，与后端API进行数据交互是至关重要的。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。本文详细介绍了Axios的基本用法。一、导入导入官网提供的axios在线地址：二、发送GET请求axios.get(
    • 前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放） 北城笑笑 JavaScriptVueJSjavascriptvue.js
      简述：在浏览器中请求RTSP视频流并进行播放时，直接使用原生的浏览器API是行不通的，因为它们不支持RTSP协议。为了解决这个问题，开发者通常会选择使用像flv.js这样的库，它专为在浏览器中播放FLV和其他流媒体格式设计。然而，flv.js本身并不直接支持RTSP，这意味着我们需要一个额外的步骤来桥接RTSP和flv.js。这里来记录一下详细介绍：在Vue中使用flv.js插件播放RTSP视频流
    • 前端vue播放m3u8、flv、mp4视频的方法_vue mp4(1) 2401_84437982 程序员前端vue.js音视频
      //this.db.src([//{//src:“https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8”,//地址//type:“application/x-mpegURL”,//告诉videojs,这
    • 【渗透测试】利用hook技术破解前端JS加解密 - JS-Forward Hello_Brian 渗透测试安全Hook技术前端JS加解密渗透测试web安全
      前言在做渗透测试项目时，尤其是金融方面，经常会遇到前端JS加解密技术，看着一堆堆密密麻麻的密文，会给人一种无力感。Hook技术则会帮助我们无需获取加解密密钥的前提下，获取明文进行渗透测试环境准备JS-ForwardBurpsuiteFiddler网上公开的加解密逻辑漏洞的靶场源码某大佬搭建的公网测试环境（请礼貌使用）：http://39.98.108.20:8085/Hook-JS技术详解正常访问
    • 前端数据库——WebSQL和IndexedDB 凡凡的小web
      一、WebSQLWebSQL是前端的一个独立模块，是web存储方式的一种，我们调试的时候会经常看到，只是一般很少使用。并且，当前只有谷歌支持，ie和火狐均不支持。image我们对数据库的一般概念是后端才会跟数据库打交道，进行一些业务性的增删改查。而这里的数据库也不同于真正意义上的数据库。废话少说，先出招吧：主要方法：openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对
    • WebGL入门（019）：WebGLSync 简介、使用方法、示例代码 还是大剑师兰特 #webGL开发教程webgl大剑师
      还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。No.内容链接1Openlayers【入门教程】-【源代码+示例300+】2Leaflet【入门教
    • 【学习笔记】用Mac自学虚幻4 左上方的天空&roc 虚幻4学习笔记ue4macos
      文章目录前言学习过程总结前言首先，我是大学自学的前端，之后实习做的是前端是Webgl可视化工作，从实习到转正再到离职大概一年时间，辞职以后我考虑了目前比较火的UE引擎，于是重新学习了一遍C++和数据结构后，开始自学UE。由于本人手里只有一台MacBookAir，本次学习全程用Mac来运行。提示：建议学习UE的新人去学一遍C++，并且了解一下STL源码，以及底层的数据结构。一、安装UE4进入UE官网
    • nginx部署前端vue项目完整详细讲解 程序员小羊！ 运维前端nginxvue.js
      大家好，我是程序员小羊！前言：在使用Nginx部署前端Vue项目时，确保项目的生产环境版本已经打包，并且Nginx已经安装并配置在服务器上。以下是详细的步骤，包括打包Vue项目、配置Nginx、部署和测试项目。1.打包Vue项目首先，你需要将Vue项目编译为生产环境版本。可以通过VueCLI完成这一步。1.1安装依赖确保已经安装了Node.js和npm。然后在项目根目录下运行以下命令安装依赖：np
    • 基于SpringBoot的流浪猫狗救援网站 超级无敌暴龙战士塔塔开 Java课设与毕设资源java
      文章目录项目介绍主要功能截图：部分代码展示设计总结项目获取方式作者主页：超级无敌暴龙战士塔塔开简介：Java领域优质创作者、简历模板、学习资料、面试题库【关注我，都给你】文末获取源码联系项目介绍基于SpringBoot的流浪猫狗救援网站,java项目。eclipse和idea都能打开运行。推荐环境配置：eclipse/ideajdk1.8mavenmysql前端技术：vue，Ajax，Json后端
    • React-Router 安装及使用 书生丶
      安装[email protected]引入核心路由器组件import{BrowserRouter,HashRouter}from'react-router-dom'BrowserRouter:localhost:xxxx/user/liuna服务器可知所有请求细节HashRouter:localhost:xxxx/#/user/liuna使用#瞄点纯前端跳转,服务器不知
    • 是什么让尤大选择放弃Webpack？面向未来的前端构建工具 Vite 码民的飘柔 前端vue前端vue.jswebpack面试Vite
      写在开头前两天在知乎看到过一篇文章，大致意思是讲：字节跳动已经开始“弃用Webpack”，尝试在自研构建工具中使用类似Vite的ESmodule构建方式。引起下方一大片焦虑：Webpack是不是要被取代了？现在学Vite就行了吧Webpack还没学会，就又来新的了！甚至有人搬出了去年尤大所发的一个动态：再也回不去Webpack了。PS：最近的vite比较火，而且发布了2.0版本，vue的作者尤雨溪
    • 关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析 F-125 webpackvue.jsreact.jswebpack
      webpack、webpack-cli的打包关于webpack对前端工程中进行资源文件进行打包处理的过程中，运用到的核心插件主要是webpack和webpack-cli，在react和vue对于打包各自工程中的cli则是进行了自定义的构建，专门用于项目打包的cli。可简单的进行自定义运行webpack的编译运行文件。例如：通过webpack-cli运用webpack进行文件资源打包压缩处理，执行s
    • 2024React前端面试题 司宁 前端面试题前端
      1.Diff算法Diff算法比较过程第一步：patch函数中对新老节点进行比较如果新节点不存在就销毁老节点如果老节点不存在，直接创建新的节点当两个节点是相同节点的时候，进入patctVnode的过程，比较两个节点的内部第二步：patchVnode函数比较两个虚拟节点内部如果两个虚拟节点完全相同，返回当前vnode的children不是textNode，再分成三种情况-有新children，没有旧c
    • Vue3 + Axios双Token刷新解决方案 洛*璃 vue.js前端javascriptAxios双token刷新
      在现代前端开发中，使用API进行数据交互时，我们常常会遇到身份认证的问题。为了提高安全性，许多应用采用了Token机制，如JWT（JSONWebToken）来管理用户的身份状态。本文将介绍如何在Vue3项目中使用Axios实现双Token刷新机制，确保用户体验流畅的同时提高安全性。前置条件本文只针对Vue3前端所编写的双Token刷新解决方案，关于SpringCloud微服务项目的双Token刷新
    • 【前端面试题】前端工程化、Webpack、Vite、Git项目管理相关问题 快乐点吧 前端webpackgit
      目录关于前端工程化关于Webpack关于Vite关于Git项目管理综合性问题关于前端工程化1.前端工程化的定义和好处问题：什么是前端工程化？它的主要好处是什么？答案：前端工程化是指在前端开发中应用系统化、自动化和标准化的方法，包括模块化、组件化、自动化构建、测试等，以提高开发效率和代码质量。主要好处包括提升开发效率、增强代码可维护性、提高代码质量和团队协作效率。2.前端项目的目录结构问题：你通常如
    • jsonp 常用util方法 hw1287789687 jsonpjsonp常用方法jsonp callback
      jsonp 常用java方法 (1)以jsonp的形式返回:函数名(json字符串) /*** * 用于jsonp调用 * @param map : 用于构造json数据 * @param callback : 回调的javascript方法名 * @param filters : <code>SimpleBeanPropertyFilter theFilt
    • 多线程场景 alafqq 多线程
      0 能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0 对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？ Java多线程 2012年11月23日 15:41 Young9007 Young9007 4 0 0 4 Comment添加评论关注(2) 3个答案 按时间排序 按投票排序 0 0 最典型的如： 1、
    • Maven学习——修改Maven的本地仓库路径 Kai_Ge maven
            安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。    
    • placeholder的浏览器兼容 120153216 placeholder
      【前言】 自从html5引入placeholder后，问题就来了， 不支持html5的浏览器也先有这样的效果， 各种兼容，之前考虑，今天测试人员逮住不放， 想了个解决办法，看样子还行，记录一下。   【原理】 不使用placeholder，而是模拟placeholder的效果， 大概就是用focus和focusout效果。   【代码】 <scrip
    • debian_用iso文件创建本地apt源 2002wmj Debian
      1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下 2.创建N个挂载点目录 如下： debian:~#mkdir –r /media/dvd1 debian:~#mkdir –r /media/dvd2 debian:~#mkdir –r /media/dvd3 …. debian:~#mkdir –r /media
    • SQLSERVER耗时最长的SQL 357029540 SQL Server
      对于DBA来说，经常要知道存储过程的某些信息： 1.   执行了多少次 2.   执行的执行计划如何 3.   执行的平均读写如何 4.   执行平均需要多少时间 列名          &
    • com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 7454103 eclipse
      今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下： 错误提示信息： An error has occurred.See error log for more details. Reason: com/genuitec/
    • 用正则删除文本中的html标签 adminjun javahtml正则表达式去掉html标签
      使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。 如下： public static String Html2Text(String inputString) { String htmlStr = inputString; // 含html标签的字符串 String textSt
    • 嵌入式系统设计中常用总线和接口 aijuans linux 基础
                     嵌入式系统设计中常用总线和接口         任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线
    • Java函数调用方式——按值传递 ayaoxinchao java按值传递对象基础数据类型
      Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。   首先，让我们看一看基础数据类型是如何按值传递的。   public static void main(String[] args) { int a = 2;
    • ios音量线性下降 bewithme ios音量
      直接上代码吧   //second 几秒内下降为0 - (void)reduceVolume:(int)second { KGVoicePlayer *player = [KGVoicePlayer defaultPlayer]; if (!_flag) { _tempVolume = player.volume;
    • 与其怨它不如爱它 bijian1013 选择理想职业规划
              抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。         一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。  
    • 一边时间不够用一边浪费时间 bingyingao 工作时间浪费
      一方面感觉时间严重不够用，另一方面又在不停的浪费时间。 每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。 精神还是很差，下午像一直野鬼在城市里晃荡。 为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。 控制让自己周末早睡早起，你就成功了一半。 有多少个工作
    • 【Scala八】Scala核心二：隐式转换 bit1129 scala
      Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con
    • sudoku slover in Haskell (2) bookjovi haskellsudoku
      继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。   board = [0,3,4,1,7,0,5,0,0, 0,6,0,0,0,8,3,0,1, 7,0,0,3,0,0,0,0,6, 5,0,0,6,4,0,8,0,7,
    • Java-Collections Framework学习与总结-HashSet和LinkedHashSet BrokenDreams linkedhashset
              本篇总结一下两个常用的集合类HashSet和LinkedHashSet。         它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序
    • 读《研磨设计模式》-代码笔记-备忘录模式-Memento bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; /* * 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”
    • 《RAW格式照片处理专业技法》笔记 cherishLC PS
      注意，这不是教程！仅记录楼主之前不太了解的 一、色彩（空间）管理 作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼） 注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv
    • 使用 Git 下载 Spring 源码 编译 for Eclipse crabdave eclipse
      使用 Git 下载 Spring 源码 编译 for Eclipse   1、安装gradle，下载 http://www.gradle.org/downloads 配置环境变量GRADLE_HOME，配置PATH  %GRADLE_HOME%/bin，cmd，gradle -v   2、spring4 用jdk8 下载 https://jdk8.java.
    • mysql连接拒绝问题 daizj mysql登录权限
      mysql中在其它机器连接mysql服务器时报错问题汇总 一、[running][email protected]:~$mysql -uroot -h 192.168.9.108 -p   //带-p参数，在下一步进行密码输入 Enter password:    //无字符串输入 ERROR 1045 (28000): Access
    • Google Chrome 为何打压 H.264 dsjt applehtml5chromeGoogle
      Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。 Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome
    • yii 获取控制器名 和方法名 dcj3sjt126com yiiframework
      1. 获取控制器名 在控制器中获取控制器名:  $name = $this->getId(); 在视图中获取控制器名:    $name = Yii::app()->controller->id;    2. 获取动作名  在控制器beforeAction()回调函数中获取动作名:  $name =
    • Android知识总结（二） come_for_dream android
      明天要考试了，速速总结如下   1、Activity的启动模式        standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。）        singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac
    • 高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元 gcq511120594 工作项目管理
      高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！ 首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕
    • linux expect heipark expect
      1. 创建、编辑文件go.sh   #!/usr/bin/expect spawn sudo su admin expect "*password*" { send "13456\r\n" } interact    2. 设置权限   chmod u+x go.sh  3.
    • Spring4.1新特性——静态资源处理增强 jinnianshilongnian spring 4.1
      目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
    • idea ubuntuxia 乱码 liyonghui160com
        1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个 字体文件。 2.在ubuntu 下可以执行下面操作安装该字体： sudo mkdir /usr/share/fonts/truetype/simsun sudo cp simsun.ttf /usr/share/fonts/truetype/simsun fc-cache -f -v
    • 改良程序的11技巧 pda158 技巧
      有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。   让我们看一些基本的编程技巧：   尽量保持方法简短 永远永远不要把同一个变量用于多个不同的
    • 300个涵盖IT各方面的免费资源（下）——工作与学习篇 shoothao 创业免费资源学习课程远程工作
      工作与生产效率:   A. 背景声音 Noisli:背景噪音与颜色生成器。 Noizio:环境声均衡器。 Defonic:世界上任何的声响都可混合成美丽的旋律。 Designers.mx:设计者为设计者所准备的播放列表。 Coffitivity:这里的声音就像咖啡馆里放的一样。 B. 避免注意力分散 Self Co
    • 深入浅出RPC uule rpc
      深入浅出RPC-浅出篇 深入浅出RPC-深入篇   RPC Remote Procedure Call Protocol 远程过程调用协议   它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他