關於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 錄音。