ajax上传文件到服务器|怎么样通过jQuery Ajax实现上传文件

ajax上传文件到服务器|怎么样通过jQuery Ajax实现上传文件的第1张示图

❶ 如何用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.获取之后怎么处理自己看着办咯,我只能帮到这里了

❷ java+AJAX上传文件

http://download.csdn.net/source/214291http://www.winu.cn/htmls/170/111/

❸ 怎么用ajax提交file文件上传

上传的文件是没有办法和表单内容一起异步的,可考虑使用jquery的ajaxfileupload,或是其他的插件,异步上传文件后,然后再对表单进行操作。

❹ 怎么样通过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");}});

❺ ajaxFileUpload异步上传图片,服务器文件叫多,如何删除啊~~

可以做个批量清理的小程序,把所有上传的图片,都存在数据库里,然后遍历上传的这个目录,读取到文件名以后,去数据库查,要是不存在的话,说明这张图是没有用的,删除~

❻ 我想用jquery实现只要<input type="file"/>的值改变我就把input里的文件通过ajax传到服务器

先给你说下使用ajax是不能够操作文件的。想通过无刷新上传建议使用swfupload

❼ ajax怎样传送文件到后台

不是很清楚你的目的是什么?为什么要把文件传过去呢?你直接传文件路径过去,然后对文件进行操作不就可以了?

❽ ajax怎么传递file对象到后台

ajax不能传文件,只能用iframe隐式提交,不过貌似不能直接操作file的value,所以还是想别的办法把

❾ JS怎样用AJAX上传文件

实际上AJAX本身是没办法上传文件的…一般上传都是用FOMR…来实现类似AJAX….

如果不用FORM用JS , 可以使用下面这几个工具:

WebUploader:http://fex..com/webuploader/

pluploader:http://www.plupload.com

❿ ajax+html实现文件上传有哪几种方法

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>大文件切割上传</title><link rel="stylesheet" href=""><script>function selfile(){const LENGTH = 1024 * 1024 * 10;//每次上传的大小var file = document.getElementsByName('video')[0].files[0];//文件对象var filename=document.getElementsByName('video')[0].files[0].name;var totalSize = file.size;//文件总大小var start = 0;//每次上传的开始字节var end = start + LENGTH;//每次上传的结尾字节var fd = null//创建表单数据对象var blob = null;//二进制对象var xhr = null;//xhr对象while(start < totalSize){fd = new FormData();//每一次需要重新创建xhr = new XMLHttpRequest();//需要每次创建并设置参数xhr.open('POST','upload.php',false);blob = file.slice(start,end);//根据长度截取每次需要上传的数据fd.append('video',blob);//添加数据到fd对象中fd.append('filename',filename); //获取文件的名称xhr.send(fd);//将fd数据上传//重新设置开始和结尾start = end;end = start + LENGTH;}}</script></head><body><h1>大文件切割上传</h1><input type="file" name="video" onchange="selfile();" /></body></html>

未经允许不得转载:山九号 » ajax上传文件到服务器|怎么样通过jQuery Ajax实现上传文件

赞 (0)