在微信公众号中使用JQueryWeui组件实现文件上传

最新推荐文章于 2023-10-24 10:27:15 发布

小丸子酱

最新推荐文章于 2023-10-24 10:27:15 发布

阅读量521

点赞数

分类专栏： 111

本文链接：https://blog.csdn.net/qq_40093561/article/details/89371897

版权

111 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文件上传html：

上传电子发票图片或PDF

                        </ul>  
                        
                        <div class="weui-uploader__input-box">  
                            <input id="uploaderInput" style="width: 75px;height: 60px; margin-top: 20px;" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*,.pdf" multiple>  
                        </div> 
                        <div class="file_shanchu file_hidden">
			           		<img style="width:100%" src="${ctxResources }/images/shanchu.png">
			           	</div> 
                        <div class="file_type">
			           		支持jpg、jpeg、png、bmp、pdf格式</br>
			           		大小不超过5M
			           	</div>
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
  </div>

文件上传js：
/**

上传文件
@param e
*/
function fileUploadShow(){
var tmpl = ‘
’;
var pdfTmpl = ‘
’;
var allowTypes = [‘image/jpg’, ‘image/jpeg’, ‘image/png’, ‘image/bmp’, ‘application/pdf’];
var maxSize = $("#fileUploadSize").val(); // 10240KB，也就是 10MB
$("#uploaderInput").on(“change”, function(e) {
e.stopPropagation();
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
if(files.length == 1){
var file = files[0];
var fileType = file.type;
```
 	 // 如果类型不在允许的类型范围内
 	 if (allowTypes.indexOf(file.type) === -1) {
 	    $.toptip('该类型不允许上传' + fileType, "warning");
 	    return;
 	 }
     if (file.size > maxSize) {
     	$.toptip("图片太大，不允许上传", "warning");
     	return;
     }
      if(url) {  
          src = url.createObjectURL(file);  
      } else {  
          src = e.target.result;  
      }  
      $(".weui-uploader__input-box").removeClass("file_show");
 	 $(".weui-uploader__input-box").addClass("file_hidden");
      if(file.type == 'application/pdf'){
     	 $("#uploaderFiles").append($(pdfTmpl.replace('#url#', src)));
      }else{
     	 $("#uploaderFiles").append($(tmpl.replace('#url#', src)));
      }
      $(".file_shanchu").removeClass("file_hidden");
 	 $(".file_shanchu").addClass("file_show");
  }
```
});
//删除图片
$(".file_shanchu").click(function(e) {
$("#uploaderFiles").find(“li”).eq(0).remove();
var file = document.getElementById(‘uploaderInput’);
file.value = ‘’;
$(".file_shanchu").removeClass(“file_show”);
$(".file_shanchu").addClass(“file_hidden”);
$(".weui-uploader__input-box").removeClass(“file_hidden”);
$(".weui-uploader__input-box").addClass(“file_show”);
});
}
单独对文件上传到服务器进行发请求，后台使用MultipartFile接收文件：
function fileUpload(id){
var resultFile = $(’#uploaderInput’)[0].files[0];
if (resultFile) {
var formData = new FormData();
formData.append(‘file’, resultFile);
formData.append(‘id’, id);
// 允许上传的图片类型
$.ajax({
type : ‘post’,
data : formData,
url : ctx + “/invoiceInspection/filePicSave”,
processData: false,
contentType: false,
success : function() {
}
});
}
}

js文件混淆，使用JSHAMAN进行免费混淆，比较容易操作，效果也可以，故用之。
请求使用RSA2签名请求，防爬，jsrsasign-all-min.js，
/**
* 生成签名
*/
buildRequestPara : function(param){
if(param){
//除去数组中的空值和签名参数
var newParam = new Object();
for(var a in param){
if(param[a] != undefined || param[a] != ‘’ || param[a] != ‘sign’){
newParam[a] = param[a];
}
}
//增加APPID
newParam.appId = Constant.appId;
//增加签名类型
newParam.signType = Constant.signType.RSA2;
//增加时间戳参数
newParam.timestamp = new Date().getTime();
//增加随机数
var uuid = new UUID();
newParam.nonce = uuid.id;
newParam.method = param[‘method’];
//把数组所有元素排序，并按照“参数=参数值”的模式用“&”字符拼接成字符串
newParam = this.objKeySort(newParam);
var str = ‘’;
for(var b in newParam){
str += b + ‘=’ + newParam[b] + ‘&’;
}
str = str.substring(0, str.length-1);
console.log(“签名前：” + str);
//RSA2加密Constant.primaryKey
var rsa = new RSAKey(); // 新建RSA对象
rsa = KEYUTIL.getKey(Constant.primaryKey); // 设置私钥
var hashAlg = ‘sha256’; // 设置sha256
var hSig = rsa.sign(str, hashAlg); // 加签
hSig = hex2b64(hSig); // hex 转 b64
//增加加密sign
newParam.sign = hSig;
console.log(“签名sign：” + hSig);
return newParam;
}
js的uuid生成工具类，从网上搜索，使用效果还不错：
// 使用var myuuid=new UUID();

// On creation of a UUID object, set it’s initial value
function UUID(){
this.id = this.createUUID();
}

// When asked what this Object is, lie and return it’s value
UUID.prototype.valueOf = function(){ return this.id; };
UUID.prototype.toString = function(){ return this.id; };

//
// INSTANCE SPECIFIC METHODS
//
UUID.prototype.createUUID = function(){
//
// Loose interpretation of the specification DCE 1.1: Remote Procedure Call
// since JavaScript doesn’t allow access to internal systems, the last 48 bits
// of the node section is made up using a series of random numbers (6 octets long).
//
var dg = new Date(1582, 10, 15, 0, 0, 0, 0);
var dc = new Date();
var t = dc.getTime() - dg.getTime();
var tl = UUID.getIntegerBits(t,0,31);
var tm = UUID.getIntegerBits(t,32,47);
var thv = UUID.getIntegerBits(t,48,59) + ‘1’; // version 1, security version is 2
var csar = UUID.getIntegerBits(UUID.rand(4095),0,7);
var csl = UUID.getIntegerBits(UUID.rand(4095),0,7);

// since detection of anything about the machine/browser is far to buggy,
// include some more random numbers here
// if NIC or an IP can be obtained reliably, that should be put in
// here instead.
var n = UUID.getIntegerBits(UUID.rand(8191),0,7) +
        UUID.getIntegerBits(UUID.rand(8191),8,15) +
        UUID.getIntegerBits(UUID.rand(8191),0,7) +
        UUID.getIntegerBits(UUID.rand(8191),8,15) +
        UUID.getIntegerBits(UUID.rand(8191),0,15); // this last number is two octets long
return tl + tm  + thv  + csar + csl + n;

};

//Pull out only certain bits from a very large integer, used to get the time
//code information for the first part of a UUID. Will return zero’s if there
//aren’t enough bits to shift where it needs to.
UUID.getIntegerBits = function(val,start,end){
var base16 = UUID.returnBase(val,16);
var quadArray = new Array();
var quadString = ‘’;
var i = 0;
for(i=0;i<base16.length;i++){
quadArray.push(base16.substring(i,i+1));
}
for(i=Math.floor(start/4);i<=Math.floor(end/4);i++){
if(!quadArray[i] || quadArray[i] == ‘’) quadString += ‘0’;
else quadString += quadArray[i];
}
return quadString;
};

//Replaced from the original function to leverage the built in methods in
//JavaScript. Thanks to Robert Kieffer for pointing this one out
UUID.returnBase = function(number, base){
return (number).toString(base).toUpperCase();
};

//pick a random number within a range of numbers
//int b rand(int a); where 0 <= b <= a
UUID.rand = function(max){
return Math.floor(Math.random() * (max + 1));
};