PS篇-批量压缩图片
●  ●
     在工作中，我们经常需要把整理好的文档和图片进行上传，但是往往需要上传的系统对于上传的文件大小是有要求的，文件大小超过限定大小会造成上传失败，那这个问题怎么解决呢？
其实之前我们已经介绍过一个方法了，那就是运用PDF网页工具来进行压缩。操作步骤很简单，上传文件，点击压缩就可以完成，之前介绍过的这两个工具还可以设置一些文件压缩的简单参数。没有关注之前文章的朋友可以点击左下角的键盘，输入“PDF工具的介绍”来获取相关信息和资料。
●●●  ●●●
     如果需要压缩的文件很多怎么办？今天我们就来介绍一个全新的方法。
     PS中有一个很智能的自动化处理工具，叫做批处理。那批处理处理的什么呢？实际上批处理是基于用户本身创建的“动作”。之所以能运用这两个工具来实现批量压缩文件还有一个重要的原因，就是PS在运行“存储为”命令时会弹出一个算是“参数设置对话框”的设置界面。在这个界面你可以对保存文件的质量参数进行设置，你想要文件清晰，就选择“最佳”或者“高”；如果对文件的质量要求不高，且对文件的大小有要求，可以设置“低”或者“中”。很容易理解，质量越高，文件也就越大，反之亦然。接下来我们就来介绍具体怎么运用PS来实现批量压缩文件。
首先打开PS，找到动作面板，如果工作面板没有显示动作面板，我们可以点击菜单栏的“窗口”找到“动作”，在前面打勾，这时候动作面板就可以显示在工作区。
点击“创建新动作”，可以对动作进行命名，比如我们就命名为“压缩图片”，点击记录，然后点击动作面板的录制按钮，这时候你在PS界面的操作就开始记录了。
● ●
●●●  ●●●
现在点击“文件”-“打开”，选择要压缩的图片，我们的目的是压缩文件，所以不需要做更改，继续点击“文件”-“储存为”，这时候我们就可以选择图片储存的质量参数，一般选择“中”就可以，点击确定。然后关掉图片，再点击“停止播放/记录”按钮。注意一定要关掉图片再点击停止，否则记录的动作不包括关掉图片，批量处理时会同时打开大量的图片造成系统卡顿。完成后再打开文件的属性，可以看到图片已经被压缩了。
接下来点击“文件”-“自动”-“批处理”。
弹出“批处理对话框”，可以设置批处理要运行的动作、源文件以及压缩完成后储存的位置。
● ●
●●●  ●●●
点击确定，PS会自动开始处理源文件夹中的操作。稍等片刻你就可以在目标文件夹中找到被压缩的图片啦。
     有任何疑问都可以给小编留言哦~欢迎大家投稿~
工具获取：
点击左下角的小键盘，输入“PS安装包”即可。

packagecom.crm.servlet;importjava.io.File;importjava.io.IOException;importjava.io.PrintWriter;importjava.util.Collection;importjava.util.HashMap;importjava.util.Map;importjavax.servlet.ServletException;importjavax.servlet.annotation.MultipartConfig;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.http.HttpSession;importjavax.servlet.http.Part;importorg.springframework.context.ApplicationContext;importorg.springframework.web.context.support.WebApplicationContextUtils;importnet.sf.json.JSONObject;/***
* @Package com.crm.servlet
* @
*@author* @date 2018年4月2日 上午8:06:15
* @Description: 批量上传
*@versionV1.0*/@WebServlet("/BatchSupplementIdentityServlet.do")
@MultipartConfigpublic class BatchSupplementIdentityServlet extendsAbstractBaseServlet {private static final long serialVersionUID = 1L;private SelectBoxContainer selectBox = newSelectBoxContainer();publicBatchSupplementIdentityServlet() {super();
}
@SuppressWarnings({"rawtypes", "unchecked"})protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
ApplicationContext context=WebApplicationContextUtils.getWebApplicationContext(request.getServletContext());
WebContextUtils.setWebApplicationContext(context);
response.setCharacterEncoding("UTF-8");
Map requestMap=BaseServletHelper.parseRequst2Map(request);
HttpSession session=request.getSession();
Map userMap =RedisSessionUtil.getInstance(request).get(session.getId());//接收文件
if ("batchInFiles".equals(requestMap.get("servletType")) ) {//获取额外参数
String myId = request.getParameter("myId");
System.out.println(myId);
File path= new File("d:\\tmp");if (!path.exists()){
path.mkdir();
}/*//根据名称获取文件
Part img = request.getPart("file");
//文件全路径
String filePath = path.getPath() + File.separator + img.getSubmittedFileName();
//写入文件
img.write(filePath);
//输出信息
System.out.println("File Upload : " + filePath);*/
//获取文件(不知道文件名称，获取所有文件)
Collection parts =request.getParts();
String fileName= null;//遍历取出文件
for(Part part : parts) {
System.out.println("-----------------------");if(part.getHeader("Content-Disposition").contains("filename")){
fileName= part.getHeader("Content-Disposition");
fileName= fileName.substring(fileName.indexOf("filename=\"")+10, fileName.lastIndexOf("\""));
System.out.println("fileName: "+fileName);//存储文件  利用part的api将临时文件写入目标文件
part.write("d:/tmp/"+fileName);
}
System.out.println("-----------------------");
}//定义返回map
Map reMap = new HashMap<>();
reMap.put("code", 0);
reMap.put("filePath", "d:/tmp/"+fileName);//转换为json返回前台
String result =JSONObject.fromObject(reMap).toString();
PrintWriter out=response.getWriter();
out.println(result);
out.flush();
out.close();
}
}protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
doGet(request, response);
}
}

最近跟后端探讨批量上传文件的需求，需要写一个带进度条动画的批量上传文件的组件，结果他们后端(python)跟我说不能多文件上传，我一听就很尴尬了，怎么可能不能多文件呢哈哈，后来我只是告诉他进度条的实现方式，在过了2天后我一直对此事耿耿于怀，所以干脆自己动手用node写了一个多文件上传的demo，并记录下来。

前端: http请求为自己封装的一个原生请求函数，一切以原生代码为主；
后端(nodeJs): express + multer，自定义 multer 包的 diskStorage 函数;

直接上demo吧，我加上一点注解就好，就不用详细说明了, 其中写了一个测试接口用来测试，可以不用管；
// 前端 upload.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>上传文件demo</title>
    <style media="screen">
      .progress{
        width: 50%;
        height: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 10px;
        position: relative;
      }
      .progress>span{
        display: inline-block;
        position: absolute;
        border-radius: 4px;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: rgb(98, 230, 74);
        transition: width 0.3s ease-out;
      }
    </style>
  </head>
  <body>
    <input id="file" type="file" multiple>
    <div class="progress">
      <span></span>
    </div>
    <script type="text/javascript">
      var http = function (option) {
        // 过滤请求成功后的响应对象
        function getBody (xhr) {
          var text = xhr.responseText || xhr.response
          if (!text) {
            return text
          }

          try {
            return JSON.parse(text)
          } catch (err) {
            return text
          }
        }

        var xhr = new XMLHttpRequest();
        // 自定义 beforeSend 函数
        if(option.beforeSend instanceof Function) {
          if (option.beforeSend(xhr) === false) {
            return false
          }
        }

        xhr.onreadystatechange = function () {
          if (xhr.status === 200) {
            if (xhr.readyState === 4) {
              // 成功回调
              option.onSuccess(getBody(xhr))
            }
          }
        }

        // 请求失败
        xhr.onerror = function (err) {
          option.onError(err)
        }

        xhr.open(option.type, option.url, true)

        // 当请求为上传文件时回调上传进度
        if (xhr.upload) {
          xhr.upload.onprogress = function (event) {
            if (event.total > 0) {
              event.percent = event.loaded / event.total * 100;
            }
            // 监控上传进度回调
            if (option.onProgress instanceof Function) {
              option.onProgress(event)
            }
          }
        }

        // 自定义头部
        const headers = option.headers || {}
        for (var item in headers) {
          xhr.setRequestHeader(item, headers[item])
        }

        xhr.send(option.data)
      }
	
	// 测试接口
      http({
        type: 'POST',
        url: '/test',
        data: JSON.stringify({
          name: 'zhangqiang'
        }),
        onSuccess: function (data) {
          console.log(data)
        },
        onError: function (err) {
          console.log(err)
        }
      })
      document.getElementById('file').onchange = function () {
        var fileList = this.files, formData = new FormData();
        Array.prototype.forEach.call(fileList, function (file) {
          formData.append(file.name, file)
        })
       // 当上传的数据为 file 类型时，请求的格式类型自动会变为 multipart/form-data, 如果头部格式有特定需求，在我的 http 函数中传入 headers<Object> 即可，大家可自己查看，我这里没有什么特殊处理所以就不传了
        http({
          type: 'POST',
          url: '/upload',
          data: formData,
          onProgress: function (event) {
            console.log(event.percent)
            document.querySelector('.progress span').style.width = event.percent + '%';
          },
          onSuccess: function (data) {
            console.log('上传成功')
          },
          onError: function (err) {
            alert(err)
          }
        })
      }
    </script>
  </body>
</html>

后端所用的一些东西我放在这

express中间件-multer
express 4.x 文档

// 后端(node.js) upload.js
var express = require('express');
var path = require('path');
var fs = require('fs');
var app = express();
var bodyParser = require('body-parser');	// 过滤请求头部相应格式的body
var multer = require('multer');
var chalk = require('chalk');	// 只是一个 cli 界面字体颜色包而已
var log = console.log.bind(console);

app.use(express.static('static'));
// 接受 application/json 格式的过滤器
var jsonParser = bodyParser.json()
// 接受 application/x-www-form-urlencoded 格式的过滤器
var urlencodedParser = bodyParser.urlencoded({ extended: false })
// 接受 text/html 格式的过滤器
var textParser = bodyParser.text()

// 自定义 multer 的 diskStorage 的存储目录与文件名
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'view')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname)
  }
})

var upload = multer({ storage: storage })

// 页面渲染
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'view/upload.html'));
})

app.post('/test', textParser, jsonParser, function (req, res) {
  log(req.body);
  var httpInfo = http.address();
  res.send({
    host: httpInfo.address,
    port: httpInfo.port
  })
})

// 对应前端的上传接口 http://127.0.0.1:3000/upload, upload.any() 过滤时不对文件列表格式做任何特殊处理
app.post('/upload', upload.any(), function (req, res) {
  log(req.files)
  res.send({message: '上传成功'})
})

// 监控 web 服务
var http = app.listen(3000, '127.0.0.1', function () {
  var httpInfo = http.address();
  log(`创建服务${chalk.green(httpInfo.address)}:${chalk.yellow(httpInfo.port)}成功`)
})

哦对了，上传完毕后重新上传我没写动画重置，大家实际用的时候肯定是需要展示每个上传文件的，每次上传文件都对应着一个进度条，所以应该抽象为一个组件，至于组件的抽象我这就不详细写了，那个就很容易了~

使用layui的文件上传组件，可以方便的弹出文件上传界面。
效果如下：
点击【批量导入】按钮调用js脚本importData(config)就可以实现数据上传到服务器。
脚本：
/***
* 批量导入
* config.downUrl 下载模板url
* config.uploadUrl 上传文件url
* config.msg
* config.done 上传结束后执行。
*/
function importData(config){
var default_config = {
msg:"数据导入成功！"
}
$.extend( default_config, config);
var idRandom = "importData" + Math.ceil(Math.random()*10000)
var htmlContent = '
';
htmlContent += '';
htmlContent += '
点击上传，或将文件拖拽到此处
';
htmlContent += '
';
layer.open({
type: 1
,offset: "auto" //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
,id: 'layer_importData' //防止重复弹出
,title:'导入记录'
,content: htmlContent
,maxWidth:800
,btn: ['下载模板']
,btnAlign: 'c' //按钮居中
,shade: 0 //不显示遮罩
,yes: function(){//提交
var iframe = $("");
iframe.attr("src",default_config.downUrl);
iframe.css("display","none");
$("#"+idRandom).append(iframe);
}
});
form.render();
//拖拽上传
upload.render({
elem: "#"+idRandom
,url: default_config.uploadUrl
,accept: 'file'
,done: function(data){
if(data.code == 0){
layer.closeAll();
if($("#query")){
$("#query").click();
}
if(default_config.done){
default_config.done(data);
}else{
layer.msg(default_config.msg);
}
}else{
layer.msg(data.msg);
}
}
});
}
以上这篇layui 上传文件_批量导入数据UI的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。