转载自：https://blog.csdn.net/peng_wei_kang/article/details/80279923
在业务系统中常常遇到文件上传比较麻烦等问题，首先拍照后要将照片拷贝到电脑中，然后在点击上传按钮，这样确实比较麻烦，因为本人设计出通过通过扫描二维码自动上传文件，代码如下：
功能演示
二维码生成界面如下图：
扫描二维码访问的界面如下图：
扫描二维码关注公众号，回复：
4339697 查看本文章
代码环节
文件对FileBean.java象类如下：
/**
*
*/
package com.goldenbridge.qrcodefilesystem.core;
/**
*@author create by pengweikang
*@date 2018年4月13日--下午7:14:28
*@problem
*@answer
*@action
*/
import java.util.Date;
public class FileBean {
private Date createDate = new Date(); //生成时间
private String path; //文件相对路径
private String realPath; //文件绝对路径
private String realname; //文件名称
private boolean used = false; //是否被使用
private Date userDate; //使用时间
private boolean hasFile = false; //是否存在文件
public Date getCreateDate() {
return createDate;
}
public void setCreateDate(Date createDate) {
this.createDate = createDate;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
public String getRealname() {
return realname;
}
public void setRealname(String realname) {
this.realname = realname;
}
public boolean isHasFile() {
return hasFile;
}
public void setHasFile(boolean hasFile) {
this.hasFile = hasFile;
}
public boolean isUsed() {
return used;
}
public void setUsed(boolean used) {
this.used = used;
}
public Date getUserDate() {
return userDate;
}
public void setUserDate(Date userDate) {
this.userDate = userDate;
}
public String getRealPath() {
return realPath;
}
public void setRealPath(String realPath) {
this.realPath = realPath;
}
}
普通文件缓存对象类FIleData.java，设计比较简单，如下：
/**
*
*/
package com.goldenbridge.qrcodefilesystem.core;
import java.util.HashMap;
import java.util.Map;
/**
*@author create by pengweikang
*@date 2018年4月13日--下午7:13:49
*@problem
*@answer
*@action
*/
public class FIleData {
private static Map<String,FileBean> mapList = new HashMap<String,FileBean>();
public static Map<String,FileBean> getMap() {
return mapList;
}
public static void put(String id,FileBean file) {
mapList.put(id, file);
}
public static FileBean getFileBean(String id) {
FileBean bean = mapList.get(id);
return bean;
}
public static String get(String id) {
FileBean bean = mapList.get(id);
return bean.getPath();
}
}
为了解决跨域请求问题，创建SimpleCORSFilter.java过滤器，对请求消息头参数进行设置，如下：
/**
*
*/
package com.goldenbridge.qrcodefilesystem.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*@author create by pengweikang
*@date 2018年4月16日--下午7:30:38
*@problem
*@answer
*@action
*/
@WebFilter(filterName="SimpleCORSFilter",urlPatterns="/*")
public class SimpleCORSFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request= (HttpServletRequest)req;
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setHeader("Access-Control-Allow-Credentials","true");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
//response.setHeader("Access-Control-Allow-Origin", "/RecognizeServices*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {
}
public void destroy() {}
}
唯一ID自动生成类IDUtils.java,为每个二维码生成唯一的ID标示，如下：
/**
*
*/
package com.goldenbridge.qrcodefilesystem.utils;
/**
*@author create by pengweikang
*@date 2018年4月13日--下午7:11:53
*@problem
*@answer
*@action
*/
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.concurrent.locks.Lock;
import java.util.concurrent.locks.ReentrantLock;
public class IDUtils {
private static final long ONE_STEP = 10;
private static final Lock LOCK = new ReentrantLock();
private static long lastTime = System.currentTimeMillis();
private static short lastCount = 0;
private static int count = 0;
/**
* 按当前时间生成16位ID
* @return
*/
@SuppressWarnings("finally")
public static String generalSrid() {
LOCK.lock();
try {
if (lastCount == ONE_STEP) {
boolean done = false;
while (!done) {
long now = System.currentTimeMillis();
if (now == lastTime) {
try {
Thread.currentThread();
Thread.sleep(1);
} catch (java.lang.InterruptedException e) {
}
continue;
} else {
lastTime = now;
lastCount = 0;
done = true;
}
}
}
count = lastCount++;
} finally {
LOCK.unlock();
return lastTime + "" + String.format("%03d", count);
}
}
/**
* 获得12位ID
*
* @return
*/
public static String generalSrid12() {
String id = generalSrid();
return id.substring(4, id.length());
}
/**
* 生成图片ID,图片按时间分包存放 该ID为短ID
*
* @return
*/
public synchronized static String generalImgid() {
String uuid = UUID();
return uuid.substring(0, uuid.indexOf("-", 9));
}
/**
* 生成文件ID,按时间分包存放 该ID为短ID
*
* @return
*/
public synchronized static String generalFileid() {
return UUID();
}
/**
* 随机生成UUID
*
* @return
*/
public synchronized static String UUID() {
return java.util.UUID.randomUUID().toString();
}
public static String getFormatDate(String formatString) {
Date now = new Date(System.currentTimeMillis());
SimpleDateFormat sdf = new SimpleDateFormat(formatString);
return sdf.format(now);
}
/**
* 生成会员卡ID
*
* @return
*/
public static String memberCardID() {
return getFormatDate("yy" + "0000");
}
/**
* 随机指定范围内N个不重复的数 最简单最基本的方法
*
* @param min
* 指定范围最小值
* @param max
* 指定范围最大值
* @param n
* 随机数个数
*/
public static int[] randomCommon(int min, int max, int n) {
if (n > (max - min + 1) || max < min) {
return null;
}
int[] result = new int[n];
int count = 0;
while (count < n) {
int num = (int) (Math.random() * (max - min)) + min;
boolean flag = true;
for (int j = 0; j < n; j++) {
if (num == result[j]) {
flag = false;
break;
}
}
if (flag) {
result[count] = num;
count++;
}
}
return result;
}
public static void main(String[] args) {
System.out.println(UUID());
}
}
获取二维码唯一标识接口如下RandomCodeServlet.java
/**
*
*/
package com.goldenbridge.qrcodefilesystem.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.goldenbridge.qrcodefilesystem.core.FIleData;
import com.goldenbridge.qrcodefilesystem.core.FileBean;
import com.goldenbridge.qrcodefilesystem.timer.ClearExpireFileBean;
import com.goldenbridge.qrcodefilesystem.utils.IDUtils;
import com.goldenbridge.qrcodefilesystem.utils.JSONTools;
import com.goldenbridge.qrcodefilesystem.utils.ParamCode;
import net.sf.json.JSONObject;
/**
*@author create by pengweikang
*@date 2018年4月16日--上午9:26:42
*@problem
*@answer
*@action
*/
@WebServlet(name="randomCodeServlet", urlPatterns="/servlet/randomCode")
public class RandomCodeServlet extends HttpServlet{
ClearExpireFileBean clearExpireFileBean;
public RandomCodeServlet() {
clearExpireFileBean = new ClearExpireFileBean();
}
/**
*
*/
private static final long serialVersionUID = -5949347172309422275L;
/* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
/* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter writer = response.getWriter();
String id = IDUtils.generalSrid();
FIleData.put(id, new FileBean());
JSONObject object = new JSONObject();
object.put("fileId", id);
writer.write(JSONTools.formatJSONObjectToString(ParamCode.SUCCESS, "成功", object));
}
}
文件上传接口UpLoadFileServlet.java如下:
/**
*
*/
package com.goldenbridge.qrcodefilesystem.servlet;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.tomcat.util.http.fileupload.FileItem;
import org.apache.tomcat.util.http.fileupload.RequestContext;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import com.goldenbridge.qrcodefilesystem.core.FIleData;
import com.goldenbridge.qrcodefilesystem.core.FileBean;
import com.goldenbridge.qrcodefilesystem.utils.DateTools;
import com.goldenbridge.qrcodefilesystem.utils.IDUtils;
import com.goldenbridge.qrcodefilesystem.utils.JSONTools;
import com.goldenbridge.qrcodefilesystem.utils.ParamCode;
/**
*@author create by pengweikang
*@date 2018年4月13日--下午7:07:45
*@problem
*@answer
*@action
*/
@WebServlet(name="UpLoadFileServlet", urlPatterns="/servlet/upLoadFile")
public class UpLoadFileServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = -6044302735582588723L;
/* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Content-type", "text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
String fileId = request.getParameter("fileId");
PrintWriter printWriter = resp.getWriter();
FileBean fileBean = FIleData.getFileBean(fileId);
if(fileBean == null) {
printWriter.write(JSONTools.formatJSONObjectToString(ParamCode.ERROR, "该二维码已失效", null));
return;
}
DiskFileItemFactory factory = new DiskFileItemFactory();
try {
// 创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory);
// 判断提交上来的数据是否是上传表单的数据
if (!ServletFileUpload.isMultipartContent(request)) {
// 按照传统方式获取数据
return;
}
Map<String, List<FileItem>> map = upload.parseParameterMap(request);
List<FileItem> list = map.get("file");
String basePath = this.getServletContext().getRealPath("/");
String filePath = "/upload/"+File.separator + DateTools.getStringFromDate(new Date(), "yyyy/MM/dd");
File dirFile = new File(basePath+filePath);
if(!dirFile.isDirectory()) {
dirFile.mkdirs();
}
long timeId = System.currentTimeMillis();
for (FileItem item : list) {
// 如果fileitem中封装的是上传文件
//得到文件名
String filename = item.getName();
System.out.println("filename=" + filename);
if (filename == null || filename.trim().equals("")) {
continue;
}
//处理获取到的上传文件的文件名的路径部分，只保留文件名部分
filename = timeId+filename.substring(filename.lastIndexOf("."));
//获取item中的上传文件的输入流
InputStream in = item.getInputStream();
//创建缓冲区
byte buffer[] = new byte[1024];
//创建输出流对象，用于将缓冲区的数据读出到保存路径
FileOutputStream output = new FileOutputStream(basePath+filePath+ File.separator + filename);
//判断输入流中的数据是否已经读完
int len = 0;
//循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示输入流中还有数据
while ((len = in.read(buffer)) > 0) {
//使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + filename)当中
output.write(buffer, 0, len);
}
in.close();
output.close();
fileBean.setHasFile(true);
fileBean.setPath(filePath+ File.separator + filename);
fileBean.setRealPath(basePath+filePath+ File.separator + filename);
//printWriter.write("{state:"+ParamCode.SUCCESS+",message,'上传成功'}");
printWriter.write(JSONTools.formatJSONObjectToString(ParamCode.SUCCESS, "上传成功", null));
}
}catch(Exception e) {
e.printStackTrace();
}
}
/* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}文件下载接口DownLoadFileServlet.java如下：
/**
*
*/
package com.goldenbridge.qrcodefilesystem.servlet;
/**
*@author create by pengweikang
*@date 2018年4月17日--上午9:06:06
*@problem
*@answer
*@action
*/
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.goldenbridge.qrcodefilesystem.core.FIleData;
import com.goldenbridge.qrcodefilesystem.core.FileBean;
import com.goldenbridge.qrcodefilesystem.utils.JSONTools;
import com.goldenbridge.qrcodefilesystem.utils.ParamCode;
@WebServlet(name="downLoadFileServlet", urlPatterns="/servlet/downloadFile")
public class DownLoadFileServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 8182015257344566277L;
/* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
/* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Content-type", "text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
PrintWriter printWriter = resp.getWriter();
String fileId = req.getParameter("fileId");
FileBean fileBean = FIleData.getFileBean(fileId);
if(fileBean == null) {
printWriter.write(JSONTools.formatJSONObjectToString(ParamCode.ERROR, "二维码已经过期", null));
return;
}else {
if(!fileBean.isHasFile()) {
printWriter.write(JSONTools.formatJSONObjectToString(ParamCode.WRITTING, "等待文件上传", null));
return;
}else {
fileBean.setUsed(true);
fileBean.setUserDate(new Date());
printWriter.write(JSONTools.formatJSONObjectToString(ParamCode.SUCCESS, "文件上传成功", fileBean));
return;
}
}
}
}
自动删除过期或者已经被使用过的二维码以及上传过的文件ClearExpireFileBean.java,如下：
/**
*
*/
package com.goldenbridge.qrcodefilesystem.timer;
import java.io.File;
import java.util.Date;
import java.util.Map;
import java.util.Set;
import java.util.Timer;
import java.util.TimerTask;
import com.goldenbridge.qrcodefilesystem.core.FIleData;
import com.goldenbridge.qrcodefilesystem.core.FileBean;
/**
*@author create by pengweikang
*@date 2018年4月16日--上午10:25:06
*@problem
*@answer
*@action
*/
public class ClearExpireFileBean{
private long minute = 10;//默认十分钟执行一次
private long delay = 10;//延迟十秒钟
private Timer time = new Timer(true);
public ClearExpireFileBean() {
time.schedule(new MyTask(), delay*1000, minute*60*1000);
}
class MyTask extends TimerTask{
/* (non-Javadoc)
* @see java.util.TimerTask#run()
*/
@Override
public void run() {
Map<String,FileBean> map = FIleData.getMap();
Set<String> keySets = map.keySet();
Object [] strArray = keySets.toArray();
for(Object key : strArray) {
FileBean fileBean = map.get(key.toString());
Date date = fileBean.getCreateDate();
long delayTime = System.currentTimeMillis() - date.getTime();
if(delayTime > 10*60*1000) {
FileBean bean = map.get(key);
File file = new File(bean.getRealPath());
file.delete();
map.remove(key);
}
}
System.out.println("当前二维码文件总数为："+map.size());
}
}
}
扫描二维码请求的页面capture.html如下：
<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<title>BIP产品文件上传模块</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<style type="text/css">
h2,h3,h4{
text-align: center;
}
.btn-div{
position: fixed;
bottom: 0px;
width:100%;
text-align: center;
margin-bottom: 20px;
}
.btn-div button{
display: inline-block;
width: 80px;
height: 80px;
font-size:16px;
border-radius: 40px;
margin: 0px 15px;
color:white;
border: none;
}
.btn-div .btn1{
background-color: #d43f3a;
}
.btn-div .btn2{
display: none;
background-color: #3a991e;
}
.btn-div .btn1:active{
background-color: #dd4f3a;
}
.btn-div .btn2:active{
background-color: #7a991e;
}
#localImag{
text-align: center;
margin: 10px 0px;
}
#localImag #preview{
display: inline-block;
text-align: center;
}
</style>
</head>
<body style="height: 100%;">
<h2>BIP产品文件上传模块</h2>
<h4>业务名称：<span id="businessNameId"></span></h4>
<h4>材料名称：<span id="fielNameId"></span></h4>
<div class="btn-div">
<button class="btn1" onclick="selectImage()">选择<br/>文件</button>
<button class="btn2" id="btn2" onclick="uploadImageFile()">确认<br/>上传</button>
</div>
<iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
<form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
<div>
<div>
<input type="file" name="file" id="file_head" style="display: none;" onchange="javascript:setImagePreview();" />
</div>
</div>
</form>
<div data-role="fieldcontain">
<div id="localImag">
<img id="preview" width="-1" height="-1" style="display: none" />
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript">
var tempUrl = window.location.href;
var params = tempUrl.substring(tempUrl.lastIndexOf("?")+1,tempUrl.length);
var paramArray = params.split("&");
for(var index in paramArray){
var tempParam = paramArray[index];
var tempData = tempParam.split("=");
if(tempData[0] == "businessName"){
$("#businessNameId").html(decodeURI(tempData[1]));
}else if(tempData[0] == "fileName"){
$("#fielNameId").html(decodeURI(tempData[1]));
}else if(tempData[0] == "fileId"){
window.fileId = tempData[1];
}
}
function selectImage(){
document.getElementById("file_head").click();
}
function setImagePreview() {
var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
picture = file_head.value;
if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
!1;
if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
preview.style.width = "100%",
preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
else {
file_head.select(),
file_head.blur(),
img_txt = document.selection.createRange().text,
localImag = document.getElementById("localImag");
try {
localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
} catch(f) {
return alert("您上传的图片格式不正确，请重新选择！"),
!1
}
preview.style.display = "none",
document.selection.empty()
}
document.getElementById("btn2").style.display="inline";
return !0;
}
function closeWindow(){
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) {
window.location.href="about:blank";
} else {
window.opener = null;
window.open("", "_self");
window.close();
}
}
function getFileSize(size){
return size/1000/1000;
}
function uploadImageFile(){
var formData = new FormData();
var dataFile = $('#file_head')[0].files[0];
var fileSize = getFileSize(dataFile.size);
if(fileSize > 1.8){
var form = new FormData(); // FormData 对象
var quality = 1.8/fileSize;
photoCompress(dataFile, {
quality: quality
},function(base64Codes){
var bl = convertBase64UrlToBlob(base64Codes);
formData.append("file", bl, "file_"+Date.parse(new Date())+".jpg");
var loadIndexInfo;
$.ajax({
url : "servlet/upLoadFile?fileId="+window.fileId,
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
dataType:'json',
beforeSend:function(){
loadIndexInfo = layer.load(0, {shade: false});
},
success : function(responseStr) {
if(responseStr.state===1){
layer.close(loadIndexInfo);
layer.msg('上传成功',{time:2000,icon:1},function(){
location.reload();
});
}else{
layer.close(loadIndexInfo);
layer.msg(responseStr.message,{time:1000,icon:2},function(){
location.reload();
//closeWindow();
});
}
},
error : function(responseStr) {
layer.close(loadIndexInfo);
layer.msg("系统异常",{time:1000,icon:2});
}
});
});
/* return alert("您上传的图片为"+fileSize+"M，已经大于2M，请重新选择！"),
!1 */
}else{
formData.append("file",dataFile);
}
// document.getElementById("myForm").submit()
/* var form = $("#formHead");
form.attr("action","servlet/upLoadFile?fileId="+window.fileId);
form.submit();
return; */
// var file_head = document.getElementById("file_head");
/* var formData = new FormData($('#file_head')[0]);
// var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#file_head")[0].files[0]);
formData.append("name",name); */
/*
$.ajaxFileUpload
(
{
url : "servlet/upLoadFile?fileId="+window.fileId,
secureuri: false, //一般设置为false
fileElementId: 'file_head', //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json', //返回值类型 一般设置为json
success : function(responseStr) {
if(responseStr.state===1){
layer.msg('上传成功',{time:2000,icon:1},function(){
location.reload();
});
}else{
layer.msg(responseStr.message,{time:1000,icon:2},function(){
location.reload();
//closeWindow();
});
}
},
error : function(responseStr) {
console.log("error");
}
}
) */
}
function convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
function photoCompress(file,w,objDiv){
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objDiv)
}
}
function canvasDataURL(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
//if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
//}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
</script>
</body>
</html>注意：
1.该微信扫一扫服务需发布在已经备案的域名服务器上，不然微信扫一扫是不会自动请求你的http请求的。
2.微信使用的识nginx代理，并且设置了单个请求最大只能请求1M的图片，不过系统前端已经自动压缩，已无影响。
3.iphone手机只能拍照上传，不能选择图片，因为iphone图片格式为heic，不属于正常图片格式。
---------------------
作者：peng_wei_kang
来源：CSDN
原文：https://blog.csdn.net/peng_wei_kang/article/details/80279923
版权声明：本文为博主原创文章，转载请附上博文链接！