From表单跨域提交文件。

发布于 2022-09-03 14:32:54 字数 5064 浏览 12 评论 0

index.html页

<!DOCTYPE html>
<html>
<head>
    <title>维护</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script type="text/javascript" src="../../common/js/booteasyui.js"></script>
    <script type="text/javascript" src="../../imtpService/js/app.js"></script>
</head>
<body>
<div>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newData()">导入</a>
<div>

这是index.html页的js

 <script type="text/javascript">
    function newData(){
            var url = './updateApp.html';
            openWin(getNoCacheUrl(url),'添加报文');
    }
function openWin2(url,title){
            $('#win2').dialog({
                title: title,
                content:'<iframe src="'+url+'" style="width: 100%; height: 99%;" frameborder="0" name="viewFrame"></iframe>',
                width:750,
                height:'90%', 
                modal:true ,
                collapsible:true,
                //minimizable:true,
                maximizable:true,
                resizable:true,
                buttons:[{
                    text:'关闭',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $('#win2').dialog('close');
                    }
                }]
            });
        }
        </script>
    </body>
    </html>

这个是updateApp.html页

 <!DOCTYPE html>
<html>
<head>
    <title>导入</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script type="text/javascript" src="../../common/js/booteasyui.js"></script>
    <script type="text/javascript" src="../../imtpconfig/js/app.js"></script>
</head>
<body>
    <form id="dataForm" method="post">
        <input name="id" type="hidden">
        <div title="导入">
           <div class="fitem">
                <label>添加:</label>
                <div id="add_imp">
                    <input id="import" type="file">
                </div>
            </div>
            <div class="fitem">
                <div style="width: 40px">
                    <input id="del" type="button" value="清空">
                </div>
            </div>

            <div class="add_msg" style="border: 1px solid #95B8E7;width:600px;display: inline-block;margin: 20px 0 0 60px;height: 150px">        
            </div>


        </div>
    </form>   
 updateApp.html的js;`

$(function(){

            $(document).on("change", "#import", function () {
                var file=$(this).val();
                $(".add_msg").html(file)
            })

            $("#del").click(function(){
                var obj = document.getElementById('add_imp') ;
                obj.outerHTML=obj.outerHTML;
                $(".add_msg").html("");
            })

        var _isClickBtn = false;
        function saveData(){
            if(!$('#dataForm').form('validate'))return false;
            if(_isClickBtn)return;
            _isClickBtn = true;
            var url = '';
            var method = '';
            if(!$('#dataForm input[name="id"]').val()){
                url = MSG_META_CREATEITEM_URI;
                method = POST_METHOD;
            }else{
                url = MSG_META_UPDATEITEMBYID_URI;
                method = PUT_METHOD;
            }
            var postData = $("#dataForm").serializeObject();
            postData = JSON.stringify(postData);
            $.messager.progress({  
                title : '提示',  
                text : '数据处理中，请稍后....'  
            });
            restSet(url, method, postData, function(result){
                _isClickBtn = false;
                if (result.errorInfo){
                    $.messager.show({
                        title: '错误提示',
                        msg: result.errorInfo
                    });
                } else {
                    parent.closeWin();
                }
            });
        }
</script>
</body>
</html>

在上传文件的时候，由于上传为文件的缘故 var postData = $("#dataForm").serializeObject(); 此代码无效，因为上传的文件无法序列化，所以index.html页面的iframe也接收不到文件，故无法进行上传文件大到后台，请问各位大神是否有可行的方案（项目要求后端只提供数据，不做页面跳转。页面跳转只能前端控制）？

分享到QQ

分享到微博