input文件上传，修改样式以及限制文件格式

<form id="importForm" class="form-horizontal" action="../image/uploadimg.shtml" method="post" enctype="multipart/form-data" style="margin:0;">
     <div class="textfile-box" style="display:inline-block;margin-right:5px;position:relative;">
        <input type='text' style="width:140px;" readonly name='textfield' id='textfield' class='txt' /> 
        <input type='button' class='btn btn-primary' value='浏览..' /> 
        <input type="file" style="position:absolute;width:70px;top:0;right:0;opacity:0;alpha(opacity=0);" id="myfile" name="myfile" required accept=".csv" onchange="document.getElementById('textfield').value=this.value"  />
      </div>
      <input type="submit" name="submit" id="submitBtn" class="btn btn-warning" value="导入文件" />
</form>    
<div class="import-result">
 　　<p class="result-text">请导入数据，<span style="color:#f0ad4e;">（注意：导入的文件格式为.csv）</span></p>
 </div>

//导入文件
        $("#importForm").on('submit', function(e) {
            e.preventDefault(); 
            $('#importForm').ajaxSubmit({
                success : function(data) {
                    if (data.flag == 1) {
                        $(".result-text").addClass("success-text").removeClass("error-text").html("导入成功,<a href='/jxs/jsp.shtml?dir=people/student/train-import-list'>查询导入数据</a>");
                    } else {
                        $(".result-text").addClass("error-text").removeClass("success-text").html("导入失败<br/>"+data.msg);
                    }
                }
            });
            return false;
        });

 

转载于:https://www.cnblogs.com/fangdx/p/4899933.html