Ajax+formdata+javascript implementation _javascript techniques for non-refreshing form information submission

Principle:

The DOM collects form information, uses Formdata to collect form information quickly, and instantiates form data objects to collect FM form field information at the same time.

var fd = new FORMDATA (FM); Instantiating an Object

alert (FD);

There is a collection of form form field information within the FD object

Ajax delivery Form Information

1. Static Display page code

<! DOCTYPE HTML >  

2.php page Code

Server save attachment name for itself name

Local file------> upload (PHP program processing)------> server

Character set for local file name gb2312

The character set of the PHP program utf-8--->gb2312 (in the program Utf-8 encoded attachment name transcoding to gb2312) server's character set gb2312

<?php
//$_files[' user_pic ' [' Error ']
//0->ok 1-> size exceeds php.ini limit 2-> limit max_file_size 
-> Attachment only uploaded part (incomplete) 4-> did not upload attachment
if ($_files[' user_pic '] [' ERROR ']>0] {
exit (' Upload attachment has problem, there may be no attachment ');
}
The server holds the attachment name for itself
//local file------> upload (PHP program processing)------> Server
//local file name character Set gb2312
//php program's character set Utf-8--->gb2312
//(in the Program Utf-8 encoded attachment name transcoding to gb2312)
/server character Set gb2312
$name = $_files[' user_pic ' [' Name '];
$name = Iconv (' UTF-8 ', ' GB2312 ', $name); $NAME encoding is changed from UTF-8---to--->gb2312
$path = "./upload/";
Attachment upload Logic
//move_uploaded_file (temporary path name, real pathname);
if (Move_uploaded_file ($_files[' user_pic '] [' tmp_name '], $path. $name))
echo "Success";
else
echo "fail";

Here's a look at jquery's implementation of the form form through Ajax without refreshing submission of the instance code.

The code looks like this:

Convert form to Ajax commit
  function Ajaxsubmit (URL,FRM,FN) {
    var datapara=getformjson (frm);
    $.ajax ({
      url:url,
      type: "Post",
      Data:datapara,
      async:false,
      dataType: ' txt ',
      success : FN
    });
  Converts a value in a form to a key value pair
  function Getformjson (frm) {
    var o={};
    var a=$ (frm). Serializearray ();
    $.each (A,function () {
      if (o[this.name]!==undefined) {
        if (!o[this.name].push) {
          o[this.name]=[o[ THIS.name]];
        }
        O[this.name].push (This.value | | '');
      } else{
        O[this.name]=this.value | | '';
      }
    });
    return o;
  }
//
  /Foreground call mode
  function Autosubmitfun () {
     ajaxsubmit ("Autosumitscoreajax.action", $ (' #formId '), function () {});
*/

The above is a small set of ajax+formdata+javascript to introduce the implementation of no refresh form information submitted, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!