jquery.MultiFile实现的多文件上传,只把待上传的文件名以列表展示在客户端并不上传的方法 .
2012-12-20 13:54
696 查看
jquery.MultiFile实现的多文件上传,只把待上传的文件名以列表展示在客户端并不上传的方法
在做多文件上传时一直希望可以在客户端对待上传的文件进行控制,比如不可上传重复文件,可以对待上传的文件进行个数控制,文件类型控制,添加多个待上传文件之后以列表形式显示在客户端此时并没有直接保存在服务器等功能,为了实现这个功能在网上查找了一些控件,最后经同事推荐了jquery.MultiFile,然后就对该控件进行了详细研究下面直接上代码。
首先要下载该控件(网上很多此处不再加链接),控件签入之后,引入下面这几个JS文件和CSS文件
<script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Resources/multiple-file-upload/documentation/documentation.js" type="text/javascript"></script> <link href="http://www.cnblogs.com/Resources/multiple-file-upload/documentation/documentation.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.form.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.MetaData.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.MultiFile.js" type="text/javascript"></script>
$(function(){ //修改上传文件时把已上传的文件以列表形式展示 if ($("#filePath").val() != "") { var ele = $("#filePath").val().split(','); for (var i = 0; i < ele.length; i++) { //列表前加删除功能,传过去要删除的文件路径,显示到列表上的是文件的文件名 if (ele[i] != "") { if ($("#CommandType").val() == "look") { $('#file-Log').append('<li style="list-style-type:none" >' + ele[i].substr(ele[i].lastIndexOf("\\") + 1) + '<a href="javascript:void(0)" onclick="loadFile(this)" name="lihre" value="' + ele[i] + '"> 下载</a></li>') } else { $('#file-Log').append('<li style="list-style-type:none" ><a href="#" onclick="delFile(this)" name="lihre" value="' + ele[i] + '"> x </a>' + ele[i].substr(ele[i].lastIndexOf("\\") + 1) + '</li>') } } }
<PRE class=javascript name="code"> //上传文件操作 $("#fileUpload").MultiFile({ list: '#file-Log', //将文件列表展示在指定的ul中 afterFileSelect: function (element, value, master_element) { if ($("#filePath").val() != "") { $("#filePath").val($("#filePath").val() + "," + value); } else { $("#filePath").val(value); } }, afterFileRemove: function (element, value, master_element) { var val = $("#filePath").val().replace(value, ''); $("#filePath").val(val); } })</PRE><BR> }) <PRE></PRE> <PRE class=html name="code"> //删除已经上传的文件data是上传的文件路径 function delFile(data) { //查询到filePath中与要删除的文件一样的路径 var val = $("#filePath").val().replace(data.value, ''); $("#filePath").val(val); //删除父节点中的li $(data.parentNode).remove(); } //下载文件 function loadFile(data) { var path = escape(data.value); location.href = "AjaxHander.aspx?path="+path; }</PRE> <P>html代码很简单只需要一个file控件就行,指定class就可以了</P> <P> </P> <PRE class=html name="code"></PRE><BR> <BR>
由于是初次研究这个控件,很多地方还没有搞懂,只是把用到的几个地方研究了一下,希望大家多多研究,交流!
相关文章推荐
- jquery.MultiFile实现的多文件上传,只把待上传的文件名以列表展示在客户端并不上传的方法
- 在asp.net利用jquery.MultiFile实现多文件上传(转载)
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
- 使用jquery MultiFile实现多个文件同时上传
- jquery.MultiFile 实现自动删掉上传列表
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jQuery监听文件上传实现进度条效果的方法
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- 利用Hadoop的FileSystem create方法获取 FSDataOutputStream 实现文件的上传
- PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
- MVC文件上传08-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹
- Jsp+Servlet实现文件上传下载 文件列表展示(二)
- Jquery和BigFileUpload实现大文件上传及进度条显示
- jQuery实现文件编码成base64并通过AJAX上传的方法
- Commons Fileupload+Servlet+JQuery实现文件上传进度条
- jQuery用FormData实现文件上传的方法
- Bootstrap的fileinput插件实现多文件上传的方法
- dwz+jquery+fileupload+springmvc实现文件上传 及图片预览
- jQuery插件AjaxFileUpload实现ajax文件上传
- jquery插件ajaxFileUpload实现异步上传文件案例