zoukankan      html  css  js  c++  java
  • 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="140px;" readonly name='textfield' id='textfield' class='txt' /> 
            <input type='button' class='btn btn-primary' value='浏览..' /> 
            <input type="file" style="position:absolute;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;
            });
  • 相关阅读:
    qt5--数据类型转换
    qt5-QWidget坐标系统和大小和展示区域
    qt5---布局
    qt5-信号和槽
    tomcat中文请求乱码问题
    centos安装ab测试工具
    golang学习之go简单博客应用
    nodejs的jsonrpc调用
    centos下mongodb安装
    使用connect-multiparty限制nodejs图片上传
  • 原文地址:https://www.cnblogs.com/fangdx/p/4899933.html
Copyright © 2011-2022 走看看