一个简单的plupload上传demo
客户端
目录结构
其中plupload-master文件夹的目录结构为：
upload_signature.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>专家用户信息</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="plupload-master/plupload.full.min.js"></script>
</head>
<body>
<div class="userC clear">
<div class="userCd">
<span class="userCdl">证件上传：</span>
<div class="userUpImg">
<div class="userUImg" id="bcd"></div>
<div class="userUpBut"><input type="file" id="fileImg" title="上传证件照" accept="image/jpeg,image/jpg,image/png"/></div>
</div>
<div class="reminder">
<p>温馨提示：</p>
<p>1、照片支持格式：jpg、jpeg、gif、png。</p>
<p>2、您只需传1张照片即可，大小不要超过5M，如果照片过大将不能上传。</p>
<p>3、证件类型：如执业医师证。</p>
</div>
</div>
</div>
<script type="text/javascript">
var uploader = new plupload.Uploader({
//实例化一个plupload上传对象
browse_button : 'fileImg',//上传按钮id
url : 'http://192.168.8.175:8088/upload',//上传路径
multipart:true,//是否文件上传
multi_selection: false,//是否允许选取多个
multipart_params:{
firstParam:'这是参数1',secondParam:'这是参数2'},
// max_file_size : '10mb',
filters: {
mime_types : [
{
title:"Images", extensions:"jpeg,jpg,png"}
],
prevent_duplicates : true //不允许选取重复文件
}
});
uploader.init(); //初始化
//alert("初始化完");
//绑定文件添加进队列事件
uploader.bind('FilesAdded',function(uploader,files){
var file=files[0];
if(!/image\/\w+/.test(file.type)){
$("#fileImg").val("");
alert("请选择正确的图片！");
return false;
}
var max_size = 5 * 1024;//图片大小 不超过5M
var size = file.size;
if (size > max_size * 1024) {
$("#fileImg").val("");
alert("图片大小不能超过5M");
return false;
}
uploader.start();
});
uploader.bind('UploadProgress',function(uploader,file){
// alert("正在上传");
});
uploader.bind('FileUploaded',function(uploader,file,result){
alert("返回值="+result.response);
alert("上传成功");
});
</script>
</body>
</html>
其中http://192.168.8.175:8088/upload 后台服务端提供的上传接口。
至此客户端的全部代码就是完成了 就是这一个upload_signature.html文件而已，关于plupload上传相关的用法及说明可参见：
服务器端
用springboot搭建项目提供一个接受文件上传的接口Controller
package com.xl.test.pluploader.controller;
import java.io.IOException;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
@RestController
public class UploaderController {
@CrossOrigin
@RequestMapping(value = "upload", produces = "application/json;charset=UTF-8")
public String upload(@RequestParam(value = "file", required = false) MultipartFile file, String firstParam,String secondParam) throws IOException {
String fileName = file.getOriginalFilename();
System.out.println(".....fileName= " + fileName);
long fileSzie = file.getSize();
System.out.println(".....fileSzie= " + fileSzie);
byte[] fileBts = file.getBytes();
System.out.println(".....fileBts= " + fileBts);
System.out.println(".....firstParam= " + firstParam);
System.out.println(".....secondParam= " + secondParam);
return "测试完成";
}
}
测试运行结果
用浏览器打开upload_signature.html，然后点击“选择文件” 上传
运行结果
后台
前端
