ajax异步上传带文件的表单 http://www.cnblogs.com/gaojun/archive/2012/08/11/2633891.html

<! DOCTYPE  html>

< html >

      <  head >

            <  meta  charset =  "UTF-8" >

            <  title ></ title  >

      

    <  title >Html5 Ajax 上传文件</ title >

    <  script  type =  "text/javascript" >

         function  UpladFile () {

             var  fileObj  =  document .getElementById( "file"  ).files[ 0 ];  // js 获取文件对象

             var  FileController  =  "http://120.24.41.150/jfinal_demo/user/updateuser/"  ;                     // 接收上传文件的后台地址

             // FormData 对象

             var  form  = new  FormData();

            form.append(  "user.id" ,  "1"  );  

            form.append(  "user.email" ,  "hooyes"  ); 

            form.append(  "user.passwd" ,  "hooyes"  ); 

            form.append(  "user.username" ,  "hooyes"  );   // 可以增加表单数据

           

           

           

               form.append( "iconimg"  , fileObj);                            // 文件对象

             // XMLHttpRequest 对象

             var  xhr  = new  XMLHttpRequest ();

             xhr . open  ( "post" ,  FileController ,  true  );

            xhr . onreadystatechange  =  callback ;  //在readystatechange事件上绑定一个函数

        //当接收到数据时,会调用readystatechange事件上的事件处理函数

      

      

           

             xhr.send(form);

           

           

             function  callback () {

              //在这里面没有使用this.readyState这是因为IE下面ActiveXObject的特殊性

              if  (xhr.readyState  ==  4 ) { //readyState表示文档加载进度,4表示完毕

                    alert(xhr.responseText); //responseText属性用来取得返回的文本

                 }

            }

           

        }

     

    </  script >

</ head >

< body >

    <  progress  id =  "progressBar"  value =  "0"  max =  "100" >

    </  progress >

    <  span  id =  "percentage" ></ span  >

    <  br  />

    <  input  type =  "file"  id =  "file"  name =  "myfile"  />

    <  input  type =  "button"  onclick =  " UpladFile ()  "  value =  "上传"  />

</ body >

</ html >