『壹』 ajax 怎么提交file
$('#file1').change(function(){$('#file1').wrap("<form id='myupload' action='upFile?file_id=file1&file_type=-.jpg-.png&file_size=1024000' method='post' enctype='multipart/form-data'></form>");$('#myupload').ajaxSubmit({dataType:'json',success:function(data){alert(data.results);$('#IDPositivePic').val(data.file_name);$('#file1').unwrap();},error:function(xhr){alert('上传失败!');$('#file1').unwrap();}});});
『贰』 java 使用 AjaxUpload.js 实现上传文档的时候需要注意哪些
ajax是无法提交文件的，所以在上传图片并预览的时候，我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的，AjaxFilleUpload.js对上面的方法进行了一个包装，使得我们不用去管理Iframe的一系列操作，也不用影响我们的页面结构，实现异步的文件提交。 html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />js: 复制代码 代码如下: $.ajaxFileUpload({ url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要链接到服务器地址 secureuri:false, fileElementId:'file_upload', //文件选择框的id属性 dataType: 'text', //服务器返回的格式，可以是json、xml success: function (data, status) //相当于java中try语句块的用法 { $('#restoreDialog').html(data); //alert(data); }, error: function (data, status, e){ //相当于java中catch语句块的用法 $('#restoreDialog').html("上传失败，请重试"); } });这个方法还会出现一个问题，就是input只能使用一次的问题，input第二次的onchange将不会被执行，这应该是与浏览器的有关，解决办法就是替换这个input 像这样： 复制代码 代码如下: $('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
『叁』 ajax上传文件提交时，enctype=multipart/form-data怎么带过去
目前的情况下，没有直接ajax提交file的可能有一些js库你可以使用，他们做的方法往往是在页面新建一个iframe，然后在frame里面建一个file的input组件，然后在那个frame里面走submit这样就做成了异步的样子，submit那个的form你就可以设置enctype了
『肆』 PHP 如何用ajax做文件上传
通过传统的form表单提交的方式上传文件：[html] view plain 在CODE上查看代码片派生到我的代码片<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"><h1 >测试通过Rest接口上传文件 </h1><p >指定文件名： <input type ="text" name="filename" /></p><p >上传文件： <input type ="file" name="file" /></p><p >关键字1： <input type ="text" name="keyword" /></p><p >关键字2： <input type ="text" name="keyword" /></p><p >关键字3： <input type ="text" name="keyword" /></p><input type ="submit" value="上传"/></form>不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。Ajax的方式进行请求：[javascript] view plain 在CODE上查看代码片派生到我的代码片$.ajax({url : "http://localhost:8080/STS/rest/user",type : "POST",data : $( '#postForm').serialize(),success : function(data) {$( '#serverResponse').html(data);},error : function(data) {$( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);}});通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。关于FormData及其用法FormData是什么呢？我们来看看Mozilla上的介绍。XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。参见：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormDataConstructorFormData()想得到一个FormData对象：var formdata = new FormData();W3c草案提供了三种方案来获取或修改FormData。方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：var formdata = new FormData();formdata.append("name", "呵呵");formdata.append("url", "http://www..com/");方案2：取得form元素对象，将它作为参数传入FormData对象中！var formobj = document.getElementById("form");var formdata = new FormData(formobj);方案3：利用form元素对象的getFormData方法生成它！var formobj = document.getElementById("form");var formdata = formobj.getFormData()MethodFormData.append本方法用于向已存在的键添加新的值，如该键不存在，新建之。语法formData.append(name, value);formData.append(name, value, filename);注: 通过 FormData.append()方法赋给字段的值若是数字会被自动转换为字符(字段的值可以是一个Blob对象,一个File对象,或者一个字符串,剩下其他类型的值都会被自动转换成字符串).参数解释name键 (key)， 对应表单域value表单域的值filename (optional)The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is "blob".FormData.delete将一对键和值从 FormData 对象中删除。formData.delete(username);FormData.get返回给定键的第一个值formData.append('username', 'Justin');formData.append('username', 'Chris');formData.get(username); // "Justin"FormData.getAll返回给定键的所有值formData.append('username', 'Justin');formData.append('username', 'Chris');formData.getAll(username); // ["Justin", "Chris"]FormData.has检查是否包含给定键，返回 true 或 falseformData.has(username);FormData.set设置给定键的值formData.set(name, value);formData.set(name, value, filename);浏览器兼容情况来自 MDN：DesktopFeatureChromeFirfox(Gecko)Intenet ExplorerOperaSafariBasic support7+4.0(2.0)10+12+5+append with filename(Yes)22.0(22.0)???delete, get, getAll, has, setBehind FlagNot supportedNot supported(Yes)Not supportedMobileFeatureAndroidChrome AndroidFirfox Mobile (Gecko)Firfox OS (Gecko)IE MobileOpera MobileSafari MobileBasic support3.0?4.0(2.0)1.0.1?12+?append with filename??22.0(22.0)1.2???delete, get, getAll, has, set(Yes)(Yes)Not supportedNot supportedNot supported(Yes)Not supported2015年06月04日发布Ajax通过FormData上传文件1.使用<form>表单初始化FormData对象方式上传文件HTML代码<form id="uploadForm" enctype="multipart/form-data"><input id="file" type="file" name="file"/><button id="upload" type="button">upload</button></form>javascript代码$.ajax({url: '/upload',type: 'POST',cache: false,data: new FormData($('#uploadForm')[0]),processData: false,contentType: false}).done(function(res) {}).fail(function(res) {});这里要注意几点：processData设置为false。因为data值是FormData对象，不需要对数据做处理。<form>标签添加enctype="multipart/form-data"属性。cache设置为false，上传文件不需要缓存。contentType设置为false，不设置contentType值，因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。如果不是用<form>表单构造FormData对象又该怎么做呢？2.使用FormData对象添加字段方式上传文件HTML代码<div id="uploadForm"><input id="file" type="file"/><button id="upload" type="button">upload</button></div>这里没有<form>标签，也没有enctype="multipart/form-data"属性。javascript代码var formData = new FormData();formData.append('file', $('#file')[0].files[0]);$.ajax({url: '/upload',type: 'POST',cache: false,data: formData,processData: false,contentType: false}).done(function(res) {}).fail(function(res) {});这里有几处不一样：append()的第二个参数应是文件对象，即$('#file')[0].files[0]。contentType也要设置为‘false’。从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。3.服务器端读文件从Servlet 3.0 开始，可以通过 request.getPart() 或 request.getPars() 两个接口获取上传的文件。
『伍』 文件上传可以跟表单数据一起用ajax提交吗吗
form表单的话，可以直接在后台不同获取，文本用$_POST获取，文件用$_FILES获取。
『陆』 ajax如何 实现 文件上传
程序说明
使用说明
实例化时，第一个必要参数是file控件对象：
newQuickUpload(file);
第二个可选参数用来设置系统的默认属性，包括属性: 默认值//说明parameter:{},//参数对象action:"",//设置actiontimeout:0,//设置超时(秒为单位)onReady:function(){},//上传准备时执行onFinish:function(){},//上传完成时执行onStop:function(){},//上传停止时执行onTimeout:function(){}//上传超时时执行
还提供了以下方法：upload：执行上传操作；stop：停止上传操作；dispose：销毁程序。
varQuickUpload=function(file,options){this.file=$$(file);this._sending=false;//是否正在上传this._timer=null;//定时器this._iframe=null;//iframe对象this._form=null;//form对象this._inputs={};//input对象this._fFINISH=null;//完成执行函数$$.extend(this,this._setOptions(options));};QuickUpload._counter=1;QuickUpload.prototype={//设置默认属性_setOptions:function(options){this.options={//默认值action:"",//设置actiontimeout:0,//设置超时(秒为单位)parameter:{},//参数对象onReady:function(){},//上传准备时执行onFinish:function(){},//上传完成时执行onStop:function(){},//上传停止时执行onTimeout:function(){}//上传超时时执行};return$$.extend(this.options,options||{});},//上传文件upload:function(){//停止上一次上传this.stop();//没有文件返回if(!this.file||!this.file.value)return;//可能在onReady中修改相关属性所以放前面this.onReady();//设置iframe,form和表单控件this._setIframe();this._setForm();this._setInput();//设置超时if(this.timeout>0){this._timer=setTimeout($$F.bind(this._timeout,this),this.timeout*1000);}//开始上传this._form.submit();this._sending=true;},//设置iframe_setIframe:function(){if(!this._iframe){//创建iframevariframename="QUICKUPLOAD_"+QuickUpload._counter++,iframe=document.createElement($$B.ie?"<iframename=""+iframename+"">":"iframe");iframe.name=iframename;iframe.style.display="none";//记录完成程序方便移除varfinish=this._fFINISH=$$F.bind(this._finish,this);//iframe加载完后执行完成程序if($$B.ie){iframe.attachEvent("onload",finish);}else{iframe.onload=$$B.opera?function(){this.onload=finish;}:finish;}//插入bodyvarbody=document.body;body.insertBefore(iframe,body.childNodes[0]);this._iframe=iframe;}},//设置form_setForm:function(){if(!this._form){varform=document.createElement('form'),file=this.file;//设置属性$$.extend(form,{target:this._iframe.name,method:"post",encoding:"multipart/form-data"});//设置样式$$D.setStyle(form,{padding:0,margin:0,border:0,backgroundColor:"transparent",display:"inline"});//提交前去掉formfile.form&&$$E.addEvent(file.form,"submit",$$F.bind(this.dispose,this));//插入formfile.parentNode.insertBefore(form,file).appendChild(file);this._form=form;}//action可能会修改this._form.action=this.action;},//设置input_setInput:function(){varform=this._form,oldInputs=this._inputs,newInputs={},name;//设置inputfor(nameinthis.parameter){varinput=form[name];if(!input){//如果没有对应input新建一个input=document.createElement("input");input.name=name;input.type="hidden";form.appendChild(input);}input.value=this.parameter[name];//记录当前inputnewInputs[name]=input;//删除已有记录deleteoldInputs[name];}//移除无用inputfor(nameinoldInputs){form.removeChild(oldInputs[name]);}//保存当前inputthis._inputs=newInputs;},//停止上传stop:function(){if(this._sending){this._sending=false;clearTimeout(this._timer);//重置iframeif($$B.opera){//opera通过设置src会有问题this._removeIframe();}else{this._iframe.src="";}this.onStop();}},//销毁程序dispose:function(){this._sending=false;clearTimeout(this._timer);//清除iframeif($$B.firefox){setTimeout($$F.bind(this._removeIframe,this),0);}else{this._removeIframe();}//清除formthis._removeForm();//清除dom关联this._inputs=this._fFINISH=this.file=null;},//清除iframe_removeIframe:function(){if(this._iframe){variframe=this._iframe;$$B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);document.body.removeChild(iframe);this._iframe=null;}},//清除form_removeForm:function(){if(this._form){varform=this._form,parent=form.parentNode;if(parent){parent.insertBefore(this.file,form);parent.removeChild(form);}this._form=this._inputs=null;}},//超时函数_timeout:function(){if(this._sending){this._sending=false;this.stop();this.onTimeout();}},//完成函数_finish:function(){if(this._sending){this._sending=false;this.onFinish(this._iframe);}}}
『柒』 如何用ajax上传文件
引入ajaxfileupload.js
jQuery.extend({createUploadIframe:function(id,uri){//createframevarframeId='jUploadFrame'+id;if(window.ActiveXObject){vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');if(typeofuri=='boolean'){io.src='javascript:false';}elseif(typeofuri=='string'){io.src=uri;}}else{vario=document.createElement('iframe');io.id=frameId;io.name=frameId;}io.style.position='absolute';io.style.top='-1000px';io.style.left='-1000px';document.body.appendChild(io);returnio},createUploadForm:function(id,fileElementId){//createformvarformId='jUploadForm'+id;varfileId='jUploadFile'+id;varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');varoldElement=$('#'+fileElementId);varnewElement=$(oldElement).clone();$(oldElement).attr('id',fileId);$(oldElement).before(newElement);$(oldElement).appendTo(form);//setattributes$(form).css('position','absolute');$(form).css('top','-1200px');$(form).css('left','-1200px');$(form).appendTo('body');returnform;},addOtherRequestsToForm:function(form,data){//addextraparametervaroriginalElement=$('<inputtype="hidden"name=""value="">');for(varkeyindata){name=key;value=data[key];varcloneElement=originalElement.clone();cloneElement.attr({'name':name,'value':value});$(cloneElement).appendTo(form);}returnform;},ajaxFileUpload:function(s){//TODOintroceglobalsettings,,notonlytimeouts=jQuery.extend({},jQuery.ajaxSettings,s);varid=newDate().getTime()varform=jQuery.createUploadForm(id,s.fileElementId);if(s.data)form=jQuery.addOtherRequestsToForm(form,s.data);vario=jQuery.createUploadIframe(id,s.secureuri);varframeId='jUploadFrame'+id;varformId='jUploadForm'+id;//Watchforanewsetofrequestsif(s.global&&!jQuery.active++){jQuery.event.trigger("ajaxStart");}varrequestDone=false;//Createtherequestobjectvarxml={}if(s.global)jQuery.event.trigger("ajaxSend",[xml,s]);//WaitforaresponsetocomebackvaruploadCallback=function(isTimeout){vario=document.getElementById(frameId);try{if(io.contentWindow){xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;}elseif(io.contentDocument){xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;}}catch(e){jQuery.handleError(s,xml,null,e);}if(xml||isTimeout=="timeout"){requestDone=true;varstatus;try{status=isTimeout!="timeout"?"success":"error";//if(status!="error"){//processthedata()vardata=jQuery.uploadHttpData(xml,s.dataType);//Ifalocalcallbackwasspecified,fireitandpassitthedataif(s.success)s.success(data,status);//Firetheglobalcallbackif(s.global)jQuery.event.trigger("ajaxSuccess",[xml,s]);}elsejQuery.handleError(s,xml,status);}catch(e){status="error";jQuery.handleError(s,xml,status,e);}//Therequestwascompletedif(s.global)jQuery.event.trigger("ajaxComplete",[xml,s]);//HandletheglobalAJAXcounterif(s.global&&!–jQuery.active)jQuery.event.trigger("ajaxStop");//Processresultif(s.complete)s.complete(xml,status);jQuery(io).unbind()setTimeout(function(){try{$(io).remove();$(form).remove();}catch(e){jQuery.handleError(s,xml,null,e);}},100)xml=null}}//Timeoutcheckerif(s.timeout>0){setTimeout(function(){//if(!requestDone)uploadCallback("timeout");},s.timeout);}try{//vario=$('#'+frameId);varform=$('#'+formId);$(form).attr('action',s.url);$(form).attr('method','POST');$(form).attr('target',frameId);if(form.encoding){form.encoding='multipart/form-data';}else{form.enctype='multipart/form-data';}$(form).submit();}catch(e){jQuery.handleError(s,xml,null,e);}if(window.attachEvent){document.getElementById(frameId).attachEvent('onload',uploadCallback);}else{document.getElementById(frameId).addEventListener('load',uploadCallback,false);}return{abort:function(){}};},uploadHttpData:function(r,type){vardata=!type;data=type=="xml"||data?r.responseXML:r.responseText;//Ifthetypeis"script",evalitinglobalcontextif(type=="script")jQuery.globalEval(data);//GettheJavaScriptobject,ifJSONisused.if(type=="json"){//,//youhavetodeletethe'<pre></pre>'tag.//ThepretaginChromehasattribute,sohavetouseregextoremovevardata=r.responseText;varrx=newRegExp("<pre.*?>(.*?)</pre>","i");varam=rx.exec(data);//thisisthedesireddataextractedvardata=(am)?am[1]:"";//theonlysubmatchoremptyeval("data="+data);}//evaluatescriptswithinhtmlif(type=="html")jQuery("<div>").html(data).evalScripts();//alert($('param',data).each(function(){alert($(this).attr('value'));}));returndata;}})
2.引入上传文件所需的jar
7.获取之后怎么处理自己看着办咯，我只能帮到这里了
『捌』 怎么样通过jQuery Ajax实现上传文件
Query Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，接下来通过本文给大家介绍jquery ajax 上传文件处理方式。FormData对象XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求XMLHttpRequest方式xhr.open("POST", uri, true);xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {// Handle response.alert(xhr.responseText); // handle response.}};fd.append('myFile', file);// Initiate a multipart/form-data uploadxhr.send(fd);其实jquery的ajax也可以支持到的，关键是设置：processData 和 contentType 。ajax方式var formData = new FormData();var name = $("input").val();formData.append("file",$("#upload")[0].files[0]);formData.append("name",name);$.ajax({url : Url,type : 'POST',data : formData,// 告诉jQuery不要去处理发送的数据processData : false,// 告诉jQuery不要去设置Content-Type请求头contentType : false,beforeSend:function(){console.log("正在进行，请稍候");},success : function(responseStr) {if(responseStr.status===0){console.log("成功"+responseStr);}else{console.log("失败");}},error : function(responseStr) {console.log("error");}});
『玖』 我用WebService 上传文件 想用ajax方法发送提交的文件请求 能做到吗
据我所知，像csdn这样的网站我写博客的时候都是没有采用Ajax的，因为Ajax一般都是get方式提交数据的，这样的话对提交数据的长度有限制。所以用Ajax可能比较难实现了。
『拾』 怎么用ajax提交file文件上传
上传的文件是没有办法和表单内容一起异步的，可考虑使用jquery的ajaxfileupload，或是其他的插件，异步上传文件后，然后再对表单进行操作。
