javascript - upload form file with ajax -

this question has answer here:

• is possible use ajax file upload? 7 answers

i want upload file , save on server jquery ajax. i've tried didn't work. doesn't want process it. do:

html code

<form action="" method="post" enctype="multipart/form-data">         <input type="file" name="submit_file" id="submit_file" required >         <input type="text" name="submit_message" id="submit_message">            </form>  <a href="javascript:upload();" ><img  src="img/join_btn.png" /></a> 

validation , ajax

<script type="text/javascript">     function upload()     {            var $submit_file = $("#submit_file").val();         var $submit_message = $("#submit_message").val();           if($submit_file == '')         {             alert('please choose picture');             $('#submit_file').focus();             //return false;         }         else if($submit_message == '')         {             alert('please write message');             $('#submit_message').focus();             //return false         }         else         {             uploadfile();         }     } </script>  <script type="text/javascript">     function uploadfile()     {         var $submit_file = '';         var $submit_message = '';          if($("#submit_file").val()) {$submit_file = $("#submit_file").val()};         if($("#submit_message").val()) {$submit_message = $("#submit_message").val()};          $.ajax(              {                 global: false,                 cache: false,                 url: "./proc_intro.php",                 type: "post",                 data:                 {                      submit_file: $submit_file,                     submit_message: $submit_message,                  },                 datatype: "json",                 success: function(json) {                     if (json.result == "success")                      {                         //alert('success');                         settimeout(function(){                             showlayer('main_submit');                         },1000);                     }                     else                     {                         alert('server error');                     }                 }                }         );      } </script> 

proc_intro.php file

<?php     $submit_file = $_request[submit_file];     $submit_message = $_request[submit_message];     $allowed_filetypes = array('.jpg','.gif','.bmp','.png');    $max_filesize = 524288;    $upload_path = './images/';    $filename = $_files[$submit_file]['name'];     $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1);      if(!in_array($ext,$allowed_filetypes))       die('the file attempted upload not allowed.');   if(filesize($_files['submit_file']['tmp_name']) > $max_filesize)       die('the file attempted upload large.');   if(!is_writable($upload_path))       die('you cannot upload specified directory, please chmod 777.');  if(move_uploaded_file($_files['submit_file']['tmp_name'],$upload_path . $filename))    {        echo '{"result":"success"}';    }else    {         echo '{"result":"fail"}';    } ?> 

what can file uploaded correctly using ajax? have idea? thank in advance.

check out

function progresshandlingfunction(e){     if(e.lengthcomputable){         $('progress').attr({value:e.loaded,max:e.total});     } }  function uploadfile() {     var $submit_file = '';     var $submit_message = '';      if($("#submit_file").val()) {$submit_file = $("#submit_file").val()};     if($("#submit_message").val()) {$submit_message = $("#submit_message").val()};    var formdata = new formdata($('form')[0]);     $.ajax(          {             global: false,             cache: false,             url: "./proc_intro.php",             type: "post",             data:   formdata ,             xhr: function() {  // custom xmlhttprequest         var myxhr = $.ajaxsettings.xhr();         if(myxhr.upload){ // check if upload property exists             myxhr.upload.addeventlistener('progress',progresshandlingfunction, false); // handling progress of upload         }         return myxhr;     },     //ajax events   //  beforesend: beforesendhandler,     success:function()     {         alert('success');     },     error: function()     {         alert('error');     },     // form data     //options tell jquery not process data or worry content-type.     cache: false,     contenttype: false,     processdata: false            }     );  }