js文件上傳

DOM:

<form id="clueForm" class="insert-dialog" action="/xxx/xxx"method="post" enctype="multipart/form-data" target="hidFrame">
    <a href="javascript:void(0)" class="uploadBtn">上傳</a>
    <input type="file" id="fileUpload" name="file" style="display:none"/>
    <iframe id="hidFrame" name="hidFrame" style="display: none"></iframe>
</form>

注：hidden的input和iframe.

　　input type設置成file，click后調起窗口選擇文件。選完后數據流存在input的value中。

　　hidden的iframe用於form提交后的callback。

JS:

var _file = '';

$('#fileUpload').change(function(e){
    var files = e.target.files;
    if(files && files.length > 0){
        var reader = new FileReader();
        //讀取文件
        reader.readAsText(files[0], "UTF-8");
        //讀取完文件之后會回來這里
        reader.onload = function(evt){
           var fileString = evt.target.result;
           _file = fileString;
        };
    }
    
    var filename = $(this).val();
    var lastIndex =filename.lastIndexOf("\\");
    if(lastIndex >= 0){
        filename = filename.substring(lastIndex + 1);
    }
    //文件名
    $('XXXXXXX').val(filename);
});

// 確定button
$('#clueForm').on('click', '#uploadBtn', function(){
    //data test
    if(!$('#clueForm').find('.dialogUpload :file').val()){
        alert('請先上傳文件');
    }else{
        $('#clueForm').submit();
    }
});
//模仿callback
document.getElementById('hidFrame').onload = function(e) {
    var res = $(this.contentWindow.document.body).html();
    res = JSON.parse(res);
    alert(res);
};

 

注：input選擇完文件后會觸發change事件。

　　reader.readAsText(files[0], "UTF-8")來讀取文件。

　　上傳用的是form的submit，數據格式multipart/form-data。

　　關於post后的callback，是通過觸發form的target。target指向一個hidden的iframe，用來刷新。response會寫入iframe中。

 

 

補充： 前幾天（Time: 2017/04/04）看到的博客，記錄 => http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html