Question

好吧所以它的相同但不完全。我有一个函数和变量需要移出document.ready函数

这是我的错误;

未捕获的ReferenceError：未定义ValidateFile 我已经看过这个问题的其他解决方案，但没有一个适合我。

如果我将函数ValidateFile（）移动到head部分，那么我会收到一个未定义类型的错误。

我错过了什么？这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Choose a file to upload</title>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">

<script type="text/javascript">

$(document).ready(function(){

    var file;
    var name; 
    var size;
    var type;

 window.addEventListener('message',function(event) {
    //if(event.origin !== 'http://demo.dev) return;
        alert('message received:  ' + event.data,event);
        event.source.postMessage('hola back !',event.origin);
    },false);
$('progress').hide();
$('#pleasewait').hide();

function ValidateFile(){
    var formData = new FormData($('form')[0]);
    var str=type.substring(0,5);
    if (str!='image'){
        alert( 'the file '+ name +' is not a valid image, Please upload only image files, thank you. The management!');
    }else{
        //alert(' I got the file : ' + formData + ' file: ' +file+' name: '+name+' size: '+size+' type: '+type );
        $('progress').show();
        $('#pleasewait').show();
    }
}

$(':file').change(function(){
    file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
}); 

});

</script>
<p><h1>Choose a file to upload</h1></p>
<form name="UploadForm" enctype="multipart/form-data" class="form" action="/api/v2/process_images" method="post" onsubmit="javascript: return ValidateFile();" >
File: <input type="file" name="file1" />


<input type="submit" value="upload" id="upload_image"/>
</form>
<progress ></progress>
        &nbsp;&nbsp;
    <h4 id='pleasewait'>Please wait a few seconds. Uploading and spliting your image into different sizes</h4>


</body>
</html>

Answer 1

您的函数是在$(document).ready()回调范围内定义的，无法从外部看到。在$(document).ready()范围内定义仅在内部调用它的函数。

将你的ValidateFile()放在document.ready的一边

Answer 2

试

<script type="text/javascript">
   var file;
    var name; 
    var size;
    var type;
function ValidateFile(){
    var formData = new FormData($('form')[0]);
    var str=type.substring(0,5);
    if (str!='image'){
        alert( 'the file '+ name +' is not a valid image, Please upload only image files, thank you. The management!');
    }else{
        //alert(' I got the file : ' + formData + ' file: ' +file+' name: '+name+' size: '+size+' type: '+type );
        $('progress').show();
        $('#pleasewait').show();
    }
}

$(document).ready(function(){



 window.addEventListener('message',function(event) {
    //if(event.origin !== 'http://demo.dev) return;
        alert('message received:  ' + event.data,event);
        event.source.postMessage('hola back !',event.origin);
    },false);
$('progress').hide();
$('#pleasewait').hide();



$(':file').change(function(){
    file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
}); 

});

</script>

未捕获的ReferenceError：未定义onsubmit函数

2 个答案: