個人推薦使用formData形式和base64。至於直接用表單上傳，反正我是不用這種的

預覽圖片的方法和base64上傳圖片方法在一起～～～～

上傳方法1.ajax用formData物件上傳

介紹一下formData：FormData物件把資料編譯成鍵值對的形式，用

注意: 1.要將編碼方式(enctype屬性)  設定成 multipart/form-data

            2.不設定內容型別 (contentType: false)

            3.不處理資料 (processData: false)

html程式碼：

 <input accept="image/*"  type="file" id="uploadIMG"  onchange="btnUploadFile(event)"/>
 

js程式碼：

function btnUploadFile(e){

var imgFile = e.target.files[0]; //獲取圖片檔案
var formData = new FormData();  // 建立form物件
formData.append('file', imgFile);  // 通過append向form物件新增資料
formData.append('other', 'other')  // 如果還需要傳替他引數的話
$.ajax({
    url: url, //請求的介面地址
    type: 'POST',
    cache: false, //上傳檔案不需要快取
    data: formData,
    processData: false, // 不要去處理髮送的資料
    contentType: false, // 不要去設定Content-Type請求頭
    success: function(data){
        
    },
    error: function(err){
        console.log(err)
    }
})

}
 

上傳方法2.用base64的方法

<input accept="image/*"  type="file" id="uploadIMG"  onchange="btnUploadFile(event)"/>
<img src="" alt="" id="showIMG">

function btnUploadFile(e,type){
        //獲取圖片
        var files = e.target.files;
        var file = files[0];
        // 接受 jpeg, jpg, png 型別的圖片
        if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){
            return;
        }
        var reader = new FileReader();
        reader.onload = function() { 
            var result = this.result;  //圖片base64字串
            $("#showIMG").attr("src",result);  //展示圖片
        };
        reader.readAsDataURL(file);    //Base64
    }

function (baseIMG){
   $.ajax({
       url: url,  //上傳的地址
       type: "post",
       data: {"imgsrc": baseIMG},
       success: function(data){
        
       }
   })
}