html 提交表单，图片和文字一起提交，图片存入服务器，图片地址

发布时间：2020-12-24 17:37:39 所属栏目：资源来源：网络整理

导读：html pre class="has" !DOCTYPE html head meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" / meta charset="UTF-8"gt; titleTitle/title script src="https://ajax.aspnetcdn.

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

$form.removeData('jqxhr').data('jqxhr',jqxhr);

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

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

// utility fn for deep serialization
function deepSerialize(extraData){
var serialized = $.param(extraData,options.traditional).split('&');
var len = serialized.length;
var result = [];
var i,part;
for (i=0; i < len; i++) {
// #252; undo param space replacement
serialized[i] = serialized[i].replace(/+/g,' ');
part = serialized[i].split('=');
// #278; use array instead of object storage,favoring array serializations
result.push([decodeURIComponent(part[0]),decodeURIComponent(part[1])]);
}
return result;
}

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

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

 if (options.extraData) {
     var serializedData = deepSerialize(options.extraData);
     for (i=0; i < serializedData.length; i++) {
         if (serializedData[i]) {
             formdata.append(serializedData[i][0],serializedData[i][1]);
         }
     }
 }

 options.data = null;

 var s = $.extend(true,{},$.ajaxSettings,{
     contentType: false,processData: false,cache: false,type: method || 'POST'
 });

 if (options.uploadProgress) {
     // workaround because jqXHR does not expose upload property
     s.xhr = function() {
         var xhr = $.ajaxSettings.xhr();
         if (xhr.upload) {
             xhr.upload.addEventListener('progress',function(event) {
                 var percent = 0;
                 var position = event.loaded || event.position; /*event.position is deprecated*/
                 var total = event.total;
                 if (event.lengthComputable) {
                     percent = Math.ceil(position / total * 100);
                 }
                 options.uploadProgress(event,position,total,percent);
             },false);
         }
         return xhr;
     };
 }

 s.data = null;
 var beforeSend = s.beforeSend;
 s.beforeSend = function(xhr,o) {
     //Send FormData() provided by user
     if (options.formData) {
         o.data = options.formData;
     }
     else {
         o.data = formdata;
     }
     if(beforeSend) {
         beforeSend.call(this,xhr,o);
     }
 };
 return $.ajax(s);

}

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

 // #341
 deferred.abort = function(status) {
     xhr.abort(status);
 };

 if (a) {
     // ensure that every serialized input is still enabled
     for (i=0; i < elements.length; i++) {
         el = $(elements[i]);
         if ( hasProp ) {
             el.prop('disabled',false);
         }
         else {
             el.removeAttr('disabled');
         }
     }
 }

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

 xhr = { // mock object
     aborted: 0,responseText: null,responseXML: null,status: 0,statusText: 'n/a',getAllResponseHeaders: function() {},getResponseHeader: function() {},setRequestHeader: function() {},abort: function(status) {
         var e = (status === 'timeout' ? 'timeout' : 'aborted');
         log('aborting upload... ' + e);
         this.aborted = 1;

         try { // #214,#257
             if (io.contentWindow.document.execCommand) {
                 io.contentWindow.document.execCommand('Stop');
             }
         }
         catch(ignore) {}

         $io.attr('src',s.iframeSrc); // abort op in progress
         xhr.error = e;
         if (s.error) {
             s.error.call(s.context,e,status);
         }
         if (g) {
             $.event.trigger("ajaxError",e]);
         }
         if (s.complete) {
             s.complete.call(s.context,e);
         }
     }
 };

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

 if (s.beforeSend &amp;&amp; s.beforeSend.call(s.context,s) === false) {
     if (s.global) {
         $.active--;
     }
     deferred.reject();
     return deferred;
 }
 if (xhr.aborted) {
     deferred.reject();
     return deferred;
 }

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

 var CLIENT_TIMEOUT_ABORT = 1;
 var SERVER_ABORT = 2;

 function getDoc(frame) {
     /* it looks like contentWindow or contentDocument do not
      * carry the protocol property in ie8,when running under ssl
      * frame.document is the only valid response document,since
      * the protocol is know but not on the other two objects. strange?
      * "Same origin policy" http://en.wikipedia.org/wiki/Same_origin_policy
      */

     var doc = null;

     // IE8 cascading access check
     try {
         if (frame.contentWindow) {
             doc = frame.contentWindow.document;
         }
     } catch(err) {
         // IE8 access denied under ssl &amp; missing protocol
         log('cannot get iframe.contentWindow document: ' + err);
     }

     if (doc) { // successful getting content
         return doc;
     }

     try { // simply checking may throw in ie8 under ssl or mismatched protocol
         doc = frame.contentDocument ? frame.contentDocument : frame.document;
     } catch(err) {
         // last attempt
         log('cannot get iframe.contentDocument: ' + err);
         doc = frame.document;
     }
     return doc;
 }

 // Rails CSRF hack (thanks to Yvan Barthelemy)
 var csrf_token = $('meta[name=csrf-token]').attr('content');
 var csrf_param = $('meta[name=csrf-param]').attr('content');
 if (csrf_param &amp;&amp; csrf_token) {
     s.extraData = s.extraData || {};
     s.extraData[csrf_param] = csrf_token;
 }

 // take a breath so that pending repaints get some cpu time before the upload starts
 function doSubmit() {
     // make sure form attrs are set
     var t = $form.attr2('target'),a = $form.attr2('action'),mp = 'multipart/form-data',et = $form.attr('enctype') || $form.attr('encoding') || mp;

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

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

     // support timout
     if (s.timeout) {
         timeoutHandle = setTimeout(function() { timedOut = true; cb(CLIENT_TIMEOUT_ABORT); },s.timeout);
     }

     // look for server aborts
     function checkState() {
         try {
             var state = getDoc(io).readyState;
             log('state = ' + state);
             if (state &amp;&amp; state.toLowerCase() == 'uninitialized') {
                 setTimeout(checkState,50);
             }
         }
         catch(e) {
             log('Server abort: ',' (',e.name,')');
             cb(SERVER_ABORT);
             if (timeoutHandle) {
                 clearTimeout(timeoutHandle);
             }
             timeoutHandle = undefined;
         }
     }

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

         if (!s.iframeTarget) {
             // add iframe to doc and submit the form
             $io.appendTo('body');
         }
         if (io.attachEvent) {
             io.attachEvent('onload',cb);
         }
         else {
             io.addEventListener('load',cb,false);
         }
         setTimeout(checkState,15);

         try {
             form.submit();
         } catch(err) {
             // just in case form has element with name/id of 'submit'
             var submitFn = document.createElement('form').submit;
             submitFn.apply(form);
         }
     }
     finally {
         // reset attrs and remove "extra" input elements
         form.setAttribute('action',a);
         form.setAttribute('enctype',et); // #380
         if(t) {
             form.setAttribute('target',t);
         } else {
             $form.removeAttr('target');
         }
         $(extraInputs).remove();
     }
 }

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

 var data,doc,domCheckCount = 50,callbackProcessed;

 function cb(e) {
     if (xhr.aborted || callbackProcessed) {
         return;
     }

     doc = getDoc(io);
     if(!doc) {
         log('cannot access response document');
         e = SERVER_ABORT;
     }
     if (e === CLIENT_TIMEOUT_ABORT &amp;&amp; xhr) {
         xhr.abort('timeout');
         deferred.reject(xhr,'timeout');
         return;
     }
     else if (e == SERVER_ABORT &amp;&amp; xhr) {
         xhr.abort('server abort');
         deferred.reject(xhr,'error','server abort');
         return;
     }

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

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

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

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

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

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

     if (xhr.aborted) {
         log('upload aborted');
         status = null;
     }

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

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

     if (g) {
         $.event.trigger("ajaxComplete",s]);
     }

     if (g &amp;&amp; ! --$.active) {
         $.event.trigger("ajaxStop");
     }

     if (s.complete) {
         s.complete.call(s.context,status);
     }

     callbackProcessed = true;
     if (s.timeout) {
         clearTimeout(timeoutHandle);
     }

     // clean up
     setTimeout(function() {
         if (!s.iframeTarget) {
             $io.remove();
         }
         else { //adding else to clean up existing iframe response.
             $io.attr('src',s.iframeSrc);
         }
         xhr.responseXML = null;
     },100);
 }

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

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

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

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

 return deferred;

}
};

/**

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 elements (if the element
is used to submit the form).
1. This method will include the submit element's name/value data (for the element that was
used to submit the form).
1. 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.
*/
$.fn.ajaxForm = function(options) {
options = options || {};
options.delegation = options.delegation && $.isFunction($.fn.on);

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

5/17

首页

尾页