微信二维码上传文件

最新推荐文章于 2024-04-25 15:56:35 发布

置顶 peng_wei_kang

最新推荐文章于 2024-04-25 15:56:35 发布

阅读量1w

点赞数 2

分类专栏： Java 文章标签：二维码生成二维码文件上传 Java文件上传

本文链接：https://blog.csdn.net/peng_wei_kang/article/details/80279923

版权

Java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在业务系统中常常遇到文件上传比较麻烦等问题，首先拍照后要将照片拷贝到电脑中，然后在点击上传按钮，这样确实比较麻烦，因为本人设计出通过通过扫描二维码自动上传文件，代码如下：

功能演示

二维码生成界面如下图：

扫描二维码访问的界面如下图：

代码环节

文件对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" οnclick="selectImage()">选择<br/>文件</button>
    <button class="btn2" id="btn2" οnclick="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;" οnchange="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.οnlοad=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

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
微信二维码上传文件

在业务系统中常常遇到文件上传比较麻烦等问题，首先拍照后要将照片拷贝到电脑中，然后在点击上传按钮，这样确实比较麻烦，因为本人设计出通过通过扫描二维码自动上传文件，代码如下：文件对FileBean.java象类如下：/** * */package com.goldenbridge.qrcodefilesystem.core;/***@author create by pengweikan...
复制链接

扫一扫