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