Jquery多文件上传控件

Code
/*
* 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 = $("");
            multiupload.append(warp);

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

            
var deleteButton = $("");
            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.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);


Code
  <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>
效果:

你可能感兴趣的:(Jquery多文件上传控件)