JS/Jquey 文件上傳

1. 單文件上傳

1. js

function postData(){
    // 構參，參數須要{photo: 上傳的文件，service: 'App.Passion.UploadFile', token: 'sdfewdsdfe'}
    // 若是參數只有photo,參數可簡化爲 new FormData($("#photo")[0].files[0]);key值file爲input的name值；
    var formData = new FormData();
    formData.append("photo",$("#photo")[0].files[0]); // $("#photo")[0].files[0]；獲取上傳的文件；單文件上傳
    formData.append("service",'App.Passion.UploadFile');
    formData.append("token",token);
    // 請求
    $.ajax({
        url:'http://www.baidu.com/',
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
            console.log(res.data);
            if(res.data["code"]=="succ"){
                alert('成功');
            }else if(res.data["code"]=="err"){
                alert('失敗');
            }else{
                console.log(res);
            }
        }
    })
}

2.html

<input type="file" title="單文件上傳" name="photo" id="photo" value="" placeholder="免冠照片">

2. 多文件上傳

1. js

$('#photoForm input').change(function() {
    // 構參； 參數值只須要key爲「myfiles」，value爲所選文件的對象；
    var photoForm = $('#photoForm')[0],
    photoFormData = new FormData(photoForm); // 獲取文件列表 $('#photoInput')[0].files;
    // 請求
   $('.loading').show();
    $.ajax({
        type: 'POST',
        url: "/cert/filesUpload",
        data: photoFormData,
        // 告訴jQuery不要去處理髮送的數據
        processData : false,
        // 告訴jQuery不要去設置Content-Type請求頭
        contentType : false,
        complete:function(){
             $('.loading').hide();
             $("#photoForm input").val('');
        },
        success:function(d){
            // 上傳成功後操做。
        }
     });
   });

2. html

<form id="photoForm">
     <input id="photoInput" type="file" title="多文件上傳" name="myfiles" multiple="multiple">照片導入
</form>