swfupload无刷新上传

最近在写项目时第一次接触swfupload上传控件，此控件上传方便 ，支持无刷新上传，并且支持多文件上传。

现在我还只用到过单文件上传，我先贴上单文件上传的，多文件上传后面再更新。

使用swfupload控件时需要引入几个文件，此包可以直接上swfupload官网上下载 http://code.google.com/p/swfupload/

<script type="text/javascript" src="./static/cmsAdminStatic/js/coin-slider.min.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/swfupload.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/swfupload.queue.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/fileprogress.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/handlers.js"></script>

初始化后相当于就是在span id="uploadbtn1" 处显示上传按钮

html:

   </span><span id="uploadbtn1"></span>
                                (1 MB max)

js:

var swfu;

window.onload = function () {
    swfu = new SWFUpload({
        // Backend settings
        upload_url: "/uploadSlidesFile",
        //file_post_name: "file",

         post_params: {Filename : $("#filename").val()},
        // Flash file settings
        file_size_limit : "1MB",
        file_types : "*.jpg;*.jpeg;*.png;", //文件类型            // or you could use something like: "*.doc;*.wpd;*.pdf",
        file_types_description : "All Files",
        file_upload_limit : "10",
        file_queue_limit : "10",
/*
        // Event handler settings
        swfupload_loaded_handler : swfUploadLoaded,

        file_dialog_start_handler: fileDialogStart,
        file_queued_handler : fileQueued,
        file_queue_error_handler : fileQueueError,
        file_dialog_complete_handler : fileDialogComplete,

        //upload_start_handler : uploadStart,    // I could do some client/JavaScript validation here, but I don't need to.
        upload_progress_handler : uploadProgress,
        upload_error_handler : uploadError,
        upload_success_handler : uploadSuccess,
        upload_complete_handler : uploadComplete,
*/

        file_dialog_start_handler : function(){},
        file_queued_handler : function(file){
           // alert(file.name);
          //  $("#filename").val(file.name);


        },
        file_queue_error_handler : function (file, errorCode, message) {
            if(errorCode==SWFUpload.QUEUE_ERROR.INVALID_FILETYPE){
                alert("上传文件格式不符!");
            }
            if (errorCode==SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT){
                alert("文件过大！");
            }else{
                alert("上传出错，请检查要上传的文件是否正确");
            }
        },
        file_dialog_complete_handler : function(numFilesSelected, numFilesQueued){

            this.startUpload();
        },
        upload_start_handler : function(){},
        upload_progress_handler : function(){},

        upload_error_handler : function(file, code, message){
            alert("error:" + code + ";" + message);
        },
        upload_complete_handler : function(data){
               //alert("upload complete:" + data);
        },
        upload_success_handler : function(file, serverData, response) {
           // alert(serverData);
            try {
                //console.log(serverData);
                //"{"code":"","data":{"path":"/appReleaseFile/c7d2cb6c3b7c49fbb1e3796162101df2.zip","dir":"/appReleaseFile/","fileId":"3b42c8ab710a4aad90f07787f81094bc"},"exception":"","message":"上传文件成功","result":1,"success":true}"
                //服务端返回json外面有"", 需要通过eval解析
                var data = eval("("+serverData+")");
               // alert(data.data.path);
                if('true'==data.success || true==data.success){
                    alert('上传文件成功!');
                    $("#slidePicUrl").val(data.data.path);
                    $("#uploadFileName").html(data.data.name);

                   // $('#slidesImg').attr('src', data.data.path);
                    //$('.edit-app-thumb').prepend('<img id="slidesImg" class="app-thumb" alt="slidesImg" src="'+data.data.path+'" />');
                  //  $('#picId').val(data.data.id);
                }else{
                    alert('上传文件失败!');
                }
            } catch (ex) {
                this.debug(ex);
            }
        },
        // Button Settings
        button_image_url : "./static/cmsAdminStatic/SWFUpload/XPButtonUploadText_61x22.png",     //上传图标
        button_placeholder_id : "uploadbtn1",
        button_width: 61,
        button_height: 22,
        //button_text: '请选择上传文件',
        button_text:'',
        // Flash Settings
        flash_url : "./static/cmsAdminStatic/SWFUpload/swfupload.swf",

        custom_settings : {
            progress_target : "fsUploadProgress",
            upload_successful : false
        },

        // Debug settings
        debug: false    //debug  测试
    });

};