关于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插件  链接地址：https://www.cnblogs.com/GoTing/p/8857388.html  第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 录音。