关于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.οnlοad=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个问题 

转载于:https://www.cnblogs.com/GoTing/p/6738975.html