网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

jquery教程,jquery教程 菜鸟教程

2020-3-20 14:15:58 | 作者:老铁SEO | 0个评论 | 人浏览

  jquery实现多个上传文件教程:


  首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):


  jquery-1.3.2.min.js


  jquery.uploadify.v2.1.0.js


  jquery.uploadify.v2.1.0.min.js


  swfobject.js


  uploadify.css<


  >


  1、页面的基本代码如下


  这里用的是aspx页面(html也是也可的)


  页面中引入的js和js函数如下:


  <


  >


  js函数:


  $(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+"\r\n"+


  //"文件名:"+fileObj.name+"\r\n"+


  //"文件大小:"+fileObj.size+"\r\n"+


  //"创建时间:"+fileObj.creationDate+"\r\n"+


  //"最后修改时间:"+fileObj.modificationDate+"\r\n"+


  //"文件类型:"+fileObj.type);


  //}


  'onQueueComplete':function(queueData){


  alert("文件上传成功!");


  return;


  }


  });


  });<


  >


  页面中的控件代码:


  <


  >


  函数主要参数:


  $(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


  {


  ///


  ///Handler1的摘要说明


  ///


  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;


  }


  }


  }


  }<


  >

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐