jquery文件上传插件实例|jQuery实现文件上传

㈠ jquery 上传文件插件uploadify jsp版本

写一个servlet，看这里http://www.javaeye.com/topic/376101

㈡ jQuery插件之ajaxFileUpload

ajaxFileUpload是一个异步上传文件的jQuery插件，语法：$.ajaxFileUpload([options])。使用方法：第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序。 <script src="jquery-1.7.1.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"></script>第二步：HTML代码第三步：JS代码第四步：后台页面upload.aspx代码。

㈢ 如何通过jQuery的上传插件ajaxFileUpload上传文件给webservice

varelementIds=["flag"];//flag为id、name属性名$.ajaxFileUpload({url:'uploadAjax.htm',type:'post',secureuri:false,//一般设置为falsefileElementId:'file',//上传文件的id、name属性名dataType:'text',//返回值类型，一般设置为json、application/jsonelementIds:elementIds,//传递参数到服务器success:function(data,status){alert(data);},error:function(data,status,e){alert(e);}});

㈣ JQuery上传插件Uploadify里面有个参数queueID,这个参数是怎么算出来的

queueID是页面上容器的id，这个是前端参数，是用来指定进度条出现的位置，比如有个容器<divid="tt"></div>uploadify指定queueID:"tt",那么文件上传时进度条会出现在这个容器内。

㈤ 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 Uploadify上传文件

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。

首先按下面的步骤来实现一个简单的上传功能。

1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3 在项目中添加UploadFile文件夹，用来存放上传的文件。

进行完上面三步后项目的基本结构如下图:

㈦ 求PHP+jquery的uploadify插件实现完整的图片上传实例，要连接数据库的，并且可以选择相册来上传，如图

w3school上的例子，如果要做的好点，就要结合JS和AJAX,还有使用MYSQL把文件的路径保存来http://www.w3school.com.cn/php/php_file_upload.asp http://www.neatstudio.com/show-1343-1.shtml，这里有详细的讲解，关于文件上传，整个项目，最关键的是上传部分，使用JQERUY插件可以使JS部分变的很简单

㈧ 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;}}

㈨ jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

JSP页面中引入的script代码<script>functionajaxFileUpload(){$("#loading").ajaxStart(function(){$(this).show();})//开始上传文件时显示一个图片.ajaxComplete(function(){$(this).hide();});//文件上传完成将图片隐藏起来$.ajaxFileUpload({url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址secureuri:false,//一般设置为falsefileElementId:'imgfile',//文件上传空间的id属性<inputtype="file"id="imgfile"name="file"/>dataType:'json',//返回值类型一般设置为jsonsuccess:function(data,status)//服务器成功响应处理函数{alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量if(typeof(data.error)!='undefined'){if(data.error!=''){alert(data.error);}else{alert(data.message);}}},error:function(data,status,e)//服务器响应失败处理函数{alert(e);}})returnfalse;}</script>struts.xml配置文件中的配置方法：<struts><packagename="struts2"extends="json-default"><actionname="AjaxImageUploadAction"class="com.test.action.ImageUploadAction"><resulttype="json"name="success"><paramname="contentType">text/html</param></result><resulttype="json"name="error"><paramname="contentType">text/html</param></result></action></package></struts>上传处理的ActionImageUploadAction.actionpackagecom.test.action;importjava.io.File;importjava.io.FileInputStream;importjava.io.FileOutputStream;importjava.util.Arrays;importorg.apache.struts2.ServletActionContext;importcom.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")publicclassImageUploadActionextendsActionSupport{privateFileimgfile;privateStringimgfileFileName;privateStringimgfileFileContentType;privateStringmessage="你已成功上传文件";publicFilegetImgfile(){returnimgfile;}publicvoidsetImgfile(Fileimgfile){this.imgfile=imgfile;}publicStringgetImgfileFileName(){returnimgfileFileName;}publicvoidsetImgfileFileName(StringimgfileFileName){this.imgfileFileName=imgfileFileName;}publicStringgetImgfileFileContentType(){returnimgfileFileContentType;}publicvoidsetImgfileFileContentType(StringimgfileFileContentType){this.imgfileFileContentType=imgfileFileContentType;}publicStringgetMessage(){returnmessage;}publicvoidsetMessage(Stringmessage){this.message=message;}@SuppressWarnings("deprecation")publicStringexecute()throwsException{Stringpath=ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");String[]imgTypes=newString[]{"gif","jpg","jpeg","png","bmp"};try{Filef=this.getImgfile();StringfileExt=this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".")+1).toLowerCase();/*if(this.getImgfileFileName().endsWith(".exe")){message="上传的文件格式不允许!!!";returnERROR;}*//***检测上传文件的扩展名是否合法**/if(!Arrays.<String>asList(imgTypes).contains(fileExt)){message="只能上传gif,jpg,jpeg,png,bmp等格式的文件!";returnERROR;}FileInputStreaminputStream=newFileInputStream(f);FileOutputStreamoutputStream=newFileOutputStream(path+"/"+this.getImgfileFileName());byte[]buf=newbyte[1024];intlength=0;while((length=inputStream.read(buf))!=-1){outputStream.write(buf,0,length);}inputStream.close();outputStream.flush();}catch(Exceptione){e.printStackTrace();message="文件上传失败了!!!!";}returnSUCCESS;}}转载，仅供参考。

㈩ jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

ajaxfileupload实现异步上传的完整例子：JSP页面中引入的script代码：<script> function ajaxFileUpload() { $("#loading").ajaxStart(function(){ $(this).show(); })//开始上传文件时显示一个图片 .ajaxComplete(function(){ $(this).hide(); });//文件上传完成将图片隐藏起来 $.ajaxFileUpload({ url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址 secureuri:false,//一般设置为false fileElementId:'imgfile',//文件上传空间的id属性 <input type="file" id="imgfile" name="file" /> dataType: 'json',//返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量 if(typeof(data.error) != 'undefined') { if(data.error != '') { alert(data.error); }else { alert(data.message); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script>struts.xml配置文件中的配置方法：<struts> <package name="struts2" extends="json-default"> <action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction"> <result type="json" name="success"> <param name="contentType">text/html</param> </result> <result type="json" name="error"> <param name="contentType">text/html</param> </result> </action> </package></struts>上传处理的Action ImageUploadAction.actionpackage com.test.action;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.util.Arrays;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")public class ImageUploadAction extends ActionSupport { private File imgfile; private String imgfileFileName; private String imgfileFileContentType; private String message = "你已成功上传文件"; public File getImgfile() { return imgfile; } public void setImgfile(File imgfile) { this.imgfile = imgfile; } public String getImgfileFileName() { return imgfileFileName; } public void setImgfileFileName(String imgfileFileName) { this.imgfileFileName = imgfileFileName; } public String getImgfileFileContentType() { return imgfileFileContentType; } public void setImgfileFileContentType(String imgfileFileContentType) { this.imgfileFileContentType = imgfileFileContentType; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } @SuppressWarnings("deprecation")public String execute() throws Exception { String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload"); String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" }; try { File f = this.getImgfile(); String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase(); /* if(this.getImgfileFileName().endsWith(".exe")){ message="上传的文件格式不允许!!!"; return ERROR; }*/ /** * 检测上传文件的扩展名是否合法 * */ if (!Arrays.<String> asList(imgTypes).contains(fileExt)) { message="只能上传 gif,jpg,jpeg,png,bmp等格式的文件!"; return ERROR; } FileInputStream inputStream = new FileInputStream(f); FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName()); byte[] buf = new byte[1024]; int length = 0; while ((length = inputStream.read(buf)) != -1) { outputStream.write(buf, 0, length); } inputStream.close(); outputStream.flush(); } catch (Exception e) { e.printStackTrace(); message = "文件上传失败了!!!!"; } return SUCCESS; }}