jQuery文件上传带进度条控件

2011-05-22 06:40:34 4.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

jQuery监听文件上传实现进度条效果博客原文地址原理：给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程 var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){}因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法所以只要给jQuery重新生成一个绑阅读详情

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

...全文

基于jquery的fileupload上传控件带进度条、支持多上传、拖拽上传下载即可用十分强大有图基于jquery的fileupload上传控件带进度条、支持多上传、拖拽上传下载即可用十分强大有图源代码下载地址：http://www.zuidaima.com/share/1616934558321664.htm 阅读详情

sytu_hzj

Web 开发 81,108 成员 341,721 内容

+ 关注 + 加入社区

切换为时间正序

wqvbugvv 2011-10-03

打赏
举报

每天回帖接分

niuniu20008 2011-10-03

打赏
举报

二楼没有贴地址，我贴下啊http://www.cnblogs.com/xproer/archive/2010/04/17/1714073.html

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/

jQuery文件上传 带进度条 控件

相关推荐

jQuery文件上传带进度条控件