关于input type=file上传图片的总结
原创
©著作权归作者所有:来自51CTO博客作者﹏の、浅笑的原创作品,请联系作者获取转载授权,否则将追究法律责任
最近比较忙,现在来整理一下近期的成果,方便以后再次使用。
关于图片上传的js 和jq
jq
$("input").change(function () {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL = windowURL.createObjectURL(fileObj.files[0]);
$(this).parent().find('img').attr('src', dataURL);
});
js
input.onchange =function(e){
//e是event对象
e = e || window.event;
//通过event.target.files获取文件列表,通过数组索引的方式去获取列表中的文件
var img1 = e.target.files[0];
//获取url对象
var url = window.url || window.webkitURL;
//通过url对象将二进制文件创建成一个url的格式
var src = url.createObjectURL(img1);
//将获取的二进制对象文件地址 设置为img图片的地址
img.src = src;
//可以手动销毁刚才创建的二进制文件对象
url.revokeObjectURL(img1);
};
同步和表单一起上传
$("input[type=file]").change(function (e) {
var file=this.files[0];
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
console.log(this.result); base64图片编码
$("input[name='uploadFile']").val(this.result);
$(this).parent().find('img').attr('src', this.result);
}
});
图片上传 : 插件上传
layui插件 链接地址 第5个问题
图片选取问题:
当写<input type="file"> 的时候,在IOS上可以成功调起拍照和图库两块,在安卓手机上只能调取图库而没有拍照功能;
解决办法:给input 加上accept属性,加上了capture=camera"属性之后安卓手机就直接调用了相机,没有了图库的选项
<input type="file" accept="image/*" capture="camera"> // 相机
<input type="file" accept="video/*" capture="camcorder"> // 视频
<input type="file" accept="audio/*" capture="microphone"> // 音频
注:capture表示,可以捕获到系统默认的设备,如:camera 照相;camcorder 摄像;microphone 录音。