最近比较忙,现在来整理一下近期的成果,方便以后再次使用。

 

关于图片上传的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 录音。