jQuery文件上传 带进度条 控件

sytu_hzj 2011-05-22 06:40:34
哪位大侠推荐一款jQuery 文件上传的控件啊,要带进度条。最好漂亮点,感谢
...全文
4316 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
wqvbugvv 2011-10-03
  • 打赏
  • 举报
回复
每天回帖接分
niuniu20008 2011-10-03
  • 打赏
  • 举报
回复
jx_vfp 2011-10-03
  • 打赏
  • 举报
回复
DING
jingtuzhong 2011-10-03
  • 打赏
  • 举报
回复
Jquery多文件上传控件

/*
* you-may jQuery multiupload Plugin
* version: 1.0 (08-APR-2009)
* @requires jQuery v1.3.2 or later
*
*/
; (function($) {

$.fn.multiupload = function(options) {

var multiupload = this;

options = $.extend({
fileSelector: ".file-upload",
deleteSelector: ".delete-file"
}, options || {});

var fileNameDataKey = "targetFileName";

var addOperate = function(target) {
var warp = $("<div></div>");
multiupload.append(warp);

warp.append(target);
target = $(target);

var deleteButton = $("<a></a>");
warp.prev().append(deleteButton);
deleteButton.text("剔除");
deleteButton.attr("href", "javascript:void(0);");
deleteButton.data(fileNameDataKey, target.attr("name"));
deleteButton.addClass(options.deleteSelector.substring(1));
};

var fileCount = function() {
return multiupload.find(options.fileSelector).size();
};

var emptyFileCount = function() {
return multiupload.find(options.fileSelector).filter(function() {
return !$(this).val();
}).size();
};

var templete = multiupload.find(options.fileSelector + ":first");
// addOperate(templete);
var div = $("<div></div>");
div.append(templete);
multiupload.append(div);
//alert(multiupload.html());

var baseName = templete.attr("name");

var count = 1;

this.find(options.fileSelector).change(function() {
var self = $(this);

if (self.val() && emptyFileCount() === 0) {
var newFile = self.clone(true);

self.parent().append(newFile);
newFile.val(null);
newFile.attr("name", baseName + ++count);

addOperate(newFile);
}

});

this.find(options.deleteSelector).live("click", function() {
var self = $(this);
self.parent().remove();
// var fileName = self.data(fileNameDataKey);
// var file = multiupload.find("input[name=" + fileName + "]");

// if (fileCount() === 1) {
// file.val(null);
// } else {
// file.parent().remove();
// }

});

};



})(jQuery);



<div id="fileUploadContainer">
<input type="file" class="file-upload" name="File" />
</div>

<%=Html.Script("/fckeditor/fckeditor.js")%>
<script type="text/javascript">
$(document).ready(function() {
//使用
$("#formAddNews").ajaxForm();
$("#fileUploadContainer").multiupload({ fileSelector: ".file-upload" });
})
</script>
A425244100 2011-10-03
  • 打赏
  • 举报
回复
mark
horse201 2011-10-03
  • 打赏
  • 举报
回复
好东西~~
fly_cool 2011-05-25
  • 打赏
  • 举报
回复
资源我下载了,学习学习
Inhibitory 2011-05-22
  • 打赏
  • 举报
回复
jQuery Ajax Uploader: http://valums.com/ajax-upload/

81,092

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧