AJAX无刷新上传图片_PHP教程

    目录结构如下：

    其中files文件夹中存放上传来的图片。

    index.html代码如下：

       
       
        上传

 

     jquery.form.js代码如下：

<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&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&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.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/440307.htmlTechArticle目录结构如下： 其中files文件夹中存放上传来的图片。 index.html代码如下： !DOCTYPE HTML html head meta charset="utf-8" style type="text/css" .demo{width:62...