H5端js触发input file权限问题和图片选择预览

近日复习熟悉前端知识,发现一件事情很有趣。

页面隐藏input file,然后用js来触发,10年前在PC页面就开始用了,不算新知识,但ios会没响应,查找资料发现这样操作是个安全问题,官方是不推荐的,后来在网上看到一个巧妙的解决方式,为input file增加一个label,如<label for=”input1″/>用js触发这个label的事件来激活input file。

 

另一件事,是input选择完后,用jqueryupload上传成功了,但页面的image.src修改为服务器端地址后,会很长时间才加载,5秒以上,查找网上资料,发现这段代码简直是神级代码:
function readURL(input) {

if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$(‘#blah’).attr(‘src’, e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}

$(“#imgInp”).change(function(){
readURL(this);
});
对应的HTML:


your image

用了这段代码之后,加载迅速。。。
代码原帖地址:https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

Comments

So empty here ... leave a comment!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Sidebar