讀取文件文件在網頁上展示並逐條更新

1.首先讀取本地文件

<a src="script;" onClick="downtemplate();">下載文件模板</a>
	<input type="file" id="upfile" />

2.文件格式哪下：

#每一列爲二維碼,每二列爲快遞單號,第三列爲快遞公司名稱
5666161661565,4558755,天天快遞
5666161661565,4558755,韻達快遞
5666161661565,4558755,順豐快遞 

3.從文本文件中讀取值,並判定是不是CVS文件和文件格式是否正確 

function fileSelect3(e) {
    e = e || window.event;

    var files = this.files;
    $('div[name="updateGridId"] tbody tr').remove();
    for(var i = 0, f; f = files[i]; i++) {
    	console.log(f);
    	var fname = f.name.split('.');
    	var exname = fname[fname.length-1];
    	if(exname!='cvs'){
    		layer.msg('文件格式不正確',function(){return false;});
    		return false;
    	}
        var reader = new FileReader();
        reader.onload = (function(file) {
            return function(e) {
                var div = document.createElement('div');
                div.className = "text"
                var temp = this.result.split(/([\n])/g);             
                var count=0;
                for(var ii =0;ii<temp.length;ii++){
                	if(temp[ii].length<2 ||temp[ii] =="" || temp[ii]==" " ){
                		if(ii>5){
                			layer.msg('文件格式不正確',function(){return false;});
                			return false;
                		}
                        continue;
                     }
                	if(ii==0 && temp[ii].indexOf('#') >-1){
            			continue;
            		}
                	if((ii<3) && temp[ii].split(',').length!=3){
                		if(temp[ii].split(',').length!=3){                			
                			layer.msg('文件格式不正確',function(){return false;});
                			return false;
                		}
                	}
                	 if(temp[ii].length<2 ||temp[ii] =="" || temp[ii]==" " ){
                        continue;
                     }
                	 count=count+1;
                	var str=temp[ii].split(',');
                  	 var d ={};
                       d.id=count;                
                       d.qr= str[0];
                       d.exno= str[1];
                       d.exname= str[2];
                       d.act='';
                       var html = template('updaterow', d);
                       $('#updateGridId tbody').append(html);
               }                
                layer.open({
            		type : 1,
            		title : "批量填入快遞單號",
            		area : [ '755px', '400px' ], 
            		shadeClose : true,
            		shade : 0.5,
            		skin : 'layui-layer-rim', // 加上邊框
            		content :$('div[name="updateGridId"]').html(),
            		success: function(layero, index){
            			 $('div[name="updateGridId"] tbody').html('');
            		  }
            	});
                
            }               
        })(f);
        //讀取文件內容
        reader.readAsText(f);
        
    };
}
document.getElementById('upfile').addEventListener('change', fileSelect3, false);

4.更新值

function updateExpressNo(){
	var trs = $('#updateGridId tbody tr');
	trs.each(function(i,e){
		var qr = $(e).find('td[name="qr"]').text().trim();
		var exno = $(e).find('td[name="exno"]').text().trim();
		var exname = $(e).find('td[name="exname"]').text().trim();
		var $act = $(e).find('a[name="act"]');
		sendgoods(qr,exno,exname,$act);	
	});	
}

function sendgoods(code,expressno,expresscompany,obj){
	var data={expressno:expressno,expresscompany:expresscompany,code:code};
	$.ajax({
		url:base + "/template/marketing/sendGoodsSaveByCode.jhtml",
		async:false,
		dataType:'json',
		data:data,
		type:'POST',
		success:function(data){
			if(data.success){
				obj.removeClass('operating-comment').addClass('operating-check');		
			}else{
				obj.removeClass('operating-comment').addClass('operating-trash');	
			}
		}
	});
	
}