读书人

jQuery文件上传 带进度条 控件解决思路

发布时间: 2012-05-16 11:12:12 作者: rapoo

jQuery文件上传 带进度条 控件
哪位大侠推荐一款jQuery 文件上传的控件啊,要带进度条。最好漂亮点,感谢

[解决办法]
jQuery Ajax Uploader: http://valums.com/ajax-upload/
[解决办法]
Xproer FtpUploader


[解决办法]
资源我下载了,学习学习
[解决办法]
DING
[解决办法]
二楼没有贴地址,我贴下啊http://www.cnblogs.com/xproer/archive/2010/04/17/1714073.html
[解决办法]
每天回帖接分
[解决办法]
好东西~~
[解决办法]
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>

读书人网 >Java Web开发

热点推荐