目录结构如下：
其中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>
Ajax-Tutorial
Der Ordner wird zur Exe
So ändern Sie den Text im Bild
Ajax-Lösung für verstümmelten chinesischen Code
Lösung für Ordner-Exe-Viren
Was tun, wenn das eingebettete Bild nicht vollständig angezeigt wird?
Welche Verzeichnissuchmaschinen gibt es?
Was tun, wenn Ajax verstümmelte chinesische Zeichen überträgt?
