jquery.MultiFile实现的多文件上传,只把待上传的文件名以列表展示在客户端并不上传的方法
2012-10-11 19:03
791 查看
jquery.MultiFile实现的多文件上传,只把待上传的文件名以列表展示在客户端并不上传的方法
在做多文件上传时一直希望可以在客户端对待上传的文件进行控制,比如不可上传重复文件,可以对待上传的文件进行个数控制,文件类型控制,添加多个待上传文件之后以列表形式显示在客户端此时并没有直接保存在服务器等功能,为了实现这个功能在网上查找了一些控件,最后经同事推荐了jquery.MultiFile,然后就对该控件进行了详细研究下面直接上代码。首先要下载该控件(网上很多此处不再加链接),控件签入之后,引入下面这几个JS文件和CSS文件<script src="../../Resources/multiple-file-upload/jquery.js" type="text/javascript"></script> <script src="../../Resources/multiple-file-upload/documentation/documentation.js" type="text/javascript"></script> <link href="../../Resources/multiple-file-upload/documentation/documentation.css" rel="stylesheet" type="text/css" /> <script src="../../Resources/multiple-file-upload/jquery.form.js" type="text/javascript"></script> <script src="../../Resources/multiple-file-upload/jquery.MetaData.js" type="text/javascript"></script> <script src="../../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>') } } }
//上传文件操作 $("#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); } })})
//删除已经上传的文件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; }html代码很简单只需要一个file控件就行,指定class就可以了
相关文章推荐
- jquery.MultiFile实现的多文件上传,只把待上传的文件名以列表展示在客户端并不上传的方法 .
- 使用jquery MultiFile实现多个文件同时上传
- jquery.MultiFile 实现自动删掉上传列表
- 在asp.net利用jquery.MultiFile实现多文件上传(转载)
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
- jQuery插件AjaxFileUpload实现ajax文件上传
- MVC文件上传06-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义控制器上传多个文件
- 利用jQuery-file-upload在MVC中实现上传文件(未完成)
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- 转:一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)
- jQuery插件ajaxfileupload.js实现上传文件
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹
- PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
- jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传
- Jsp+Servlet实现文件上传下载(二)--文件列表展示
- 利用 hadoop 的 FileSystem copyFromLocalFile 方法实现文件上传HDFS中 Hadoop 版本 2.7.0