微信二維碼上傳檔案
轉載自:https://blog.csdn.net/peng_wei_kang/article/details/80279923
在業務系統中常常遇到檔案上傳比較麻煩等問題,首先拍照後要將照片拷貝到電腦中,然後在點選上傳按鈕,這樣確實比較麻煩,因為本人設計出通過通過掃描二維碼自動上傳檔案,程式碼如下:
功能演示
二維碼生成介面如下圖:
掃描二維碼訪問的介面如下圖:
程式碼環節
檔案對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
版權宣告:本文為博主原創文章,轉載請附上博文連結!