jquery - 如何通过客户端实现h5的上传图片?
本文介绍了jquery - 如何通过客户端实现h5的上传图片?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
使用了LUploader.js插件去实现,h5的图片上传功能,但是安卓会跳到文件夹,ios会直接到图库。如何通过客户端去实现这一功能?
https://github.com/xfhxbb/LUp...
<div class="IdCard">
<h1>LUploader移动端图片压缩上传</h1>
<div class="LUploader" id="demo1">
<div class="LUploader-container">
<input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" />
<ul class="LUploader-list"></ul>
</div>
<div>
<div class="icon icon-camera font20"></div>
<p>单击上传</p>
</div>
</div>
<div class="LUploader" id="demo2">
<div class="LUploader-container">
<input data-LUploader='demo2' data-form-file='basestr' data-upload-type='back' type="file" />
<ul class="LUploader-list"></ul>
</div>
<div>
<div class="icon icon-camera font20"></div>
<p>单击上传</p>
</div>
</div>
<div class="LUploader" id="demo3">
<div class="LUploader-container">
<input data-LUploader='demo3' data-form-file='basestr' data-upload-type='salary' type="file" />
<ul class="LUploader-list"></ul>
</div>
<div>
<div class="icon icon-camera font20"></div>
<p>单击上传</p>
</div>
</div>
</div>
<script src="/LUploader.min.js"></script>
<script>
[].slice.call(document.querySelectorAll('input[data-LUploader]')).forEach(function(el) {
new LUploader(el, {
url: 'http://172.16.2.62:8099/h5/upCertificate',//post请求地址
multiple: false,//是否一次上传多个文件 默认false
maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb
accept: 'image/*',//可上传的图片类型
quality: 0.1,//压缩比 默认0.1 范围0.1-1.0 越小压缩率越大
showsize:false//是否显示原始文件大小 默认false
});
});
</script>
解决方案
安卓不默认优先打开相册,是因为你这input标签的语义化不够清晰吧。
给input标签加个accept,你再看一下。
<input data-LUploader='demo2' data-form-file='basestr' data-upload-type='back' type="file" accept="image/*" />
这篇关于jquery - 如何通过客户端实现h5的上传图片?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文