㈠ 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判断 文件是否已上传
jquery是客户端脚本，是不能访问服务器端目录的，所以你单纯用jqeury访问目录是做不到的，但是你可以用jqeury以ajax的方式用PHP访问服务器端的目录，比如：$.post("access.php",function(data){ //data是返回的数据});这样你就可以在access.php里写代码访问服务器端目录了，然后可以把结果返回回来
㈢ jquery 用a标签控制文件上传
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>ajaxFileUpload文件上传例子</title><scripttype="text/javascript"src="<%=baseURL%>/kinth/js/ajaxfileupload.js"></script><scripttype="text/javascript">varflag=0;//flag作用：分两种情况提交信息，如果是修改操作，没有修改上传文件，只修改其他字段的信息时点保存也能提交信息functionuploadFile(){$.ajaxFileUpload({url:baseURL+"/fileCatalog.do?method=save",//需要链接到服务器地址secureuri:true,fileElementId:'file',//文件选择框的id属性success:function(data,status){varresults=$(data).find('body').html();varobj=eval("("+results+")");$("#fileSize").val(obj.fileSize);$("#fileUrl").val(obj.fileUrl);$('#fileCatalogForm').submit();},error:function(data,status,e){showDialogWithMsg('ideaMsg','提示','文件错误！');}});}functiongetFileName(obj){flag=1;varpos=-1;if(obj.value.indexOf("/")>-1){pos=obj.value.lastIndexOf("/")*1;}elseif(obj.value.indexOf("\")>-1){pos=obj.value.lastIndexOf("\")*1;}varfileName=obj.value.substring(pos+1);$("#fileName").val(fileName);$('.files').text(fileName);}functionev_save(){if(submitMyForm('fileCatalogForm')){if(flag==0){$('#fileCatalogForm').submit();}else{uploadFile();}}}functionev_back(){window.location.href=baseURL+'/fileCatalog.do?method=list';}</script></head><body><html:formstyleId="fileCatalogForm"action="/fileCatalog.do?method=save&fileFlag=true"method="post"enctype="application/x-www-form-urlencoded"style="text-align:left;"><table><tr><td>附件上传：</td><tdstyle="text-align:left;"id="fileTd"><inputtype="file"name="file"id="file"onChange="getFileName(this);"/><br/></td><tdcolspan="2"class="tdr"><olclass=files><c:iftest="${entity.resourceId!=null&&entity.resourceId!=''}"><li>${entity.fileName} 上传成功</li></c:if></ol></td></tr><c:iftest="${entity.resourceId==null||entity.resourceId==''}"><inputtype="text"name="fileSize"id="fileSize"></c:if><inputtype="hidden"id="fileUrl"name="fileUrl"value="${entity.fileUrl}"</table></html:form></body>
㈣ jquery上传文件是怎么实现的
本篇文章是对Jquery中的LigerUI实现文件上传的方法，进行了分析介绍，需要的朋友可以参考下 一、在Head中加入<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script><script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>二、Html中的Div代码复制代码 代码如下:<div id="AppendBill_Div" style="display:none;"> <%– 上传 – 单 –%><table style="height:100%;width:100%"><tr style="height:40px"><td style="width:20%">图标:</td><td><input type="file" style="width:200px" id="fileupload" name="fileupload"/></td></tr></table></div> 三、Js中-写的是关键部分，会LigerUI的朋友-你懂得1、grid中添加项【存地址字段】{ display: "扫描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }2、Form可添加项【存地址和弹出选择框】{ name: "AppendBillPath1", type: "hidden" }, // –上传-【5】–{ display: "扫描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // –上传-【6】–$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【扫描件】 // –上传-【7】–3、事件// #region ======================================= 【上传扫描件窗口】 // –上传-【8】–复制代码 代码如下:var AppendBillPathDetail = null;function f_selectAppendBillPath_1() {var imageurl = $("#AppendBill").val();var AppendBill_Id = $("#AppendBill").val(); // 单号if (imageurl.length == 0) {LG.showError("您没有输入单号，请输入随单号！");return;}if (AppendBillPathDetail) {AppendBillPathDetail.show();}else {AppendBillPathDetail = $.ligerDialog.open({target: $("#AppendBill_Div"), title: '添加图标',width: 360, height: 170, top: 170, left: 280, // 弹出窗口大小buttons: [{ text: '上传', onclick: function () { AppendBillPath_save(); } },{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }]});}}function AppendBillPath_save(){var imgurl = $("#fileupload").val();// var filehelpcode = $("#filehelpcode").val();var extend = imgurl.substring(imgurl.lastIndexOf("."), imgurl.length);extend = extend.toLowerCase();if (extend == ".jpg" || extend == ".jpeg" || extend == ".png" || extend == ".gif" || extend == ".bmp"){}else{LG.showError("请上传jpg,jpep,png,gif,bmp格式的图片文件");return;}var imageurl = $("#AppendBill").val(); // extendalert(imageurl);$.ajaxFileUpload({url: "../handle/ImageUpload.aspx?imageurl=" + imageurl, // –上传-【9】– aspx文件secureuri: false,fileElementId: "fileupload", //Input file iddataType: "text",success: function (data, status){// —————– // 保存路径// $("#AppendBillPath2").val(Data);LG.tip(data);f_reload();},error: function (data, status, e) {LG.showError(data);}});}// #endregion 四、后台cs，写一句关键的，可以返回参数，前台提示string url = Server.MapPath("/Image/" + gfilename + filenameext); // 执行上传操作
㈤ jquery file upload怎么使用
使用方法：1. 需要加载的js文件：jquey-1.8.3.min.jsjquery-ui-widget.jsjquery.iframe-transport.jsjquery.fileupload.js2. html代码：?1<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>3. js代码：?12345678910$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text(file.name).appendTo(document.body);});}});});3.1 显示上传进度条：?123456789$('#fileupload').fileupload({progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .bar').css('width',progress + '%');}});3.2 需要一个<div>容器用来显示进：?123<div id="progress"><div class="bar" style="width: 0%;"></div></div>4. API4.1 Initialization：在上传按钮上调用fileupload()方法;示例：$('#fileupload').fileupload();4.2 Options :1: url：请求发送的目标urlType: stringExample: '/path/to/upload/handler.json'2.Type: 文件上传HTTP请求方式，可以选择“POST”，“PUT”或者"PATCH",默认"POST"Type: stringExample: 'PUT'3. dataType:希望从服务器返回的数据类型，默认"json"Type: stringExample: 'json'4. autoUpload:默认情况下，只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。Type: booleanDefault: true5. acceptFileTypes：允许上传的的文件类型Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i6. maxFileSize: 最大上传文件大小Example: 999000 (999KB) //单位：B7. minFileSize:最小上传文件大小Example: 100000 (100KB) //单位：B8.previewMaxWidth : 图片预览区域最大宽度Example: 100 //单位：px4.3 Callback Options:使用方法一：函数属性实例：?123456789101112$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});使用方法二：绑定事件监听函数实例：?123$('#fileupload').bind('fileuploaddrop', function (e, data) {/* … */}).bind('fileuploadchange', function (e, data) {/* … */});每个事件名称都添加前缀：”fileupload”;注意推荐使用第二种方法。常用的回调函数：1. add: 当文件被添加到上传组件时被触发?1$('#fileupload').bind('fileuploadadd', function (e, data) {/* … */});或者$('#fileupload').on('fileuploadadd', function (e, data) {/* … */});2. processalways: 当一个单独的文件处理队列结束（完成或失败时）触发3. progressall: 全局上传处理事件的回调函数Example:?1234567$('#fileupload').on('fileuploadprogressall', function (e, data) { //进度条显示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});4. fail : 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发。5. done : 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发。6. always : 上传请求结束时（成功，错误或者中止）都会被触发。
㈥ html5上传文件如果用jquery ajax发送怎么监听事件
直接绑定事件触发ajax就行了，没必要一定要做事件监听
㈦ jquery ajax xhr监听上传进度显示不准确，求解
如果你是用这种方式上传的话，确实没有好方法。因为 XMLHttpRequest.onProgress 事件能拿到的是网络传输的字节而已；你说的问题里，“上传进度已完成”，实际是指浏览器已经把文件传输给了服务端；“很久才可以”，是你服务端额外处理的时间，这段时间对浏览器来说是不可感知的，它怎么会知道你服务端处理需要多久呢？一般处理思路有这么几种：1、上传进度设置一个最大值，比如 99%，只有当服务端真正返回结果时才会变到 100%，这种方法最为简单粗暴；2、尽量减少服务端处理的时间，例如收到文件后交给异步队列去处理，立刻返回给客户端响应，这种方法需要额外做的事件比较多，开发难度更高一些；3、客户端分片上传，把大文件变成若干段小“文件”，缺点是浏览器只有支持 HTML5 才支持 FormData 分片。
㈧ 怎么样通过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实现文件上传。
/*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;}}
㈩ file控件选择上传文件确定后触发什么js事件
1、定义一个Html文件，编写file控件。
