jquery在尝试从用户那里获取图像以通过ajax将其发送到控制器时抛出-未捕获的类型错误

Question

该脚本在没有html和jquery中的图像标签的情况下工作正常，所以我想问题在于上传图像，不知何故变量没有存储图像以将其发送到控制器类，有人可以告诉我原因以及如何解决这个问题，我是一个新手，试图了解事情背后的原因和解决方案以获得更深入的理解谢谢

load = function(){	
		var checkedName = document.querySelector('input[name="state-name"]:checked'),
		name = checkedName ? checkedName.value : "Nothing selected";
			var cityname=document.getElementById("R_city").value();
			var info=document.getElementById("R_info").value;
			var profilepic=document.getElementById("pic").value();
				document.write("state name"+ name+ "city name"+cityname+"profile pic"+ profilepic+"basic info"+info);}

	data = "";
	 
	myfunction = function(){
		alert("hi inside myfunction");
		 		load();		
				}				
		

<div>
<input type="radio" name="state-name" class="ButtonState" id=" Ontario " value="1" />
<label class="Button" for=" Ontario "> Ontario </label>
<input type="radio" name="state-name" class="ButtonState" checked id=" British Columbia " value="2" />
<label class="Button" for=" British Columbia "> British Columbia </label>
<input type="radio" name="state-name" class="ButtonState" id=" Quebec " value="3" />
<label class="Button" for=" Quebec "> Quebec </label>
<input type="radio" name="state-name" class="ButtonState" id=" Alberta " value="4" />
<label class="Button" for=" Alberta "> Alberta </label>
<input type="radio" name="state-name" class="ButtonState" id=" Nova Scotia " value="5" />
<label class="Button" for=" Nova Scotia "> Nova Scotia </label>
<input type="radio" name="state-name" class="ButtonState" id=" Saskatchewan " value="6" />
<label class="Button" for=" Saskatchewan "> Saskatchewan </label>
<input type="radio" name="state-name" class="ButtonState" id=" Manitoba " value="7" />
<label class="Button" for=" Manitoba "> Manitoba </label>
<input type="radio" name="state-name" class="ButtonState" id=" New Brunswick " value="8" />
<label class="Button" for=" New Brunswick "> New Brunswick </label>
<input type="radio" name="state-name" class="ButtonState" id=" New founded land " value="9" />
<label class="Button" for=" New founded land "> New founded land </label>
<input type="radio" name="state-name" class="ButtonState" id=" Prince Edward Isand " value="10" />
<label class="Button" for=" Prince Edward Isand "> Prince Edward Isand </label>
</div>
<br>
<div> 
<input type="text" required class="input" placeholder="Your city" id="R_city" pattern='[A-Za-z\s]*' title="Must not contain any numbers or special characters" required /><span class="icon"><i class="fa fa-map-marker" style="font-size:36px"></i></span>
<input type="text" required class="input" placeholder="Your address" id="R_address"/><span class="icon"><i class="fa fa-street-view" style="font-size:24px"></i></span>
<input type="text" required class="input" placeholder="About yourself and your work" id="R_info"/><i class="fa fa-file-text" style="font-size:24px"></i>
<input type="file" name="pic" accept="image/*">
</div>
<button onclick="myfunction();">Go</button>
					<table id="table" border=1>
			<tr> <th> Name </th> <th> contact </th> <th> license </th><th> email </th><th> state </th><th> city </th></tr>
		
		</table>		

Answer 1

jQuery.noConflict();    
formdata = new FormData();      
jQuery("#image_to_upload").on("change", function() {
var file = this.files[0];
if (formdata) {
formdata.append("image", file);
jQuery.ajax({
url: "destination_ajax_file.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success:function(){}
});
}                       
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="FILE" id="image_to_upload">