input的file名改变与值获取

最新推荐文章于 2022-12-30 14:55:15 发布

即刻出发

最新推荐文章于 2022-12-30 14:55:15 发布

阅读量917

点赞数

CC 4.0 BY-SA版权

分类专栏： javaweb开发

本文链接：https://blog.youkuaiyun.com/a468903507/article/details/12198209

javaweb开发专栏收录该内容

104 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的文件上传功能，该功能能够处理文件的选择与提交，并通过iframe接收服务器端返回的数据。服务器返回的数据会被解析并展示在页面上。

<form id="file_form" name="file_form" method="post" action="/syydyjpt/action/operate!importMobile" target="file_upload_return" enctype="multipart/form-data">
           <input type="file" name="upload" id="upload_file" style="display:none;" onChange="document.form1.path.value=this.value">        
           <input name="path" type="hidden" readonly>
           <a class="easyui-linkbutton" onclick="document.file_form.upload.click()">导入手机号</a>
           </form>

$(document).ready(function(){

    //选择文件成功则提交表单

    $("#upload_file").change(function(){

        if($("#upload_file").val() != '') $("#file_form").submit();
        //alert($("#file_form").serialize())

    });

    //iframe加载响应，初始页面时也有一次，此时data为null。

    $("#file_upload_return").load(function(){

        var data = $(window.frames['file_upload_return'].document.body).html();
        //若iframe携带返回数据，则显示在file_upload_return_img中
        if(data != null){
           data = data.replace(/<.*?>/ig,"");
           data = eval("("+data+")");
           data = data["data"];
           excelname = data.toString();
           //alert(excelname);

           var b = excelname.split(",");
           //alert(b.length);
           var item = "";
           var itemstr="";
           $.each(b,function(i,j) {
               item ={'mobile':j,'id':i,'name':'无','depname':'无'};
               item = JSON.stringify(item);
               itemstr=itemstr+item+',';
           });

           itemstr = '['+itemstr+']';
           //alert(itemstr)
           itemstr = eval("("+itemstr+")");;
           $.each(itemstr,function(i,j){
               $('#group_table').datagrid("appendRow",j);
           });

            $("#upload_file").val('');
        }

    });

});