努力的小朱同学
努力的小朱同学

前端实现文件上传（点击+拖拽）

一、简介

之前在Vue项目中使用过element的上传组件，实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传，说干就干。
首先是点击获取上传文件自然没的说，只需要借助input标签即可，但原生的点击上传按钮，实在是过于简陋，所以我的想法是通过一个div，模拟成上传按钮，然后监听其点击事件，通过input.click()去模拟点击真正的上传元素。
然后是拖拽获取上传文件，这个稍有难度，我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取，但是由于是html5新增的，所以可能在某些低版本IE浏览器不兼容，所以如果要在实际企业级项目中使用,需要注意一下兼容性问题（IE该死!）。

最后当我们获取到上传文件之后，我们就可以借助formDate对象以及ajax工具（原生、jquery、axios等）进行文件上传了,而且我们还可以通过xhr.upload.onprogress获取文件上传的进度在页面中进行展示。

二、获取文件

1、页面效果

前端实现文件上传（点击+拖拽）_第1张图片

2、点击和拖拽上传获取的文件结果

前端实现文件上传（点击+拖拽）_第2张图片

3、具体代码

  <style>
    .box {
      width: 300px;
      height: 300px;
      margin: 50px auto;
      padding-top: 30px;
      background-color: #f5f5f5;
      border-radius: 10px;
    }
    .btn {
      width: 200px;
      height: 30px;
      line-height: 30px;
      margin: 10px auto;
      text-align: center;
      color: #5098F8;
      border-radius: 4px;
      border: 1px dashed #5098F8;
      cursor: pointer;
    }
  style>
  
<body>
  
<div class="box" id="drop">
  
  <div class="btn" id="btn">点击上传按钮div>
  
  <input type="file" id="file-btn" onchange="selectFile(event)" accept=".doc,.docx" style="display: none;">
div>

<script>
  var file = null // 要进行上传的文件
  // 给上传按钮绑定点击事件
  document.querySelector('#btn').onclick = function() {
    // 模拟点击上传的input 弹出文件选择框
    document.querySelector('#file-btn').click()
  }
  // 获取点击上传  选择的文件
  function selectFile(e) {
    // 通过 e.target.files 获取到选择的文件 此处默认选择一个文件
    console.log('获取点击上传的文件---',e.dataTransfer.files[0]);
    // 第二次验证选择的文件类型是否正确
    if(e.target.files[0].type == 'application/msword' || e.target.files[0].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
      file = e.target.files[0]
    } else {
      alert('请选择正确的文件类型')
    }
  }

  // 拖拽上传获取对应文件
  let dropBox=document.querySelector('#drop');
      // 当文件在目标元素内移动时
      dropBox.addEventListener('dragover',function(e){
        // 阻止事件冒泡
        e.stopPropagation();
        // 阻止默认事件（与drop事件结合，阻止拖拽文件在浏览器打开的默认行为）
        e.preventDefault();
      })
      // 当拖拽文件在目标元素内松开时
      dropBox.addEventListener('drop',function(e){
        // 阻止事件冒泡
        e.stopPropagation();
        // 阻止默认事件（与dragover事件结合，阻止拖拽文件在浏览器打开的默认行为）
        e.preventDefault();
        // 获取拖拽上传的文件（files是个数组 此处默认限制只能上传一个）
        console.log('获取拖拽上传的文件---',e.dataTransfer.files[0]);
        // 第二次验证选择的文件类型是否正确
        if(e.dataTransfer.files[0].type == 'application/msword' || e.dataTransfer.files[0].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
          file = e.dataTransfer.files[0]
        } else {
          alert('请选择正确的文件类型')
        }
      })
script>
body>
注：用户手动放开限制操作（此处以mac电脑为例，windows电脑也相差不多），只需下面三步：

前端实现文件上传（点击+拖拽）_第3张图片

三、进行上传

我们需要借助formDate对象以及ajax工具（原生、jquery、axios等）进行文件上传，而且我们还可以通过xhr.upload.onprogress获取文件上传的进度在页面中进行展示，不过我们通过xhr.upload.onprogress获取的仅仅是文件上传到服务器的进度，并不包括服务器进行处理以及基于前端响应的这部分时间，所以会当前端文件上传到100%后，会停滞一段时间才能获得服务端的响应。
此处列举两种方式：原生ajax和axios。

1、原生ajax

	  // 上传函数
      function uplaod() {
        // 创建 FormData 对象
        var formData = new FormData();
        // 将获得文件对象追加到 FormData 对象中
        formData.append('file',file)
        // 创建 xhr 对象
        var xhr = new XMLHttpRequest()
        // 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
        xhr.open('POST', 'www.baidi.com')
        // 发起请求
        xhr.send(fd)
        // 监听 xhr.upload 的 onprogress 事件 获取上传进度
        xhr.upload.onprogress = function(e) {
            // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
            if (e.lengthComputable) {
            	// Math.round() 进行四舍五入取整 因为上传时 网络等不确定因素可能会出现缺失小部分字节的情况 
                // e.loaded 已传输的字节
                // e.total 需传输的总字节
                var progress = Math.round((e.loaded / e.total) * 100) + '%'
            }
        }
        // 是否上传成功
        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText)
            if (data.status === 200) {
              console.log('上传文件成功');
            }
          }
        }

2、axios（vue）

      // 上传函数(vue中)
      async uplaod() {
        // 创建 FormData 对象
        var formData = new FormData();
        // 将获得文件对象追加到 FormData 对象中
        formData.append('file',file)
        try {
	        // 暂存this对象
	        const that = this
	        // 调用接口开始上传
	        await this.$axios.post(api.addfiles, formData, {
	          // 实时获取上传进度
	          onUploadProgress (progressEvent) {
	          	// Math.round() 进行四舍五入取整 因为上传时 网络等不确定因素可能会出现缺失小部分字节的情况 
	            // loaded 已传输的字节
	            // total 需传输的总字节
	            that.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%'
	        }
	        console.log('上传成功')
	     } catch(error) {
		 	console.log('上传失败',error)
		 }

你可能感兴趣的:(前端基础,前端,javascript,vue.js)

  • JavaScript 运算符详解 一蓑烟雨.. javascript笔记javascriptjs
    JavaScript（3）运算符详解1.算数运算符//当对非Number类型的值进行运算时，会将其转换为Number类型//任何值和NaN做运算都为NaN//对字符串做加法，结果返回字符串//任何值和字符串做加法运算，都会先转化为字符串再计算vara=123+223;vara=true+1;vara='123'+'456';vara='123'+456;//转化成字符串vara=123+'';//
  • Vue.js 的组合式 API 与状态管理
    随着现代前端开发的不断发展，Vue.js作为一个渐进式JavaScript框架，已经成为开发动态和交互式用户界面的流行选择之一。Vue.js的设计旨在通过简洁的语法和强大的功能来提升开发者的生产力。在Vue3中引入的组合式API（CompositionAPI）及其状态管理功能，为开发者提供了一种灵活且可扩展的方式来构建复杂的应用程序。本文将深入探讨Vue.js的组合式API，并结合状态管理的概念，
  • 深入理解检查约束：确保数据质量的重要工具
    title:深入理解检查约束：确保数据质量的重要工具date:2025/1/20updated:2025/1/20author:cmdragonexcerpt:在数据库管理中，检查约束是一种重要的约束类型，用于确保表中某一列或某些列的数据符合特定条件，从而维护数据的有效性和一致性。检查约束通过对数据的有效性进行验证，防止无效或不合逻辑的数据进入数据库。categories:前端开发tags:检查约
  • ofa.js：无需打包的MVVM框架，前端开发的轻量之选 前端
    近年来，前端开发领域涌现了许多优秀的框架，如React、Vue和Angular，它们极大地提升了开发效率和代码可维护性。然而，随着项目复杂度的增加，这些框架的学习曲线和构建工具链的复杂性也让许多开发者感到头疼。在这样的背景下，ofa.js应运而生，它号称“无需打包的MVVM框架”，试图为前端开发带来一种全新的体验。那么，ofa.js究竟有何独特之处？它与其他MVVM框架相比又有哪些优势？本文将为你
  • AI生成前端页面：解放前端开发，拥抱AI时代的高效 前端
    在数字时代，效率是企业和个人的核心竞争力。而对于前端开发人员来说，重复性工作和繁琐的代码编写常常成为效率提升的瓶颈。幸运的是，随着人工智能技术的飞速发展，一个新的时代已经到来——AI代码生成器（例如ScriptEcho）的出现，正以前所未有的方式改变着前端开发的格局。本文将探讨人工智能在日常应用中的广泛影响，并着重介绍如何利用AI技术，例如ScriptEcho，来提升前端开发效率，从而更好地应对当
  • React 19新特性探索：提升性能与开发者体验 程序员
    React作为最受欢迎的JavaScript库之一，不断推出新版本以应对日益复杂的应用需求。React19作为最新的版本，引入了一系列令人兴奋的新特性和改进，旨在进一步提升应用的性能、开发效率和用户体验。本文将深入探讨React19的新特性，包括异步操作管理、文档元数据和样式表支持、ServerComponents与服务器端渲染等，帮助开发者更好地理解和利用这些新特性来构建更强大、更高效的Reac
  • 如何一步步形成“代码屎山”——前端开发中的痛点与反思 前端
    引言在一个大型项目中，随着功能不断扩展、需求不断变化、人员不断更替，代码的质量和可维护性可能会逐渐恶化，最终演变成所谓的“代码屎山”。你一定对代码屎山的形成和后果有深刻的体会。那么，究竟是什么原因导致了代码屎山的形成？如何在开发过程中避免掉进这一陷阱？本文将从多个角度剖析这一问题，并提出一些解决方案，希望能帮助大家减少开发中的痛苦，提升代码质量。第一章：什么是“代码屎山”？在正式探讨代码屎山的形成
  • Vue项目打包部署与路由配置深度解析 程序员
    在Vue.js项目的开发和部署过程中，配置打包路径和路由模式是两个至关重要的环节。下面，我们将详细探讨如何根据需求将Vue项目打包部署到域名的根路径或二级路径，并深入解析hash路由与history路由的配置方法。一、Vue项目打包部署1.配置vue.config.jsvue.config.js是VueCLI项目的配置文件，用于定制项目构建过程中的各种选项。其中，publicPath属性决定了打包
  • 未来前端发展方向：深度探索与技术前瞻 前端
    未来前端发展方向：深度探索与技术前瞻在数字化浪潮席卷全球的今天，前端开发作为连接用户与数字世界的桥梁，其重要性不言而喻。随着技术的不断进步和市场的不断变化，前端开发领域正经历着前所未有的变革。今天，我们将深入探讨未来前端发展的几个关键方向，为前端开发者们提供有价值的参考。一、性能优化与用户体验性能优化一直是前端开发的核心议题之一。在未来，随着用户对于应用响应速度和流畅性的要求越来越高，性能优化将变
  • 小明，谈谈你对Vue 虚拟dom的理解 程序员
    Vue.js的虚拟DOM（VirtualDOM）是为了提高前端性能和开发体验而引入的一种技术。Vue.js虚拟DOM的大致实现虚拟DOM的定义虚拟DOM是一种JavaScript对象，它用来描述用户界面（UI）的结构和内容。每个虚拟DOM节点（VNode）代表一个真实的DOM元素或组件实例。//VNode示例constvnode={tag:'div',data:{id:'app'},childre
  • Vue.js 的组合式 API 与状态管理
    随着现代前端开发的不断发展，Vue.js作为一个渐进式JavaScript框架，已经成为开发动态和交互式用户界面的流行选择之一。Vue.js的设计旨在通过简洁的语法和强大的功能来提升开发者的生产力。在Vue3中引入的组合式API（CompositionAPI）及其状态管理功能，为开发者提供了一种灵活且可扩展的方式来构建复杂的应用程序。本文将深入探讨Vue.js的组合式API，并结合状态管理的概念，
  • JavaScript 运算符详解：各类运算符及优先级。 前端基地 javascript运算符优先级算数运算符逻辑运算符一元运算符比较运算符赋值运算符
    目录非VIP用户可前往公众号“前端基地”进行免费阅读运算符介绍运算符优先级算数运算符赋值运算符比较运算符逻辑运算符介绍a&&b和a||b一元运算符非VIP用户可前往公众号“前端基地”进行免费阅读运算符介绍以下是各类运算符的详细介绍：运算符描述算术运算符加(+)、减(-)、乘(*)、除(/)、求余数并保留整数(%)、累加(++)、递减(--)赋值运算符=、+=(num+=5等同于num=num+5)
  • 你不知道的javascript-13(var的接替者let与const) 我爱学习_zwj 你不知道的javascriptjavascript前端开发语言面试
    1.let与const的基本使用在ES5中我们声明变量都是使用的var(variable)关键字，从ES6开始新增了两个关键字可以声明变量：let、constlet、const在其他编程语言中都是有的，所以也并不是新鲜的关键字但是let、const确确实实给JavaScript带来一些不一样的东西从使用角度来说，只是在原有基础上换一个名字而已，使用的位置和方式是一样的varname='zs'let
  • Windows 窗口置顶工具推荐 如何始终置顶窗口 窗口前置 窗口固定 窗口钉在桌面 始终保持在其他窗口前端 在其他窗口之上 PowerToys MouseInc 七星关雎 Windows疑难杂症Windowswindows开源软件
    工具一：微软PowerToysReleases·microsoft/PowerToys·GitHubWindowssystemutilitiestomaximizeproductivity.Contributetomicrosoft/PowerToysdevelopmentbycreatinganaccountonGitHub.https://github.com/microsoft/PowerT
  • JavaScript的那些不可不知的知识 遇见~未来 JavaScriptjavascript开发语言ecmascript
    目录JavaScript基础JavaScript高级JavaScript基础数据类型：JavaScript的数据类型分为基本数据类型和引用数据类型。基本数据类型包含number（数字）、string（字符串）、boolean（布尔值）、null（空值）、undefined（未定义）。而像array（数组）、function（函数）等则属于引用数据类型。在内存存储方面，基本类型是按值存储在栈中，引用
  • 深度解析智能问答系统：如何打造精准、高效的AI对话架构？ 和老莫一起学AI 人工智能架构自然语言处理产品经理语言模型学习ai
    在人工智能的飞速发展中，智能问答系统（QA系统）逐渐成为了企业内部管理、客户服务、搜索引擎等多个领域中的关键技术。今天，我们将深入探讨一个基于大模型、自然语言处理、知识检索的智能问答系统的架构，详细介绍其技术原理、流程以及未来应用前景。一、系统整体概览在这个智能问答系统中，整个流程可以大致划分为两大部分：前端问答生成与后端离线数据处理。前端部分是用户交互的核心，通过用户的输入、关键词提取、检索和问
  • 《中型 Vue 项目：挑战与成长》 计算机毕设定制辅导-无忧学长 #Vuevue.jsflutter前端
    一、引言在当今的前端开发领域，Vue作为一款渐进式JavaScript框架，以其强大的功能和灵活性备受开发者青睐。对于中型Vue项目而言，其重要性不言而喻。中型Vue项目通常在功能复杂度和规模上介于小型项目和大型项目之间，既需要应对一定的业务需求挑战，又要考虑开发效率和可维护性。中型Vue项目面临着诸多挑战与机遇。挑战方面，随着项目规模的扩大，代码的复杂性增加，如何进行有效的状态管理、组件化开发以
  • npm介绍 小玉起起 vuejsnpm前端node.js
    npm（NodePackageManager）是Node.js的默认包管理工具，用于管理JavaScript和Node.js项目的依赖关系。它既是一个包管理工具，又是一个在线仓库，开发者可以通过它分享和下载开源的JavaScript库和工具。npm是世界上最大的开源软件注册表，托管着超过一百万个包。主要功能和特点1.包管理npm的核心功能是管理依赖包。它允许开发者方便地安装、更新和删除项目中的依赖
  • httpslocalhostindex 配置的nginx，一刷新就报404了 m0_74824112 nginx运维
    当你的Nginx配置导致页面刷新时报404错误时，通常是由于以下几个原因造成的：静态文件路径配置错误：Nginx没有正确地指向静态文件的目录。前端路由问题：如果是SPA（单页应用），刷新页面时Nginx没有正确地将请求重定向到入口文件（如index.html）。反向代理配置错误：如果Nginx作为反向代理，后端服务可能没有正确处理请求。检查和解决步骤1.检查静态文件路径配置确保Nginx配置文件中
  • 深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比 前端vue.jsreact
    在前端开发领域，React与Vue作为两款备受瞩目的框架，凭借独特的设计理念和技术架构，为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一，Vue则采用了别具一格的事件处理机制，二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析（一）事件创建与封装细节当DOM事件触发，React会第一时间在内部事件池中检索对应的合成事件实例。若未找到，便依据原生事件类型，像cl
  • 告别代码堆砌！AI生成前端页面，让开发效率飞升 前端
    在当今快节奏的数字世界中，前端开发效率至关重要。面对日益增长的市场需求和复杂的项目，开发者们常常面临着巨大的压力。而一款优秀的AI生成前端页面工具，无疑能成为提升效率的利器。本文将深入探讨谷歌Gemini的强大功能，并结合ScriptEcho——一款基于大模型AI技术的前端代码生成工具，展现如何将AI技术应用于前端开发，从而实现效率的显著提升。谷歌Gemini：AI赋能的未来谷歌Gemini的出现
  • 零售业的AI赋能与前端开发效率革命：ScriptEcho 的助力 前端
    零售业正经历着前所未有的数字化转型，但同时也面临着巨大的挑战。库存管理混乱、个性化客户体验不足等问题，严重制约着零售企业的盈利能力。而人工智能（AI）的兴起，为解决这些问题提供了新的思路。通过AI驱动的实时库存管理和客户行为分析，零售企业可以显著提升运营效率和客户满意度。然而，构建这些AI赋能的零售应用，需要强大的前端开发能力，这正是AI代码生成器ScriptEcho能够发挥关键作用的地方。AI赋
  • AI时代的前端开发：技能提升与职业发展之路 前端
    在瞬息万变的科技时代，个人职业发展的重要性日益凸显。提升技能，不断学习，已经不再是锦上添花，而是立足之本，是我们在竞争激烈的职场中脱颖而出的关键。而人工智能（AI）技术的快速发展，为我们提供了前所未有的机遇，特别是对于前端开发领域，AI正以前所未有的速度改变着我们的工作方式和学习方式。AI赋能前端开发：个性化学习路径前端开发领域的技术栈庞大而复杂，涵盖HTML、CSS、JavaScript、各种框
  • 出海工具集 web前端进阶者 前端
    群聊分享的一个工具集合，看了几个，感觉有点子用，收藏一波，下面有GitHub的地址；吃水不忘挖井人；GitHub地址分类目录导航Web开发框架或模板Chrome插件开发前端开发后端开发数据库管理对象关系映射（ORM）样式与UI框架原型设计认证与授权支付集成邮件服务网站分析在线客服和反馈服务部署与托管网站管理域名注册文档管理协议生成图标资源字体资源图片视频素材图片视频处理工具屏幕录制短链或长链信息渠
  • 【2023华为OD-C卷-第三题-跳马】100%通过率（JavaScript&Java&Python&C++） 塔子哥学算法 java华为odc语言
    本题已有网友报告代码100%通过率OJ&答疑服务购买任意专栏，即可私信博主，获取答疑/辅导服务题目描述马是象棋(包括中国象棋和国际象棋)中的棋子，走法是每步直一格再斜一格，即先横着或直着走一格，然后再斜着走一个对角线，可进可退，可越过河界，俗称马走“日”字。给定mmm行n
  • Arch - 架构安全性_验证（Verification） 小小工匠 【凤凰架构】架构验证Verification
    文章目录OverView导图1.引言：数据验证的重要性概述2.数据验证的基本概念3.数据验证的层次前端验证后端验证4.数据验证的标准做法5.自定义校验注解6.校验结果的处理7.性能考虑与副作用8.小结OverView即使只限定在“软件架构设计”这个语境下，系统安全仍然是一个很大的话题。接下来我们将对系统安全架构的各个方面进行详细分析，包括认证、授权、凭证、保密、传输安全和验证，结合案例实践，展示如
  • 如何利用 Dexie.js 管理前端状态或持久化复杂数据 maply Node.jsvue前端javascript状态模式Dexie.js前端状态管理前端状态持久化vue.js
    使用Dexie.js管理前端状态或持久化复杂数据Dexie.js是一个功能强大的IndexedDB封装库，不仅适用于简单的离线存储，还非常适合管理前端状态和持久化复杂数据。以下是如何利用Dexie.js管理前端状态或持久化复杂数据的详细介绍：1.Dexie.js管理前端状态的优势数据持久化：将应用状态存储在浏览器中，即使刷新页面或关闭浏览器，状态仍然存在。异步数据操作：支持异步读取和写入，提高性能
  • SpringBoot3使用Swagger3 m0_74825260 java
    SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp
  • 深入理解 JavaScript 引擎与消息队列的底层原理 D.eL javascript开发语言ecmascript
    深入理解JavaScript引擎与消息队列的底层原理JavaScript是现代Web开发中最为重要的编程语言之一，它的运行和执行方式常常是开发者关注的重点。为了更好地理解JavaScript的执行过程，我们需要深入探索JavaScript引擎的工作原理，尤其是事件循环（EventLoop）、消息队列（MessageQueue）以及它们如何协同工作来处理异步任务。在这篇文章中，我们将深入分析Java
  • JavaScript详解十三 ——节点操作 遇见~未来 JavaScriptJavaScript详解javascript开发语言ecmascript
    目录节点操作1、创建节点2、创建文本3、添加节点(先有父母才能生孩子)4、替换节点5、删除节点6、克隆节点7、创建节点另外几种方式（1）、element.innerHTML（2）、element.innerText（3）、document.write()（4）、insertAdjacentHTML()节点操作1、创建节点docment.createElement('节点')参数：标签名字符串这些元
  • 多线程编程之join()方法 周凡杨 javaJOIN多线程编程线程
    现实生活中，有些工作是需要团队中成员依次完成的，这就涉及到了一个顺序问题。现在有T1、T2、T3三个工人，如何保证T2在T1执行完后执行，T3在T2执行完后执行？问题分析：首先问题中有三个实体，T1、T2、T3， 因为是多线程编程，所以都要设计成线程类。关键是怎么保证线程能依次执行完呢？   Java实现过程如下： public class T1 implements Runnabl
  • java中switch的使用 bingyingao javaenumbreakcontinue
    java中的switch仅支持case条件仅支持int、enum两种类型。 用enum的时候，不能直接写下列形式。 switch (timeType) { case ProdtransTimeTypeEnum.DAILY: break; default: br
  • hive having count 不能去重 daizj hive去重having count计数
    hive在使用having count()是，不支持去重计数   hive (default)> select imei from t_test_phonenum where ds=20150701 group by imei having count(distinct phone_num)>1 limit 10;  FAILED: SemanticExcep
  • WebSphere对JSP的缓存 周凡杨 WAS JSP 缓存
          对于线网上的工程，更新JSP到WebSphere后，有时会出现修改的jsp没有起作用，特别是改变了某jsp的样式后，在页面中没看到效果，这主要就是由于websphere中缓存的缘故，这就要清除WebSphere中jsp缓存。要清除WebSphere中JSP的缓存，就要找到WAS安装后的根目录。        现服务
  • 设计模式总结 朱辉辉33 java设计模式
    1.工厂模式   1.1 工厂方法模式 (由一个工厂类管理构造方法)      1.1.1普通工厂模式(一个工厂类中只有一个方法)      1.1.2多工厂模式(一个工厂类中有多个方法)      1.1.3静态工厂模式(将工厂类中的方法变成静态方法) &n
  • 实例：供应商管理报表需求调研报告 老A不折腾 finereport报表系统报表软件信息化选型
    引言 随着企业集团的生产规模扩张，为支撑全球供应链管理，对于供应商的管理和采购过程的监控已经不局限于简单的交付以及价格的管理，目前采购及供应商管理各个环节的操作分别在不同的系统下进行，而各个数据源都独立存在，无法提供统一的数据支持；因此，为了实现对于数据分析以提供采购决策，建立报表体系成为必须。 业务目标 1、通过报表为采购决策提供数据分析与支撑 2、对供应商进行综合评估以及管理，合理管理和
  • mysql 林鹤霄
    转载源：http://blog.sina.com.cn/s/blog_4f925fc30100rx5l.html mysql -uroot -p ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)   [root@centos var]# service mysql
  • Linux下多线程堆栈查看工具(pstree、ps、pstack) aigo linux
    原文：http://blog.csdn.net/yfkiss/article/details/6729364   1. pstree pstree以树结构显示进程$ pstree -p work | grep adsshd(22669)---bash(22670)---ad_preprocess(4551)-+-{ad_preprocess}(4552)  &n
  • html input与textarea 值改变事件 alxw4616 JavaScript
    // 文本输入框(input) 文本域(textarea)值改变事件 // onpropertychange(IE) oninput(w3c) $('input,textarea').on('propertychange input', function(event) {      console.log($(this).val()) });  
  • String类的基本用法 百合不是茶 String
      字符串的用法;     // 根据字节数组创建字符串 byte[] by = { 'a', 'b', 'c', 'd' }; String newByteString = new String(by);         1,length()  获取字符串的长度     &nbs
  • JDK1.5 Semaphore实例 bijian1013 javathreadjava多线程Semaphore
    Semaphore类        一个计数信号量。从概念上讲，信号量维护了一个许可集合。如有必要，在许可可用前会阻塞每一个 acquire()，然后再获取该许可。每个 release() 添加一个许可，从而可能释放一个正在阻塞的获取者。但是，不使用实际的许可对象，Semaphore 只对可用许可的号码进行计数，并采取相应的行动。 S
  • 使用GZip来压缩传输量 bijian1013 javaGZip
            启动GZip压缩要用到一个开源的Filter：PJL Compressing Filter。这个Filter自1.5.0开始该工程开始构建于JDK5.0，因此在JDK1.4环境下只能使用1.4.6。         PJL Compressi
  • 【Java范型三】Java范型详解之范型类型通配符 bit1129 java
        定义如下一个简单的范型类，   package com.tom.lang.generics; public class Generics<T> { private T value; public Generics(T value) { this.value = value; } }
  • 【Hadoop十二】HDFS常用命令 bit1129 hadoop
    1. 修改日志文件查看器   hdfs oev -i edits_0000000000000000081-0000000000000000089 -o edits.xml cat edits.xml   修改日志文件转储为xml格式的edits.xml文件，其中每条RECORD就是一个操作事务日志   2. fsimage查看HDFS中的块信息等 &nb
  • 怎样区别nginx中rewrite时break和last ronin47
    在使用nginx配置rewrite中经常会遇到有的地方用last并不能工作，换成break就可以，其中的原理是对于根目录的理解有所区别，按我的测试结果大致是这样的。 location /    {         proxy_pass http://test; 
  • java-21.中兴面试题 输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等于 m bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; public class CombinationToSum { /* 第21 题 2010 年中兴面试题 编程求解： 输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等
  • eclipse svn 帐号密码修改问题 开窍的石头 eclipseSVNsvn帐号密码修改
    问题描述：      Eclipse的SVN插件Subclipse做得很好，在svn操作方面提供了很强大丰富的功能。但到目前为止，该插件对svn用户的概念极为淡薄，不但不能方便地切换用户，而且一旦用户的帐号、密码保存之后，就无法再变更了。 解决思路：      删除subclipse记录的帐号、密码信息，重新输入
  • [电子商务]传统商务活动与互联网的结合 comsci 电子商务
          某一个传统名牌产品，过去销售的地点就在某些特定的地区和阶层，现在进入互联网之后，用户的数量群突然扩大了无数倍，但是，这种产品潜在的劣势也被放大了无数倍，这种销售利润与经营风险同步放大的效应，在最近几年将会频繁出现。。。。        如何避免销售量和利润率增加的
  • java 解析 properties-使用 Properties-可以指定配置文件路径 cuityang javaproperties
    #mq xdr.mq.url=tcp://192.168.100.15:61618; import java.io.IOException; import java.util.Properties; public class Test { String conf = "log4j.properties"; private static final
  • Java核心问题集锦 darrenzhu java基础核心难点
    注意，这里的参考文章基本来自Effective Java和jdk源码 1)ConcurrentModificationException 当你用for each遍历一个list时，如果你在循环主体代码中修改list中的元素，将会得到这个Exception，解决的办法是： 1)用listIterator, 它支持在遍历的过程中修改元素， 2)不用listIterator, new一个
  • 1分钟学会Markdown语法 dcj3sjt126com markdown
    markdown 简明语法 基本符号 *,-,+ 3个符号效果都一样，这3个符号被称为 Markdown符号 空白行表示另起一个段落 `是表示inline代码，tab是用来标记 代码段，分别对应html的code，pre标签 换行 单一段落( <p>) 用一个空白行 连续两个空格 会变成一个 <br> 连续3个符号，然后是空行
  • Gson使用二（GsonBuilder） eksliang jsongsonGsonBuilder
    转载请出自出处：http://eksliang.iteye.com/blog/2175473 一.概述     GsonBuilder用来定制java跟json之间的转换格式   二.基本使用 实体测试类： 温馨提示：默认情况下@Expose注解是不起作用的,除非你用GsonBuilder创建Gson的时候调用了GsonBuilder.excludeField
  • 报ClassNotFoundException: Didn't find class "...Activity" on path: DexPathList gundumw100 android
    有一个工程，本来运行是正常的，我想把它移植到另一台PC上，结果报： java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.mobovip.bgr/com.mobovip.bgr.MainActivity}: java.lang.ClassNotFoundException: Didn't f
  • JavaWeb之JSP指令 ihuning javaweb
      要点   JSP指令简介  page指令  include指令    JSP指令简介    JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出，而只是告诉引擎如何处理JSP页面中的其余部分。 JSP指令的基本语法格式： <%@ 指令 属性名="
  • mac上编译FFmpeg跑ios 啸笑天 ffmpeg
    1、下载文件：https://github.com/libav/gas-preprocessor， 复制gas-preprocessor.pl到/usr/local/bin/下， 修改文件权限：chmod 777 /usr/local/bin/gas-preprocessor.pl 2、安装yasm-1.2.0 curl http://www.tortall.net/projects/yasm
  • sql mysql oracle中字符串连接 macroli oraclesqlmysqlSQL Server
    有的时候，我们有需要将由不同栏位获得的资料串连在一起。每一种资料库都有提供方法来达到这个目的： MySQL: CONCAT() Oracle: CONCAT(), || SQL Server: + CONCAT() 的语法如下： Mysql 中 CONCAT(字串1, 字串2, 字串3, ...): 将字串1、字串2、字串3，等字串连在一起。 请注意，Oracle的CON
  • Git fatal: unab SSL certificate problem: unable to get local issuer ce rtificate qiaolevip 学习永无止境每天进步一点点git纵观千象
    // 报错如下： $ git pull origin master fatal: unable to access 'https://git.xxx.com/': SSL certificate problem: unable to get local issuer ce rtificate   // 原因： 由于git最新版默认使用ssl安全验证，但是我们是使用的git未设
  • windows命令行设置wifi surfingll windowswifi笔记本wifi
    还没有讨厌无线wifi的无尽广告么，还在耐心等待它慢慢启动么 教你命令行设置 笔记本电脑wifi： 1、开启wifi命令 netsh wlan set hostednetwork mode=allow ssid=surf8 key=bb123456 netsh wlan start hostednetwork pause 其中pause是等待输入，可以去掉 2、
  • Linux（Ubuntu）下安装sysv-rc-conf wmlJava linuxubuntusysv-rc-conf
    安装：sudo apt-get install sysv-rc-conf 使用：sudo sysv-rc-conf 操作界面十分简洁，你可以用鼠标点击，也可以用键盘方向键定位，用空格键选择，用Ctrl+N翻下一页，用Ctrl+P翻上一页，用Q退出。     背景知识 sysv-rc-conf是一个强大的服务管理程序，群众的意见是sysv-rc-conf比chkconf
  • svn切换环境，重发布应用多了javaee标签前缀 zengshaotao javaee
    更换了开发环境，从杭州，改变到了上海。svn的地址肯定要切换的，切换之前需要将原svn自带的.svn文件信息删除，可手动删除，也可通过废弃原来的svn位置提示删除.svn时删除。   然后就是按照最新的svn地址和规范建立相关的目录信息，再将原来的纯代码信息上传到新的环境。然后再重新检出，这样每次修改后就可以看到哪些文件被修改过，这对于增量发布的规范特别有用。   检出
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他