在试过了swfuploadify上传插件,虽然可以上传,但是session会丢失,造成无法进行服务器验证,因此我终于决定自己开发一个上传插件了jquery.sdupload.js。这个插件只支持html5的浏览器,毕竟html5是未来的趋势。

使用方法:
<script type="text/javascript" src="/static/default/js/jquery.js"></script>
<script type="text/javascript" src="/static/default/js/jquery.sdupload.js"></script>
<link rel="stylesheet" href="/static/default/css/sdupload.css" type="text/css" />
<div id="fileList"></div>
<input type="file" name="fileupload" id="fileupload" multiple="true" accept="image/gif,image/jpg,image/png" />
$("#fileupload").sdupload({
       uploader: '/uploadImage.do',
       filelist: 'fileList',
       buttonText: '选择图片', 
    uploadLimit: 6,
       fileSizeLimit: 160
   });
使用的技术:

1.美化上传按钮,具体参看文章HTML之上传控件“input=file”的美化

效果图:

2.思路

在文件选择按钮上添加onchange事件,在此事件函数中在evt.target.files中获得文件实例,在文件列表中创建一个img,将文件内容在img上显示,作为本地预览,并且将file是做作为参数保存在这个img的属性中,以备上传是取到文件。代码如下:

onSelect: function(evt) {
    var $this = $(this);
    var settings = $this.data('sdupload');
    var files = evt.target.files; 
    for (var i=0,file; file=files[i];i++){
        var myImgID = getImgID(settings);
        this.sdFileID = myImgID;
        if($('#'+settings.filelist+' > div.upload-img-div > img').length>=settings.uploadLimit){alert('批量上传不能超过'+settings.uploadLimit+'个。');continue;}
        if(!file.type.match('image.*')){alert('"'+file.name+'"不是图片。');continue;}
        if(file.size>settings.fileSizeLimit*1024){alert('"'+file.name+'"超过了'+settings.fileSizeLimit+'KB。');continue;}
        if($('#'+settings.filelist).find('#'+myImgID).length>0){alert('"'+file.name+'"已存在。');continue;}
        var reader = new FileReader();
        reader.onload =(function(theFile){
            return function(e){
                var $imgTag = $('<img>', {'id':myImgID, 'class':'upload-img', 'src':e.target.result}).data('fileData',theFile);
                var $uploadBtn = $('<a />',{'id':myImgID+'_uploadBtn','href':'javascript:$(\'#'+settings.id+'\').sdupload(\'upload\',\''+myImgID+'\')'}).text('上传');
                var $deleteBtn = $('<a />',{'id':myImgID+'_deleteBtn','class':'deleteBtn', 'href':'javascript:$(\'#'+settings.id+'\').sdupload(\'cancel\',\''+myImgID+'\')'}).text('删除');
                var $progressSpan = $('<span />', {'id':myImgID+'_progress', 'class':'upload-progress'}).text('0%');
                var $imgDiv = $('<div />', {'id':myImgID+'_div', 'class':'upload-img-div'})
                                .append($imgTag).append('<br>'+theFile.name+'<br>').append($uploadBtn).append($deleteBtn).append($progressSpan);
                $('#'+settings.filelist).append($imgDiv);
            }
        })(file);
        reader.readAsDataURL(file);
    }
}

3.ajax上传文件的方法

formdata是一个html5的特性,我们可以使用这个方法很方便的上传文件。代码如下:


onSendFile: function(settings, fileID){
    var xhr = new XMLHttpRequest();
    if(xhr.upload){
        // 上传中
        xhr.upload.addEventListener("progress", function(e) {
            handlers.onProgress(fileID, e.loaded, e.total);
        }, false);
        // 文件上传成功或是失败
        xhr.onreadystatechange = function(e){
            if (xhr.readyState == 4){
                if (xhr.status == 200){
                    handlers.onSuccess(fileID, xhr.responseText);
                }else{
                    self.onFailure(fileID, xhr.responseText);       
                }
            }
        };
        // 开始上传
        var formdata = new FormData();
        formdata.append('image',$('#'+settings.filelist).find('#'+fileID).data('fileData'));
        formdata.append('_retType','json');
        xhr.open("POST", settings.uploader, true);
        xhr.send(formdata);
    }
}


代码可以在这儿下载。http://pan.baidu.com/share/link?shareid=67611&uk=1896128931