Home  >  Article  >  Backend Development  >  AJAX upload image without refresh_PHP tutorial

AJAX upload image without refresh_PHP tutorial

WBOY
WBOYOriginal
2016-07-20 11:14:111186browse

The directory structure is as follows:

The uploaded images are stored in the files folder.

The index.html code is as follows:

fef50554eca1a427827adaa329da8122
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
09477266eebbc8a01f42387ae29e71dd
080b747a20f9163200dd0a7d304ba388
.demo{width:620px; margin:30px auto}
.demo p{line-height:32px}
.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
.files{height:22px; line-height:22px; margin:10px 0}
.delimg{margin-left:20px; color:#090; cursor:pointer}
531ac245ce3e4fe3d50054a55f265927
d1a09040b52236b0be6fe62e4d3cacd72cacc6d41bbb37262a98f745aa00fbf0
4c0a383c4ab8af673f8849229aba90d62cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
a32635fbe18aba010f3b1ca3feecdbf6-->
bd3a1c781483b467a01673bc18accea3
df4f702480f95f1f20ba9150dc541e6f       
        fe887e478549a95d25c89e308236bf36
        c1c61d49b68cfb1f9ee73d3d1eb77395上传54bdf357c58b8a65c66d7c19c8e4d114
54bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3
2d3391024e201155595cc6db6bbb6728-->
4ec11beb6c39d0703d1751d203c17053
$(function () {
    var bar = $('.bar');
    var percent = $('.percent');
    var showimg = $('#showimg');
    var progress = $(".progress");
    var files = $(".files");
    var btn = $(".btn span");
    $("p").wrap("fa646a9da2352625aef291197e4d9436f5a47148e367a6035fd7a2faa965022e");
    $("#fileupload").change(function(){
        $("#myupload").ajaxSubmit({
            dataType:  'json',
            beforeSend: function() {
                showimg.empty();
                progress.show();
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
                btn.html("上传中...");
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            success: function(data) {
                files.html("a4b561c25d9afb9ac8dc4d70affff419"+data.name+"("+data.size+"k)0d36329ec37a2cc24d42c7229b69747a aeab45becfed1c51cef71b26e3251099删除54bdf357c58b8a65c66d7c19c8e4d114");
                var img = "http://demo.helloweba.com/upload/files/"+data.pic;
                showimg.html("dda1a4ff96537bda9592dc888e70f0b4");
                btn.html("添加附件");
            },
error:function(xhr){
btn.html("Upload failed");
bar.width('0')
files.html(xhr.responseText);
}
});
});

$(".delimg").live('click',function(){
var pic = $(this).attr("rel") ;
$.post("action.php?act=delimg",{imagename:pic},function(msg){
if(msg==1){
files.html("Deleted successfully .");
showimg.empty();
progress.hide();
}else{
alert(msg);
                                                                                                      );
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

jquery.form.js code is as follows:

<span /*</span><span !
 * jQuery Form Plugin
 * version: 3.15 (09-SEP-2012)
 * @requires jQuery v1.3.2 or later
 *
 * Examples and documentation at: http://malsup.com/jquery/form/
 * Project repository: https://github.com/malsup/form
 * Dual licensed under the MIT and GPL licenses:
 *    http://malsup.github.com/mit-license.txt
 *    http://malsup.github.com/gpl-license-v2.txt
 </span><span */</span>
<span /*</span><span global ActiveXObject alert </span><span */</span><span 
;(</span><span function</span><span ($) {
</span>"use strict"<span ;

</span><span /*</span><span 
    Usage Note:
    -----------
    Do not use both ajaxSubmit and ajaxForm on the same form.  These
    functions are mutually exclusive.  Use ajaxSubmit if you want
    to bind your own submit handler to the form.  For example,

    $(document).ready(function() {
        $('#myForm').on('submit', function(e) {
            e.preventDefault(); // <-- important
            $(this).ajaxSubmit({
                target: '#output'
            });
        });
    });

    Use ajaxForm when you want the plugin to manage all the event binding
    for you.  For example,

    $(document).ready(function() {
        $('#myForm').ajaxForm({
            target: '#output'
        });
    });
    
    You can also use ajaxForm with delegation (requires jQuery v1.7+), so the
    form does not have to exist when you invoke ajaxForm:

    $('#myForm').ajaxForm({
        delegation: true,
        target: '#output'
    });
    
    When using ajaxForm, the ajaxSubmit function will be invoked for you
    at the appropriate time.
</span><span */</span>

<span /*</span><span *
 * Feature detection
 </span><span */</span>
<span var</span> feature =<span  {};
feature.fileapi </span>= $("<input type='file'/>").get(0).files !==<span  undefined;
feature.formdata </span>= window.FormData !==<span  undefined;

</span><span /*</span><span *
 * ajaxSubmit() provides a mechanism for immediately submitting
 * an HTML form using AJAX.
 </span><span */</span><span 
$.fn.ajaxSubmit </span>= <span function</span><span (options) {
    </span><span /*</span><span jshint scripturl:true </span><span */</span>

    <span //</span><span  fast fail if nothing selected (http://dev.jquery.com/ticket/2752)</span>
    <span if</span> (!<span this</span><span .length) {
        log(</span>'ajaxSubmit: skipping submit process - no element selected'<span );
        </span><span return</span> <span this</span><span ;
    }
    
    </span><span var</span> method, action, url, $form = <span this</span><span ;

    </span><span if</span> (<span typeof</span> options == 'function'<span ) {
        options </span>=<span  { success: options };
    }

    method </span>= <span this</span>.attr('method'<span );
    action </span>= <span this</span>.attr('action'<span );
    url </span>= (<span typeof</span> action === 'string') ? $.trim(action) : ''<span ;
    url </span>= url || window.location.href || ''<span ;
    </span><span if</span><span  (url) {
        </span><span //</span><span  clean url (don't include hash vaue)</span>
        url = (url.match(/^([^#]+)/)||[])[1<span ];
    }

    options </span>= $.extend(<span true</span><span , {
        url:  url,
        success: $.ajaxSettings.success,
        type: method </span>|| 'GET'<span ,
        iframeSrc: </span>/^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank'<span 
    }, options);

    </span><span //</span><span  hook for manipulating the form data before it is extracted;</span>
    <span //</span><span  convenient for use with rich editors like tinyMCE or FCKEditor</span>
    <span var</span> veto =<span  {};
    </span><span this</span>.trigger('form-pre-serialize', [<span this</span><span , options, veto]);
    </span><span if</span><span  (veto.veto) {
        log(</span>'ajaxSubmit: submit vetoed via form-pre-serialize trigger'<span );
        </span><span return</span> <span this</span><span ;
    }

    </span><span //</span><span  provide opportunity to alter form data before it is serialized</span>
    <span if</span> (options.beforeSerialize && options.beforeSerialize(<span this</span>, options) === <span false</span><span ) {
        log(</span>'ajaxSubmit: submit aborted via beforeSerialize callback'<span );
        </span><span return</span> <span this</span><span ;
    }

    </span><span var</span> traditional =<span  options.traditional;
    </span><span if</span> ( traditional ===<span  undefined ) {
        traditional </span>=<span  $.ajaxSettings.traditional;
    }
    
    </span><span var</span> elements =<span  [];
    </span><span var</span> qx, a = <span this</span><span .formToArray(options.semantic, elements);
    </span><span if</span><span  (options.data) {
        options.extraData </span>=<span  options.data;
        qx </span>=<span  $.param(options.data, traditional);
    }

    </span><span //</span><span  give pre-submit callback an opportunity to abort the submit</span>
    <span if</span> (options.beforeSubmit && options.beforeSubmit(a, <span this</span>, options) === <span false</span><span ) {
        log(</span>'ajaxSubmit: submit aborted via beforeSubmit callback'<span );
        </span><span return</span> <span this</span><span ;
    }

    </span><span //</span><span  fire vetoable 'validate' event</span>
    <span this</span>.trigger('form-submit-validate', [a, <span this</span><span , options, veto]);
    </span><span if</span><span  (veto.veto) {
        log(</span>'ajaxSubmit: submit vetoed via form-submit-validate trigger'<span );
        </span><span return</span> <span this</span><span ;
    }

    </span><span var</span> q =<span  $.param(a, traditional);
    </span><span if</span><span  (qx) {
        q </span>= ( q ? (q + '&' +<span  qx) : qx );
    }    
    </span><span if</span> (options.type.toUpperCase() == 'GET'<span ) {
        options.url </span>+= (options.url.indexOf('?') >= 0 ? '&' : '?') +<span  q;
        options.data </span>= <span null</span>;  <span //</span><span  data is null for 'get'</span>
<span     }
    </span><span else</span><span  {
        options.data </span>= q; <span //</span><span  data is the query string for 'post'</span>
<span     }

    </span><span var</span> callbacks =<span  [];
    </span><span if</span><span  (options.resetForm) {
        callbacks.push(</span><span function</span><span () { $form.resetForm(); });
    }
    </span><span if</span><span  (options.clearForm) {
        callbacks.push(</span><span function</span><span () { $form.clearForm(options.includeHidden); });
    }

    </span><span //</span><span  perform a load on the target only if dataType is not provided</span>
    <span if</span> (!options.dataType &&<span  options.target) {
        </span><span var</span> oldSuccess = options.success || <span function</span><span (){};
        callbacks.push(</span><span function</span><span (data) {
            </span><span var</span> fn = options.replaceTarget ? 'replaceWith' : 'html'<span ;
            $(options.target)[fn](data).each(oldSuccess, arguments);
        });
    }
    </span><span else</span> <span if</span><span  (options.success) {
        callbacks.push(options.success);
    }

    options.success </span>= <span function</span>(data, status, xhr) { <span //</span><span  jQuery 1.4+ passes xhr as 3rd arg</span>
        <span var</span> context = options.context || <span this</span> ;    <span //</span><span  jQuery 1.4+ supports scope context </span>
        <span for</span> (<span var</span> i=0, max=callbacks.length; i < max; i++<span ) {
            callbacks[i].apply(context, [data, status, xhr </span>||<span  $form, $form]);
        }
    };

    </span><span //</span><span  are there files to upload?</span>
    <span var</span> fileInputs = $('input:file:enabled[value]', <span this</span>); <span //</span><span  [value] (issue #113)</span>
    <span var</span> hasFileInputs = fileInputs.length > 0<span ;
    </span><span var</span> mp = 'multipart/form-data'<span ;
    </span><span var</span> multipart = ($form.attr('enctype') == mp || $form.attr('encoding') ==<span  mp);

    </span><span var</span> fileAPI = feature.fileapi &&<span  feature.formdata;
    log(</span>"fileAPI :" +<span  fileAPI);
    </span><span var</span> shouldUseFrame = (hasFileInputs || multipart) && !<span fileAPI;

    </span><span //</span><span  options.iframe allows user to force iframe mode</span>
    <span //</span><span  06-NOV-09: now defaulting to iframe mode if file input is detected</span>
    <span if</span> (options.iframe !== <span false</span> && (options.iframe ||<span  shouldUseFrame)) {
        </span><span //</span><span  hack to fix Safari hang (thanks to Tim Molendijk for this)</span>
        <span //</span><span  see:  http://groups.google.com/group/jquery-dev/browse_thread/thread/36395b7ab510dd5d</span>
        <span if</span><span  (options.closeKeepAlive) {
            $.get(options.closeKeepAlive, </span><span function</span><span () {
                fileUploadIframe(a);
            });
        }
          </span><span else</span><span  {
            fileUploadIframe(a);
          }
    }
    </span><span else</span> <span if</span> ((hasFileInputs || multipart) &&<span  fileAPI) {
        fileUploadXhr(a);
    }
    </span><span else</span><span  {
        $.ajax(options);
    }

    </span><span //</span><span  clear element array</span>
    <span for</span> (<span var</span> k=0; k < elements.length; k++<span )
        elements[k] </span>= <span null</span><span ;

    </span><span //</span><span  fire 'notify' event</span>
    <span this</span>.trigger('form-submit-notify', [<span this</span><span , options]);
    </span><span return</span> <span this</span><span ;

    </span><span //</span><span  utility fn for deep serialization</span>
    <span function</span><span  deepSerialize(extraData){
        </span><span var</span> serialized = $.param(extraData).split('&'<span );
        </span><span var</span> len =<span  serialized.length;
        </span><span var</span> result =<span  {};
        </span><span var</span><span  i, part;
        </span><span for</span> (i=0; i < len; i++<span ) {
            part </span>= serialized[i].split('='<span );
            result[decodeURIComponent(part[</span>0])] = decodeURIComponent(part[1<span ]);
        }
        </span><span return</span><span  result;
    }

     </span><span //</span><span  XMLHttpRequest Level 2 file uploads (big hat tip to francois2metz)</span>
    <span function</span><span  fileUploadXhr(a) {
        </span><span var</span> formdata = <span new</span><span  FormData();

        </span><span for</span> (<span var</span> i=0; i < a.length; i++<span ) {
            formdata.append(a[i].name, a[i].value);
        }

        </span><span if</span><span  (options.extraData) {
            </span><span var</span> serializedData =<span  deepSerialize(options.extraData);
            </span><span for</span> (<span var</span> p <span in</span><span  serializedData)
                </span><span if</span><span  (serializedData.hasOwnProperty(p))
                    formdata.append(p, serializedData[p]);
        }

        options.data </span>= <span null</span><span ;

        </span><span var</span> s = $.extend(<span true</span><span , {}, $.ajaxSettings, options, {
            contentType: </span><span false</span><span ,
            processData: </span><span false</span><span ,
            cache: </span><span false</span><span ,
            type: </span>'POST'<span 
        });
        
        </span><span if</span><span  (options.uploadProgress) {
            </span><span //</span><span  workaround because jqXHR does not expose upload property</span>
            s.xhr = <span function</span><span () {
                </span><span var</span> xhr =<span  jQuery.ajaxSettings.xhr();
                </span><span if</span><span  (xhr.upload) {
                    xhr.upload.onprogress </span>= <span function</span><span (event) {
                        </span><span var</span> percent = 0<span ;
                        </span><span var</span> position = event.loaded || event.position; <span /*</span><span event.position is deprecated</span><span */</span>
                        <span var</span> total =<span  event.total;
                        </span><span if</span><span  (event.lengthComputable) {
                            percent </span>= Math.ceil(position / total * 100<span );
                        }
                        options.uploadProgress(event, position, total, percent);
                    };
                }
                </span><span return</span><span  xhr;
            };
        }

        s.data </span>= <span null</span><span ;
            </span><span var</span> beforeSend =<span  s.beforeSend;
            s.beforeSend </span>= <span function</span><span (xhr, o) {
                o.data </span>=<span  formdata;
                </span><span if</span><span (beforeSend)
                    beforeSend.call(</span><span this</span><span , xhr, o);
        };
        $.ajax(s);
    }

    </span><span //</span><span  private function for handling file uploads (hat tip to YAHOO!)</span>
    <span function</span><span  fileUploadIframe(a) {
        </span><span var</span> form = $form[0<span ], el, i, s, g, id, $io, io, xhr, sub, n, timedOut, timeoutHandle;
        </span><span var</span> useProp = !!<span $.fn.prop;

        </span><span if</span> ($(':input[name=submit],:input[id=submit]'<span , form).length) {
            </span><span //</span><span  if there is an input with a name or id of 'submit' then we won't be</span>
            <span //</span><span  able to invoke the submit fn on the form (at least not x-browser)</span>
            alert('Error: Form elements must not have name or id of "submit".'<span );
            </span><span return</span><span ;
        }
        
        </span><span if</span><span  (a) {
            </span><span //</span><span  ensure that every serialized input is still enabled</span>
            <span for</span> (i=0; i < elements.length; i++<span ) {
                el </span>=<span  $(elements[i]);
                </span><span if</span><span  ( useProp )
                    el.prop(</span>'disabled', <span false</span><span );
                </span><span else</span><span 
                    el.removeAttr(</span>'disabled'<span );
            }
        }

        s </span>= $.extend(<span true</span><span , {}, $.ajaxSettings, options);
        s.context </span>= s.context ||<span  s;
        id </span>= 'jqFormIO' + (<span new</span><span  Date().getTime());
        </span><span if</span><span  (s.iframeTarget) {
            $io </span>=<span  $(s.iframeTarget);
            n </span>= $io.attr('name'<span );
            </span><span if</span> (!<span n)
                 $io.attr(</span>'name'<span , id);
            </span><span else</span><span 
                id </span>=<span  n;
        }
        </span><span else</span><span  {
            $io </span>= $('<iframe name="' + id + '" src="'+ s.iframeSrc +'" />'<span );
            $io.css({ position: </span>'absolute', top: '-1000px', left: '-1000px'<span  });
        }
        io </span>= $io[0<span ];


        xhr </span>= { <span //</span><span  mock object</span>
            aborted: 0<span ,
            responseText: </span><span null</span><span ,
            responseXML: </span><span null</span><span ,
            status: </span>0<span ,
            statusText: </span>'n/a'<span ,
            getAllResponseHeaders: </span><span function</span><span () {},
            getResponseHeader: </span><span function</span><span () {},
            setRequestHeader: </span><span function</span><span () {},
            abort: </span><span function</span><span (status) {
                </span><span var</span> e = (status === 'timeout' ? 'timeout' : 'aborted'<span );
                log(</span>'aborting upload... ' +<span  e);
                </span><span this</span>.aborted = 1<span ;
                </span><span //</span><span  #214</span>
                <span if</span><span  (io.contentWindow.document.execCommand) {
                    </span><span try</span> { <span //</span><span  #214</span>
                        io.contentWindow.document.execCommand('Stop'<span );
                    } </span><span catch</span><span (ignore) {}
                }
                $io.attr(</span>'src', s.iframeSrc); <span //</span><span  abort op in progress</span>
                xhr.error =<span  e;
                </span><span if</span><span  (s.error)
                    s.error.call(s.context, xhr, e, status);
                </span><span if</span><span  (g)
                    $.event.trigger(</span>"ajaxError"<span , [xhr, s, e]);
                </span><span if</span><span  (s.complete)
                    s.complete.call(s.context, xhr, e);
            }
        };

        g </span>=<span  s.global;
        </span><span //</span><span  trigger ajax global events so that activity/block indicators work like normal</span>
        <span if</span> (g && 0 === $.active++<span ) {
            $.event.trigger(</span>"ajaxStart"<span );
        }
        </span><span if</span><span  (g) {
            $.event.trigger(</span>"ajaxSend"<span , [xhr, s]);
        }

        </span><span if</span> (s.beforeSend && s.beforeSend.call(s.context, xhr, s) === <span false</span><span ) {
            </span><span if</span><span  (s.global) {
                $.active</span>--<span ;
            }
            </span><span return</span><span ;
        }
        </span><span if</span><span  (xhr.aborted) {
            </span><span return</span><span ;
        }

        </span><span //</span><span  add submitting element to data if we know it</span>
        sub =<span  form.clk;
        </span><span if</span><span  (sub) {
            n </span>=<span  sub.name;
            </span><span if</span> (n && !<span sub.disabled) {
                s.extraData </span>= s.extraData ||<span  {};
                s.extraData[n] </span>=<span  sub.value;
                </span><span if</span> (sub.type == "image"<span ) {
                    s.extraData[n</span>+'.x'] =<span  form.clk_x;
                    s.extraData[n</span>+'.y'] =<span  form.clk_y;
                }
            }
        }
        
        </span><span var</span> CLIENT_TIMEOUT_ABORT = 1<span ;
        </span><span var</span> SERVER_ABORT = 2<span ;

        </span><span function</span><span  getDoc(frame) {
            </span><span var</span> doc = frame.contentWindow ? frame.contentWindow.document : frame.contentDocument ?<span  frame.contentDocument : frame.document;
            </span><span return</span><span  doc;
        }
        
        </span><span //</span><span  Rails CSRF hack (thanks to Yvan Barthelemy)</span>
        <span var</span> csrf_token = $('meta[name=csrf-token]').attr('content'<span );
        </span><span var</span> csrf_param = $('meta[name=csrf-param]').attr('content'<span );
        </span><span if</span> (csrf_param &&<span  csrf_token) {
            s.extraData </span>= s.extraData ||<span  {};
            s.extraData[csrf_param] </span>=<span  csrf_token;
        }

        </span><span //</span><span  take a breath so that pending repaints get some cpu time before the upload starts</span>
        <span function</span><span  doSubmit() {
            </span><span //</span><span  make sure form attrs are set</span>
            <span var</span> t = $form.attr('target'), a = $form.attr('action'<span );

            </span><span //</span><span  update form attrs in IE friendly way</span>
            form.setAttribute('target'<span ,id);
            </span><span if</span> (!<span method) {
                form.setAttribute(</span>'method', 'POST'<span );
            }
            </span><span if</span> (a !=<span  s.url) {
                form.setAttribute(</span>'action'<span , s.url);
            }

            </span><span //</span><span  ie borks in some cases when setting encoding</span>
            <span if</span> (! s.skipEncodingOverride && (!method || /post/<span i.test(method))) {
                $form.attr({
                    encoding: </span>'multipart/form-data'<span ,
                    enctype:  </span>'multipart/form-data'<span 
                });
            }

            </span><span //</span><span  support timout</span>
            <span if</span><span  (s.timeout) {
                timeoutHandle </span>= setTimeout(<span function</span>() { timedOut = <span true</span><span ; cb(CLIENT_TIMEOUT_ABORT); }, s.timeout);
            }
            
            </span><span //</span><span  look for server aborts</span>
            <span function</span><span  checkState() {
                </span><span try</span><span  {
                    </span><span var</span> state =<span  getDoc(io).readyState;
                    log(</span>'state = ' +<span  state);
                    </span><span if</span> (state && state.toLowerCase() == 'uninitialized'<span )
                        setTimeout(checkState,</span>50<span );
                }
                </span><span catch</span><span (e) {
                    log(</span>'Server abort: ' , e, ' (', e.name, ')'<span );
                    cb(SERVER_ABORT);
                    </span><span if</span><span  (timeoutHandle)
                        clearTimeout(timeoutHandle);
                    timeoutHandle </span>=<span  undefined;
                }
            }

            </span><span //</span><span  add "extra" data to form if provided in options</span>
            <span var</span> extraInputs =<span  [];
            </span><span try</span><span  {
                </span><span if</span><span  (s.extraData) {
                    </span><span for</span> (<span var</span> n <span in</span><span  s.extraData) {
                        </span><span if</span><span  (s.extraData.hasOwnProperty(n)) {
                           </span><span //</span><span  if using the $.param format that allows for multiple values with the same name</span>
                           <span if</span>($.isPlainObject(s.extraData[n]) && s.extraData[n].hasOwnProperty('name') && s.extraData[n].hasOwnProperty('value'<span )) {
                               extraInputs.push(
                               $(</span>'<input type="hidden" name="'+s.extraData[n].name+'">').attr('value'<span ,s.extraData[n].value)
                                   .appendTo(form)[</span>0<span ]);
                           } </span><span else</span><span  {
                               extraInputs.push(
                               $(</span>'<input type="hidden" name="'+n+'">').attr('value'<span ,s.extraData[n])
                                   .appendTo(form)[</span>0<span ]);
                           }
                        }
                    }
                }

                </span><span if</span> (!<span s.iframeTarget) {
                    </span><span //</span><span  add iframe to doc and submit the form</span>
                    $io.appendTo('body'<span );
                    </span><span if</span><span  (io.attachEvent)
                        io.attachEvent(</span>'onload'<span , cb);
                    </span><span else</span><span 
                        io.addEventListener(</span>'load', cb, <span false</span><span );
                }
                setTimeout(checkState,</span>15<span );
                form.submit();
            }
            </span><span finally</span><span  {
                </span><span //</span><span  reset attrs and remove "extra" input elements</span>
                form.setAttribute('action'<span ,a);
                </span><span if</span><span (t) {
                    form.setAttribute(</span>'target'<span , t);
                } </span><span else</span><span  {
                    $form.removeAttr(</span>'target'<span );
                }
                $(extraInputs).remove();
            }
        }

        </span><span if</span><span  (s.forceSync) {
            doSubmit();
        }
        </span><span else</span><span  {
            setTimeout(doSubmit, </span>10); <span //</span><span  this lets dom updates render</span>
<span         }

        </span><span var</span> data, doc, domCheckCount = 50<span , callbackProcessed;

        </span><span function</span><span  cb(e) {
            </span><span if</span> (xhr.aborted ||<span  callbackProcessed) {
                </span><span return</span><span ;
            }
            </span><span try</span><span  {
                doc </span>=<span  getDoc(io);
            }
            </span><span catch</span><span (ex) {
                log(</span>'cannot access response document: '<span , ex);
                e </span>=<span  SERVER_ABORT;
            }
            </span><span if</span> (e === CLIENT_TIMEOUT_ABORT &&<span  xhr) {
                xhr.abort(</span>'timeout'<span );
                </span><span return</span><span ;
            }
            </span><span else</span> <span if</span> (e == SERVER_ABORT &&<span  xhr) {
                xhr.abort(</span>'server abort'<span );
                </span><span return</span><span ;
            }

            </span><span if</span> (!doc || doc.location.href ==<span  s.iframeSrc) {
                </span><span //</span><span  response not received yet</span>
                <span if</span> (!<span timedOut)
                    </span><span return</span><span ;
            }
            </span><span if</span><span  (io.detachEvent)
                io.detachEvent(</span>'onload'<span , cb);
            </span><span else</span><span     
                io.removeEventListener(</span>'load', cb, <span false</span><span );

            </span><span var</span> status = 'success'<span , errMsg;
            </span><span try</span><span  {
                </span><span if</span><span  (timedOut) {
                    </span><span throw</span> 'timeout'<span ;
                }

                </span><span var</span> isXml = s.dataType == 'xml' || doc.XMLDocument ||<span  $.isXMLDoc(doc);
                log(</span>'isXml='+<span isXml);
                </span><span if</span> (!isXml && window.opera && (doc.body === <span null</span> || !<span doc.body.innerHTML)) {
                    </span><span if</span> (--<span domCheckCount) {
                        </span><span //</span><span  in some browsers (Opera) the iframe DOM is not always traversable when</span>
                        <span //</span><span  the onload callback fires, so we loop a bit to accommodate</span>
                        log('requeing onLoad callback, DOM not available'<span );
                        setTimeout(cb, </span>250<span );
                        </span><span return</span><span ;
                    }
                    </span><span //</span><span  let this fall through because server response could be an empty document</span>
                    <span //</span><span log('Could not access iframe DOM after mutiple tries.');</span>
                    <span //</span><span throw 'DOMException: not available';</span>
<span                 }

                </span><span //</span><span log('response detected');</span>
                <span var</span> docRoot = doc.body ?<span  doc.body : doc.documentElement;
                xhr.responseText </span>= docRoot ? docRoot.innerHTML : <span null</span><span ;
                xhr.responseXML </span>= doc.XMLDocument ?<span  doc.XMLDocument : doc;
                </span><span if</span><span  (isXml)
                    s.dataType </span>= 'xml'<span ;
                xhr.getResponseHeader </span>= <span function</span><span (header){
                    </span><span var</span> headers = {'content-type'<span : s.dataType};
                    </span><span return</span><span  headers[header];
                };
                </span><span //</span><span  support for XHR 'status' & 'statusText' emulation :</span>
                <span if</span><span  (docRoot) {
                    xhr.status </span>= Number( docRoot.getAttribute('status') ) ||<span  xhr.status;
                    xhr.statusText </span>= docRoot.getAttribute('statusText') ||<span  xhr.statusText;
                }

                </span><span var</span> dt = (s.dataType || ''<span ).toLowerCase();
                </span><span var</span> scr = /(json|script|text)/<span .test(dt);
                </span><span if</span> (scr ||<span  s.textarea) {
                    </span><span //</span><span  see if user embedded response in textarea</span>
                    <span var</span> ta = doc.getElementsByTagName('textarea')[0<span ];
                    </span><span if</span><span  (ta) {
                        xhr.responseText </span>=<span  ta.value;
                        </span><span //</span><span  support for XHR 'status' & 'statusText' emulation :</span>
                        xhr.status = Number( ta.getAttribute('status') ) ||<span  xhr.status;
                        xhr.statusText </span>= ta.getAttribute('statusText') ||<span  xhr.statusText;
                    }
                    </span><span else</span> <span if</span><span  (scr) {
                        </span><span //</span><span  account for browsers injecting pre around json response</span>
                        <span var</span> pre = doc.getElementsByTagName('pre')[0<span ];
                        </span><span var</span> b = doc.getElementsByTagName('body')[0<span ];
                        </span><span if</span><span  (pre) {
                            xhr.responseText </span>= pre.textContent ?<span  pre.textContent : pre.innerText;
                        }
                        </span><span else</span> <span if</span><span  (b) {
                            xhr.responseText </span>= b.textContent ?<span  b.textContent : b.innerText;
                        }
                    }
                }
                </span><span else</span> <span if</span> (dt == 'xml' && !xhr.responseXML &&<span  xhr.responseText) {
                    xhr.responseXML </span>=<span  toXml(xhr.responseText);
                }

                </span><span try</span><span  {
                    data </span>=<span  httpData(xhr, dt, s);
                }
                </span><span catch</span><span  (e) {
                    status </span>= 'parsererror'<span ;
                    xhr.error </span>= errMsg = (e ||<span  status);
                }
            }
            </span><span catch</span><span  (e) {
                log(</span>'error caught: '<span ,e);
                status </span>= 'error'<span ;
                xhr.error </span>= errMsg = (e ||<span  status);
            }

            </span><span if</span><span  (xhr.aborted) {
                log(</span>'upload aborted'<span );
                status </span>= <span null</span><span ;
            }

            </span><span if</span> (xhr.status) { <span //</span><span  we've set xhr.status</span>
                status = (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) ? 'success' : 'error'<span ;
            }

            </span><span //</span><span  ordering of these callbacks/triggers is odd, but that's how $.ajax does it</span>
            <span if</span> (status === 'success'<span ) {
                </span><span if</span><span  (s.success)
                    s.success.call(s.context, data, </span>'success'<span , xhr);
                </span><span if</span><span  (g)
                    $.event.trigger(</span>"ajaxSuccess"<span , [xhr, s]);
            }
            </span><span else</span> <span if</span><span  (status) {
                </span><span if</span> (errMsg ===<span  undefined)
                    errMsg </span>=<span  xhr.statusText;
                </span><span if</span><span  (s.error)
                    s.error.call(s.context, xhr, status, errMsg);
                </span><span if</span><span  (g)
                    $.event.trigger(</span>"ajaxError"<span , [xhr, s, errMsg]);
            }

            </span><span if</span><span  (g)
                $.event.trigger(</span>"ajaxComplete"<span , [xhr, s]);

            </span><span if</span> (g && ! --<span $.active) {
                $.event.trigger(</span>"ajaxStop"<span );
            }

            </span><span if</span><span  (s.complete)
                s.complete.call(s.context, xhr, status);

            callbackProcessed </span>= <span true</span><span ;
            </span><span if</span><span  (s.timeout)
                clearTimeout(timeoutHandle);

            </span><span //</span><span  clean up</span>
            setTimeout(<span function</span><span () {
                </span><span if</span> (!<span s.iframeTarget)
                    $io.remove();
                xhr.responseXML </span>= <span null</span><span ;
            }, </span>100<span );
        }

        </span><span var</span> toXml = $.parseXML || <span function</span>(s, doc) { <span //</span><span  use parseXML if available (jQuery 1.5+)</span>
            <span if</span><span  (window.ActiveXObject) {
                doc </span>= <span new</span> ActiveXObject('Microsoft.XMLDOM'<span );
                doc.async </span>= 'false'<span ;
                doc.loadXML(s);
            }
            </span><span else</span><span  {
                doc </span>= (<span new</span> DOMParser()).parseFromString(s, 'text/xml'<span );
            }
            </span><span return</span> (doc && doc.documentElement && doc.documentElement.nodeName != 'parsererror') ? doc : <span null</span><span ;
        };
        </span><span var</span> parseJSON = $.parseJSON || <span function</span><span (s) {
            </span><span /*</span><span jslint evil:true </span><span */</span>
            <span return</span> window['eval']('(' + s + ')'<span );
        };

        </span><span var</span> httpData = <span function</span>( xhr, type, s ) { <span //</span><span  mostly lifted from jq1.4.4</span>

            <span var</span> ct = xhr.getResponseHeader('content-type') || ''<span ,
                xml </span>= type === 'xml' || !type && ct.indexOf('xml') >= 0<span ,
                data </span>= xml ?<span  xhr.responseXML : xhr.responseText;

            </span><span if</span> (xml && data.documentElement.nodeName === 'parsererror'<span ) {
                </span><span if</span><span  ($.error)
                    $.error(</span>'parsererror'<span );
            }
            </span><span if</span> (s &&<span  s.dataFilter) {
                data </span>=<span  s.dataFilter(data, type);
            }
            </span><span if</span> (<span typeof</span> data === 'string'<span ) {
                </span><span if</span> (type === 'json' || !type && ct.indexOf('json') >= 0<span ) {
                    data </span>=<span  parseJSON(data);
                } </span><span else</span> <span if</span> (type === "script" || !type && ct.indexOf("javascript") >= 0<span ) {
                    $.globalEval(data);
                }
            }
            </span><span return</span><span  data;
        };
    }
};

</span><span /*</span><span *
 * ajaxForm() provides a mechanism for fully automating form submission.
 *
 * The advantages of using this method instead of ajaxSubmit() are:
 *
 * 1: This method will include coordinates for <input type="image" /> elements (if the element
 *    is used to submit the form).
 * 2. This method will include the submit element's name/value data (for the element that was
 *    used to submit the form).
 * 3. This method binds the submit() method to the form for you.
 *
 * The options argument for ajaxForm works exactly as it does for ajaxSubmit.  ajaxForm merely
 * passes the options argument along after properly binding events for submit elements and
 * the form itself.
 </span><span */</span><span 
$.fn.ajaxForm </span>= <span function</span><span (options) {
    options </span>= options ||<span  {};
    options.delegation </span>= options.delegation &&<span  $.isFunction($.fn.on);
    
    </span><span //</span><span  in jQuery 1.3+ we can fix mistakes with the ready state</span>
    <span if</span> (!options.delegation && <span this</span>.length === 0<span ) {
        </span><span var</span> o = { s: <span this</span>.selector, c: <span this</span><span .context };
        </span><span if</span> (!$.isReady &&<span  o.s) {
            log(</span>'DOM not ready, queuing ajaxForm'<span );
            $(</span><span function</span><span () {
                $(o.s,o.c).ajaxForm(options);
            });
            </span><span return</span> <span this</span><span ;
        }
        </span><span //</span><span  is your DOM ready?  http://docs.jquery.com/Tutorials:Introducing_$(document).ready()</span>
        log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'<span ));
        </span><span return</span> <span this</span><span ;
    }

    </span><span if</span><span  ( options.delegation ) {
        $(document)
            .off(</span>'submit.form-plugin', <span this</span><span .selector, doAjaxSubmit)
            .off(</span>'click.form-plugin', <span this</span><span .selector, captureSubmittingElement)
            .on(</span>'submit.form-plugin', <span this</span><span .selector, options, doAjaxSubmit)
            .on(</span>'click.form-plugin', <span this</span><span .selector, options, captureSubmittingElement);
        </span><span return</span> <span this</span><span ;
    }

    </span><span return</span> <span this</span><span .ajaxFormUnbind()
        .bind(</span>'submit.form-plugin'<span , options, doAjaxSubmit)
        .bind(</span>'click.form-plugin'<span , options, captureSubmittingElement);
};

</span><span //</span><span  private event handlers    </span>
<span function</span><span  doAjaxSubmit(e) {
    </span><span /*</span><span jshint validthis:true </span><span */</span>
    <span var</span> options =<span  e.data;
    </span><span if</span> (!e.isDefaultPrevented()) { <span //</span><span  if event has been canceled, don't proceed</span>
<span         e.preventDefault();
        $(</span><span this</span><span ).ajaxSubmit(options);
    }
}
    
</span><span function</span><span  captureSubmittingElement(e) {
    </span><span /*</span><span jshint validthis:true </span><span */</span>
    <span var</span> target =<span  e.target;
    </span><span var</span> $el =<span  $(target);
    </span><span if</span> (!($el.is(":submit,input:image"<span ))) {
        </span><span //</span><span  is this a child element of the submit el?  (ex: a span within a button)</span>
        <span var</span> t = $el.closest(':submit'<span );
        </span><span if</span> (t.length === 0<span ) {
            </span><span return</span><span ;
        }
        target </span>= t[0<span ];
    }
    </span><span var</span> form = <span this</span><span ;
    form.clk </span>=<span  target;
    </span><span if</span> (target.type == 'image'<span ) {
        </span><span if</span> (e.offsetX !==<span  undefined) {
            form.clk_x </span>=<span  e.offsetX;
            form.clk_y </span>=<span  e.offsetY;
        } </span><span else</span> <span if</span> (<span typeof</span> $.fn.offset == 'function'<span ) {
            </span><span var</span> offset =<span  $el.offset();
            form.clk_x </span>= e.pageX -<span  offset.left;
            form.clk_y </span>= e.pageY -<span  offset.top;
        } </span><span else</span><span  {
            form.clk_x </span>= e.pageX -<span  target.offsetLeft;
            form.clk_y </span>= e.pageY -<span  target.offsetTop;
        }
    }
    </span><span //</span><span  clear form vars</span>
    setTimeout(<span function</span>() { form.clk = form.clk_x = form.clk_y = <span null</span>; }, 100<span );
}


</span><span //</span><span  ajaxFormUnbind unbinds the event handlers that were bound by ajaxForm</span>
$.fn.ajaxFormUnbind = <span function</span><span () {
    </span><span return</span> <span this</span>.unbind('submit.form-plugin click.form-plugin'<span );
};

</span><span /*</span><span *
 * formToArray() gathers form element data into an array of objects that can
 * be passed to any of the following ajax functions: $.get, $.post, or load.
 * Each object in the array has both a 'name' and 'value' property.  An example of
 * an array for a simple login form might be:
 *
 * [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
 *
 * It is this array that is passed to pre-submit callback functions provided to the
 * ajaxSubmit() and ajaxForm() methods.
 </span><span */</span><span 
$.fn.formToArray </span>= <span function</span><span (semantic, elements) {
    </span><span var</span> a =<span  [];
    </span><span if</span> (<span this</span>.length === 0<span ) {
        </span><span return</span><span  a;
    }

    </span><span var</span> form = <span this</span>[0<span ];
    </span><span var</span> els = semantic ? form.getElementsByTagName('*'<span ) : form.elements;
    </span><span if</span> (!<span els) {
        </span><span return</span><span  a;
    }

    </span><span var</span><span  i,j,n,v,el,max,jmax;
    </span><span for</span>(i=0, max=els.length; i < max; i++<span ) {
        el </span>=<span  els[i];
        n </span>=<span  el.name;
        </span><span if</span> (!<span n) {
            </span><span continue</span><span ;
        }

        </span><span if</span> (semantic && form.clk && el.type == "image"<span ) {
            </span><span //</span><span  handle image inputs on the fly when semantic == true</span>
            <span if</span>(!el.disabled && form.clk ==<span  el) {
                a.push({name: n, value: $(el).val(), type: el.type });
                a.push({name: n</span>+'.x', value: form.clk_x}, {name: n+'.y'<span , value: form.clk_y});
            }
            </span><span continue</span><span ;
        }

        v </span>= $.fieldValue(el, <span true</span><span );
        </span><span if</span> (v && v.constructor ==<span  Array) {
            </span><span if</span><span  (elements) 
                elements.push(el);
            </span><span for</span>(j=0, jmax=v.length; j < jmax; j++<span ) {
                a.push({name: n, value: v[j]});
            }
        }
        </span><span else</span> <span if</span> (feature.fileapi && el.type == 'file' && !<span el.disabled) {
            </span><span if</span><span  (elements) 
                elements.push(el);
            </span><span var</span> files =<span  el.files;
            </span><span if</span><span  (files.length) {
                </span><span for</span> (j=0; j < files.length; j++<span ) {
                    a.push({name: n, value: files[j], type: el.type});
                }
            }
            </span><span else</span><span  {
                </span><span //</span><span  #180</span>
                a.push({ name: n, value: ''<span , type: el.type });
            }
        }
        </span><span else</span> <span if</span> (v !== <span null</span> && <span typeof</span> v != 'undefined'<span ) {
            </span><span if</span><span  (elements) 
                elements.push(el);
            a.push({name: n, value: v, type: el.type, required: el.required});
        }
    }

    </span><span if</span> (!semantic &&<span  form.clk) {
        </span><span //</span><span  input type=='image' are not found in elements array! handle it here</span>
        <span var</span> $input = $(form.clk), input = $input[0<span ];
        n </span>=<span  input.name;
        </span><span if</span> (n && !input.disabled && input.type == 'image'<span ) {
            a.push({name: n, value: $input.val()});
            a.push({name: n</span>+'.x', value: form.clk_x}, {name: n+'.y'<span , value: form.clk_y});
        }
    }
    </span><span return</span><span  a;
};

</span><span /*</span><span *
 * Serializes form data into a 'submittable' string. This method will return a string
 * in the format: name1=value1&amp;name2=value2
 </span><span */</span><span 
$.fn.formSerialize </span>= <span function</span><span (semantic) {
    </span><span //</span><span hand off to jQuery.param for proper encoding</span>
    <span return</span> $.param(<span this</span><span .formToArray(semantic));
};

</span><span /*</span><span *
 * Serializes all field elements in the jQuery object into a query string.
 * This method will return a string in the format: name1=value1&amp;name2=value2
 </span><span */</span><span 
$.fn.fieldSerialize </span>= <span function</span><span (successful) {
    </span><span var</span> a =<span  [];
    </span><span this</span>.each(<span function</span><span () {
        </span><span var</span> n = <span this</span><span .name;
        </span><span if</span> (!<span n) {
            </span><span return</span><span ;
        }
        </span><span var</span> v = $.fieldValue(<span this</span><span , successful);
        </span><span if</span> (v && v.constructor ==<span  Array) {
            </span><span for</span> (<span var</span> i=0,max=v.length; i < max; i++<span ) {
                a.push({name: n, value: v[i]});
            }
        }
        </span><span else</span> <span if</span> (v !== <span null</span> && <span typeof</span> v != 'undefined'<span ) {
            a.push({name: </span><span this</span><span .name, value: v});
        }
    });
    </span><span //</span><span hand off to jQuery.param for proper encoding</span>
    <span return</span><span  $.param(a);
};

</span><span /*</span><span *
 * Returns the value(s) of the element in the matched set.  For example, consider the following form:
 *
 *  <form><fieldset>
 *      <input name="A" type="text" />
 *      <input name="A" type="text" />
 *      <input name="B" type="checkbox" value="B1" />
 *      <input name="B" type="checkbox" value="B2"/>
 *      <input name="C" type="radio" value="C1" />
 *      <input name="C" type="radio" value="C2" />
 *  </fieldset></form>
 *
 *  var v = $(':text').fieldValue();
 *  // if no values are entered into the text inputs
 *  v == ['','']
 *  // if values entered into the text inputs are 'foo' and 'bar'
 *  v == ['foo','bar']
 *
 *  var v = $(':checkbox').fieldValue();
 *  // if neither checkbox is checked
 *  v === undefined
 *  // if both checkboxes are checked
 *  v == ['B1', 'B2']
 *
 *  var v = $(':radio').fieldValue();
 *  // if neither radio is checked
 *  v === undefined
 *  // if first radio is checked
 *  v == ['C1']
 *
 * The successful argument controls whether or not the field element must be 'successful'
 * (per http://www.w3.org/TR/html4/interact/forms.html#successful-controls).
 * The default value of the successful argument is true.  If this value is false the value(s)
 * for each element is returned.
 *
 * Note: This method *always* returns an array.  If no valid value can be determined the
 *    array will be empty, otherwise it will contain one or more values.
 </span><span */</span><span 
$.fn.fieldValue </span>= <span function</span><span (successful) {
    </span><span for</span> (<span var</span> val=[], i=0, max=<span this</span>.length; i < max; i++<span ) {
        </span><span var</span> el = <span this</span><span [i];
        </span><span var</span> v =<span  $.fieldValue(el, successful);
        </span><span if</span> (v === <span null</span> || <span typeof</span> v == 'undefined' || (v.constructor == Array && !<span v.length)) {
            </span><span continue</span><span ;
        }
        </span><span if</span> (v.constructor ==<span  Array)
            $.merge(val, v);
        </span><span else</span><span 
            val.push(v);
    }
    </span><span return</span><span  val;
};

</span><span /*</span><span *
 * Returns the value of the field element.
 </span><span */</span><span 
$.fieldValue </span>= <span function</span><span (el, successful) {
    </span><span var</span> n = el.name, t = el.type, tag =<span  el.tagName.toLowerCase();
    </span><span if</span> (successful ===<span  undefined) {
        successful </span>= <span true</span><span ;
    }

    </span><span if</span> (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||<span 
        (t </span>== 'checkbox' || t == 'radio') && !el.checked ||<span 
        (t </span>== 'submit' || t == 'image') && el.form && el.form.clk != el ||<span 
        tag </span>== 'select' && el.selectedIndex == -1<span )) {
            </span><span return</span> <span null</span><span ;
    }

    </span><span if</span> (tag == 'select'<span ) {
        </span><span var</span> index =<span  el.selectedIndex;
        </span><span if</span> (index < 0<span ) {
            </span><span return</span> <span null</span><span ;
        }
        </span><span var</span> a = [], ops =<span  el.options;
        </span><span var</span> one = (t == 'select-one'<span );
        </span><span var</span> max = (one ? index+1<span  : ops.length);
        </span><span for</span>(<span var</span> i=(one ? index : 0); i < max; i++<span ) {
            </span><span var</span> op =<span  ops[i];
            </span><span if</span><span  (op.selected) {
                </span><span var</span> v =<span  op.value;
                </span><span if</span> (!v) { <span //</span><span  extra pain for IE...</span>
                    v = (op.attributes && op.attributes['value'] && !(op.attributes['value'].specified)) ?<span  op.text : op.value;
                }
                </span><span if</span><span  (one) {
                    </span><span return</span><span  v;
                }
                a.push(v);
            }
        }
        </span><span return</span><span  a;
    }
    </span><span return</span><span  $(el).val();
};

</span><span /*</span><span *
 * Clears the form data.  Takes the following actions on the form's input fields:
 *  - input text fields will have their 'value' property set to the empty string
 *  - select elements will have their 'selectedIndex' property set to -1
 *  - checkbox and radio inputs will have their 'checked' property set to false
 *  - inputs of type submit, button, reset, and hidden will *not* be effected
 *  - button elements will *not* be effected
 </span><span */</span><span 
$.fn.clearForm </span>= <span function</span><span (includeHidden) {
    </span><span return</span> <span this</span>.each(<span function</span><span () {
        $(</span>'input,select,textarea', <span this</span><span ).clearFields(includeHidden);
    });
};

</span><span /*</span><span *
 * Clears the selected form elements.
 </span><span */</span><span 
$.fn.clearFields </span>= $.fn.clearInputs = <span function</span><span (includeHidden) {
    </span><span var</span> re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; <span //</span><span  'hidden' is not in this list</span>
    <span return</span> <span this</span>.each(<span function</span><span () {
        </span><span var</span> t = <span this</span>.type, tag = <span this</span><span .tagName.toLowerCase();
        </span><span if</span> (re.test(t) || tag == 'textarea'<span ) {
            </span><span this</span>.value = ''<span ;
        }
        </span><span else</span> <span if</span> (t == 'checkbox' || t == 'radio'<span ) {
            </span><span this</span>.checked = <span false</span><span ;
        }
        </span><span else</span> <span if</span> (tag == 'select'<span ) {
            </span><span this</span>.selectedIndex = -1<span ;
        }
        </span><span else</span> <span if</span><span  (includeHidden) {
            </span><span //</span><span  includeHidden can be the value true, or it can be a selector string</span>
            <span //</span><span  indicating a special test; for example:</span>
            <span //</span><span   $('#myForm').clearForm('.special:hidden')</span>
            <span //</span><span  the above would clean hidden inputs that have the class of 'special'</span>
            <span if</span> ( (includeHidden === <span true</span> && /hidden/.test(t)) ||<span 
                 (</span><span typeof</span> includeHidden == 'string' && $(<span this</span><span ).is(includeHidden)) )
                </span><span this</span>.value = ''<span ;
        }
    });
};

</span><span /*</span><span *
 * Resets the form data.  Causes all form elements to be reset to their original value.
 </span><span */</span><span 
$.fn.resetForm </span>= <span function</span><span () {
    </span><span return</span> <span this</span>.each(<span function</span><span () {
        </span><span //</span><span  guard against an input with the name of 'reset'</span>
        <span //</span><span  note that IE reports the reset function as an 'object'</span>
        <span if</span> (<span typeof</span> <span this</span>.reset == 'function' || (<span typeof</span> <span this</span>.reset == 'object' && !<span this</span><span .reset.nodeType)) {
            </span><span this</span><span .reset();
        }
    });
};

</span><span /*</span><span *
 * Enables or disables any matching elements.
 </span><span */</span><span 
$.fn.enable </span>= <span function</span><span (b) {
    </span><span if</span> (b ===<span  undefined) {
        b </span>= <span true</span><span ;
    }
    </span><span return</span> <span this</span>.each(<span function</span><span () {
        </span><span this</span>.disabled = !<span b;
    });
};

</span><span /*</span><span *
 * Checks/unchecks any matching checkboxes or radio buttons and
 * selects/deselects and matching option elements.
 </span><span */</span><span 
$.fn.selected </span>= <span function</span><span (select) {
    </span><span if</span> (select ===<span  undefined) {
        select </span>= <span true</span><span ;
    }
    </span><span return</span> <span this</span>.each(<span function</span><span () {
        </span><span var</span> t = <span this</span><span .type;
        </span><span if</span> (t == 'checkbox' || t == 'radio'<span ) {
            </span><span this</span>.checked =<span  select;
        }
        </span><span else</span> <span if</span> (<span this</span>.tagName.toLowerCase() == 'option'<span ) {
            </span><span var</span> $sel = $(<span this</span>).parent('select'<span );
            </span><span if</span> (select && $sel[0] && $sel[0].type == 'select-one'<span ) {
                </span><span //</span><span  deselect all other options</span>
                $sel.find('option').selected(<span false</span><span );
            }
            </span><span this</span>.selected =<span  select;
        }
    });
};

</span><span //</span><span  expose debug var</span>
$.fn.ajaxSubmit.debug = <span false</span><span ;

</span><span //</span><span  helper fn for console logging</span>
<span function</span><span  log() {
    </span><span if</span> (!<span $.fn.ajaxSubmit.debug) 
        </span><span return</span><span ;
    </span><span var</span> msg = '[jquery.form] ' + Array.prototype.join.call(arguments,''<span );
    </span><span if</span> (window.console &&<span  window.console.log) {
        window.console.log(msg);
    }
    </span><span else</span> <span if</span> (window.opera &&<span  window.opera.postError) {
        window.opera.postError(msg);
    }
}

})(jQuery);</span>

http://www.bkjia.com/PHPjc/440307.html

truehttp: //www.bkjia.com/PHPjc/440307.htmlTechArticleThe directory structure is as follows: The files folder stores uploaded images. The index.html code is as follows: !DOCTYPE HTML html head meta charset="utf-8" style type="text/css" .demo{width:62...
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn