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>

3. 應用實例

(1). 圖片上傳成功，獲取圖片屬性

https://github.com/smallwhy/img-load-getattribute

(2). 圖片上傳成功，返回來圖片路徑在本地顯示

    var str = $('<img src="'+服務器返回的圖片路徑+'" onerror="reGetImg(this, \''+服務器返回的圖片路徑+'\')"/>');
    $(elem).next('.img-container').html(str[0]);

    function reGetImg(elem, imgurl) {
        setTimeout(function() {
            $(elem).attr('src',imgurl+'?v='+Math.random());
        }, 2000);
    }