关于input type=file上传图片的总结

关于input type=file上传图片的总结

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

关于图片上传的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个问题

图片选取问题：

当写 的时候，在IOS上可以成功调起拍照和图库两块，在安卓手机上只能调取图库而没有拍照功能；解决办法：给input 加上accept属性，加上了capture=camera"属性之后安卓手机就直接调用了相机，没有了图库的选项

// 相机 // 视频 // 音频

注：capture表示，可以捕获到系统默认的设备，如：camera 照相；camcorder 摄像；microphone 录音。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。