编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

JavaScript 上传图片,限制图片大小支持微信浏览器 demo 源代码

wxchong 2024-07-15 09:53:13 开源技术 12 ℃ 0 评论

添加accept 属性,设置成image/* 这样安卓的微信浏览器才能选择图片成功

<input type="file" name="idCardPath" id="idCardPath" accept="image/*" class="form-control picture-address" required/>
<input type="button" name="upload" id="upload" class="btn" style="width:150px;" onclick="uploadImage()" value="上传" />
<input type="hidden" name="idCardPath_1" id="idCardPath_1" />
<img id="picture" src="${request.contextPath}/static/images/id_sample.png" width="400px" height="500px"/>

点击 上传按钮,对图片大小进行判断 1048576 =1* 1024 *1024

function uploadImage(){
			if(document.getElementById('idCardPath').value == ""){
				alert("请选择证件照片;");
 	 	 return false;
			}
			var fileSize = document.getElementById('idCardPath').files[0]; //获得文件大小; 	
 	 if(fileSize.size > 1048576 ){
 	 	 alert("证件照片过大,请小于1M");
 	 	 return false;
 	 } 
 	 $('#loading').modal('show');
 	 $.ajaxFileUpload({
				type:'post',
 url: '${request.contextPath}/re/upload', //用于文件上传的服务器端请求地址
 secureuri: false, //是否需要安全协议,一般设置为false
 fileElementId: 'idCardPath', //文件上传域的ID
 dataType: 'json', //返回值类型 一般设置为json 
 contentType:'multipart/form-data', 
 success: function (data, status) //服务器成功响应处理函数
 { 
 if(data.success){
 		//alert( data.resultMsg);
 		var path = data.resultMsg;
 		 $('#idCardPath_1').val(path); 
 		 document.getElementById('picture').src="${request.contextPath}"+path; 		 		 
 		
 	
 }else{
 		alert(data.resultMsg);
 }
 $('#loading').modal('hide');
 },
 error: function (data, status, e)//服务器响应失败处理函数
 {
 alert(e);
 $('#loading').modal('hide');
 }
 }); 
		}

简单代码demo,喜欢可以收藏并转发

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表