Ⅰ jquery的post方法上传文件问题。
用AJAXForm插件来完成，当然还有很多的jquery插件可以完成无刷新上传，甚至是多文件无刷新同时上传
Ⅱ 怎么样通过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");}});
Ⅲ jquery Uploadify上传文件
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
Ⅳ jquery.fileUpload.js文件上传问题
了解，fileuploader方法需要先初始化，然后才能触发上传，并不需要你手动触发change事件
你只版需
html
<form>file:<inputtype="file"id="file"name="file"></form>
js
$('#file').on('change',function(){//这里可权以做校验，返回false就不会触发下面的上传插件，否则就会触发上传if(!this.value||this.value.indexOf('.jpg')==-1){returnfalse;}});//初始化上传插件$('#file').fileupload({autoUpload:true,//这里为true，则选中文件后就会自动上传url:'',done:$.noop,fail:$.noop});
Ⅳ jquery html5怎样把文件上传到文件夹
楼主你好复！根据你的描述，让制我来给你回答！var fd = new FormData(document.getElementById("fileinfo"));fd.append("CustomField", "This is some extra data");$.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType});希望能帮到你，如果满意，请记得采纳哦~~~
Ⅵ jQuery实现文件上传。
/*jQuery实现文件上传，参考例子如下：packagecom.kinth.hddpt.file.action;importjava.io.File;importjava.io.FileNotFoundException;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.InputStream;importjava.io.OutputStream;importjava.util.ArrayList;importjava.util.Calendar;importjava.util.Enumeration;importjava.util.Hashtable;importjava.util.List;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importnet.sf.json.JSONArray;importorg.apache.commons.logging.Log;importorg.apache.commons.logging.LogFactory;importorg.apache.struts.action.ActionForm;importorg.apache.struts.action.ActionForward;importorg.apache.struts.action.ActionMapping;importorg.apache.struts.upload.FormFile;importorg.hibernate.criterion.MatchMode;importorg.hibernate.criterion.Order;importorg.hibernate.criterion.Restrictions;importcom.gdcn.bpaf.common.base.search.MyCriteria;importcom.gdcn.bpaf.common.base.search.MyCriteriaFactory;importcom.gdcn.bpaf.common.base.service.BaseService;importcom.gdcn.bpaf.common.helper.PagerList;importcom.gdcn.bpaf.common.helper.WebHelper;importcom.gdcn.bpaf.common.taglib.SplitPage;importcom.gdcn.bpaf.security.model.LogonVO;importcom.gdcn.components.appauth.common.helper.DictionaryHelper;importcom.kinth.common.base.action.BaseAction;importcom.kinth.hddpt.file.action.form.FileCatalogForm;importcom.kinth.hddpt.file.model.FileCatalog;importcom.kinth.hddpt.file.service.FileCatalogService;importcom.kinth.hddpt.file.util.MyZTreeNode;/***<p>*description:“文件上传的Struts层请求处理类”*</p>*@date:2013-1-14*/<FileCatalog>{@SuppressWarnings("unused")privatestaticLoglog=LogFactory.getLog(FileCatalogAction.class);//日志记录;//删除记录的同时删除相应文件publicActionForwardfileDelete(ActionMappingmapping,ActionFormform,HttpServletRequestrequest,HttpServletResponseresponse)throwsException{String[]id=request.getParameterValues("resourceId");if(id!=null&&id[0].contains(",")){id=id[0].split(",");}String[]fileUrls=newString[id.length];for(intj=0;j<id.length;j++){fileUrls[j]=fileCatalogService.findObject(id[j]).getFileUrl();if(!isEmpty(fileUrls[j])){//如果该文件夹不存在则创建一个uptext文件夹Filefileup=newFile(fileUrls[j]);if(fileup.exists()||fileup!=null){fileup.delete();}}fileCatalogService.deleteObject(id[j]);}setAllActionInfos(request);returnlist(mapping,form,request,response);}@OverridepublicActionForwardsave(ActionMappingmapping,ActionFormform,HttpServletRequestrequest,HttpServletResponseresponse)throwsException{Stringid=request.getParameter("resourceId");BooleanfileFlag=Boolean.valueOf(request.getParameter("fileFlag"));if(fileFlag!=null&&fileFlag==true){returnsuper.save(mapping,form,request,response);}else{StringfileUrl=this.fileUpload(form,request,id,fileFlag);response.setContentType("text/html");response.setCharacterEncoding("GBK");response.setHeader("Charset","GBK");response.setHeader("Cache-Control","no-cache");response.getWriter().write(fileUrl);response.getWriter().flush();}returnnull;}@SuppressWarnings("unchecked")publicStringfileUpload(ActionFormform,HttpServletRequestrequest,Stringid,BooleanfileFlag)throwsFileNotFoundException,IOException{request.setCharacterEncoding("GBK");StringbasePath=getServlet().getServletConfig().getServletContext().getRealPath("")+"/";StringfilePath="uploads/";//获取项目根路径;/*注释部分对应jqueryuploaploadify插件的后台代码,只是还存在编码问题，默认为utf-8StringsavePath=getServlet().getServletConfig().getServletContext().getRealPath("");//获取项目根路径savePath=savePath+"\uploads\";//读取上传来的文件信息Hashtable<String,FormFile>fileHashtable=form.getMultipartRequestHandler().getFileElements();Enumeration<String>enumeration=fileHashtable.keys();enumeration.hasMoreElements();Stringkey=(String)enumeration.nextElement();FormFileformFile=(FormFile)fileHashtable.get(key);Stringfilename=formFile.getFileName().trim();//文件名filename=newEncodeChange().changeCode(filename);Stringfiletype=filename.substring(filename.lastIndexOf(".")+1);//文件类型savePath=savePath+filetype+"\";System.out.println("path:"+savePath);StringrealPath=savePath+filename;//真实文件路径//如果该文件夹不存在则创建一个文件夹Filefileup=newFile(savePath);if(!fileup.exists()||fileup==null){fileup.mkdirs();}if(!filename.equals("")){//在这里上传文件InputStreamis=formFile.getInputStream();OutputStreamos=newFileOutputStream(realPath);intbytesRead=0;byte[]buffer=newbyte[8192];while((bytesRead=is.read(buffer,0,8192))!=-1){os.write(buffer,0,bytesRead);}os.close();is.close();//如果是修改操作，则删除原来的文件Stringid=request.getParameter("resourceId");if(!isEmpty(id)){FileCatalogfileCatalog=fileCatalogService.findObject(id);StringfileUrl=fileCatalog.getFileUrl();if(!isEmpty(fileUrl)){Filefiledel=newFile(fileUrl);if(filedel.exists()||filedel!=null){filedel.delete();}}request.setAttribute("entity",fileCatalog);}response.getWriter().print(realPath);//向页面端返回结果信息}*///读取上传来的文件信息Hashtable<String,FormFile>fileHashtable=form.getMultipartRequestHandler().getFileElements();Enumeration<String>enumeration=fileHashtable.keys();enumeration.hasMoreElements();Stringkey=(String)enumeration.nextElement();FormFileformFile=(FormFile)fileHashtable.get(key);Stringfilename=formFile.getFileName().trim();//文件名Stringfiletype=filename.substring(filename.lastIndexOf(".")+1);//文件类型IntegerfileSize=formFile.getFileSize();filePath+=Calendar.getInstance().get(Calendar.YEAR)+"/"+filetype+"/";StringrealPath=basePath+filePath+filename;//真实文件路径if(!filename.equals("")){//如果是修改操作，则删除原来的文件if(!isEmpty(id)){FileCatalogfileCatalog=fileCatalogService.findObject(id);StringfileUrl=fileCatalog.getFileUrl();if(!isEmpty(fileUrl)){fileUrl=basePath+fileUrl;Filefiledel=newFile(fileUrl);if(filedel.exists()||filedel!=null){filedel.delete();}}request.setAttribute("entity",fileCatalog);}//如果该文件夹不存在则创建一个文件夹Filefileup=newFile(basePath+filePath);if(!fileup.exists()||fileup==null){fileup.mkdirs();}//在这里上传文件InputStreamis=formFile.getInputStream();OutputStreamos=newFileOutputStream(realPath);intbytesRead=0;byte[]buffer=newbyte[8192];while((bytesRead=is.read(buffer,0,8192))!=-1){os.write(buffer,0,bytesRead);}os.close();is.close();}filePath+=filename;Stringresult="{"fileName":""+filename+"","fileType":""+filetype+"","fileSize":"+fileSize+","fileUrl":""+filePath+""}";returnresult;}(){returnfileCatalogService;}(){this.fileCatalogService=fileCatalogService;}}
Ⅶ jquery 多个 上传文件教程
jquery 实现多个上传文件教程：
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
jquery-1.3.2.min.jsjquery.uploadify.v2.1.0.jsjquery.uploadify.v2.1.0.min.jsswfobject.jsuploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下：
<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script><scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script><scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script><scriptsrc="js/swfobject.js"type="text/javascript"></script><linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/></script>
js函数：
<scripttype="text/javascript">$(document).ready(function(){$("#uploadify").uploadify({'uploader':'image/uploadify.swf',//uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框'script':'Handler1.ashx',//script：后台处理程序的相对路径'cancelImg':'image/cancel.png','buttenText':'请选择文件',//浏览按钮的文本，默认值：BROWSE。'sizeLimit':999999999,//文件大小显示'floder':'Uploader',//上传文件存放的目录'queueID':'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致'queueSizeLimit':120,//上传文件个数限制'progressData':'speed',//上传速度显示'auto':false,//是否自动上传'multi':true,//是否多文件上传//'onSelect':function(e,queueId,fileObj){//alert("唯一标识:"+queueId+""+//"文件名："+fileObj.name+""+//"文件大小："+fileObj.size+""+//"创建时间："+fileObj.creationDate+""+//"最后修改时间："+fileObj.modificationDate+""+//"文件类型："+fileObj.type);//}'onQueueComplete':function(queueData){alert("文件上传成功！");return;}});});
页面中的控件代码：
<body><formid="form1"runat="server"><divid="fileQueue"></div><div><p><inputtype="file"name="uploadify"id="uploadify"/><inputid="Button1"type="button"value="上传"onclick="javascript:$('#uploadify').uploadifyUpload()"/><inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/></p></div></form></body>
函数主要参数：
$(document).ready(function(){$('#fileInput1').fileUpload({'uploader':'uploader.swf',//不多讲了'script':'/AjaxByJQuery/file.do',//处理Action'cancelImg':'cancel.png','folder':'',//服务端默认保存路径'scriptData':{'methed':'uploadFile','arg1','value1'},//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子'multi':'true',//多文件上传开关'fileExt':'*.xls;*.csv',//文件过滤器'fileDesc':'.xls',//文件过滤器详解见文档'onComplete':function(event,queueID,file,serverData,data){//serverData为服务器端返回的字符串值alert(serverData);}});});
后台一般处理文件：
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.IO;usingSystem.Net;usingSystem.Web;usingSystem.Web.Services;namespacefupload{///<summary>///Handler1的摘要说明///</summary>publicclassHandler1:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentType="text/plain";HttpPostedFilefile=context.Request.Files["Filedata"];//对客户端文件的访问stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//服务器端文件保存路径if(file!=null){if(!Directory.Exists(uploadPath)){Directory.CreateDirectory(uploadPath);//创建服务端文件夹}file.SaveAs(uploadPath+file.FileName);//保存文件context.Response.Write("上传成功");}else{context.Response.Write("0");}}publicboolIsReusable{get{returnfalse;}}}}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
Ⅷ 求教jquery file uploader 使用
jquery 的文件上传控件如果要获取文件信息一般都是通过后台Request.Files[0].FileName 来获取文件信息，包括文件大小等等 当然Request.Files[0].FileName是C#，如果是其他语言可以变换一下 🙂
Ⅸ jquery不使用插件通过ajax方法上传文件
传统的表单也需要定义“multipart/form-data”这样的方式，就是将文件转成二进制流上传到服务器。而jquery的ajax本身貌似本身并没有办法读取本地的文件形成二进制流上传到服务器。只能用插件来实现。
Ⅹ jquery的post方法上传文件问题。
用jQuery 的Ajax文件上传的组件：ajaxfileupload.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ajaxfileupload.js"></script> <script type="text/javascript"> function ajaxFileUpload() { $.ajaxFileUpload ( { url:'doajaxfileupload.php', //你处理上传文件的服务端 secureuri:false, fileElementId:'img', dataType: 'json', success: function (data) { alert(data.file_infor); } } ) return false; } </script><input id="img" type="file" size="45" name="img" class="input"> <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
