• swf 上传


    推荐这个博客:http://blog.csdn.net/hi_kevin/article/details/23430345

    这个文章很不错,我推荐这个文章:http://leeon.me/upload/other/swfupload.html#globals

     var swfu;
    window.onload = function () {
    var settings = {
    flash_url: "/plugins/swfupload/core/Flash/swfupload.swf",
    upload_url: "/system/upload/annex",
    post_params: {"PHPSESSID": sessionId, "name": "annex"},
    file_size_limit: "30 MB",
    file_types: "*.gif;*.jpg;*.jepg;*.png;*.bmp;*.txt;*.zip;*.rar;*.pdf;*.ppt;*.doc;*.xls;*.xlsx;*.docx;*.rtf",
    file_types_description: "jap,png,rar,zip",
    file_upload_limit: 0,
    file_queue_limit: 0,
    custom_settings: {
    progressTarget: "fsUploadProgress",
    cancelButtonId: "btnCancel"
    },
    debug: false,

    // Button settings
    button_ "80",
    button_height: "20",
    button_placeholder_id: "spanButtonPlaceHolder",
    button_text: '上传附件',
    button_text_left_padding: 12,
    button_text_top_padding: 3,

    // The event handler functions are defined in handlers.js
    file_queue_error_handler: fileQueueError,
    file_dialog_complete_handler: replyFileDialogComplete,//当选择文件对话框关闭,并且所有选择文件已经处理完成(加入上传队列成功或者失败)时,此事件被触发
    upload_error_handler: uploadError,
    upload_success_handler: replyUploadSuccess,//当文件上传的处理已经完成
    upload_start_handler: uploadStart,
    file_queued_handler: fileQueued,// 文件被加入队列时触发

    upload_progress_handler: uploadProgress //进度
    // upload_start_handler: upload_start_handlers //在文件往服务端上传之前触发此事件,可以在这里完成上传前的最后验证以及其他你需要的操作
    // upload_progress_handler : uploadProgress,
    };
    swfu = new SWFUpload(settings);
    };

    function fileQueued(file) {
    var swfUpload = this;
    var listItem = '<li id="' + file.id + '">';
    listItem += '文件:<em>' + file.name + '</em>(' + Math.round(file.size/1024) + ' KB)';
    listItem += '<span class="progressValue"></span>'
    + '<div class="progressBar"><div class="progress"></div></div>'
    + '<p class="status" >Pending</p>'
    + '<span class="cancel" > </span>'
    + '</li>';
    $("#logList").append(listItem);
    // $("li#" + file.id + " .cancel").click(function(e) {
    // swfUpload.cancelUpload(file.id);
    // $("li#" + file.id).slideUp('fast');
    // })
    // swfUpload.startUpload();
    }

    function uploadStart(file) {
    if (file) {
    $("#logList li#" + file.id).find('p.status').text('上传中...');
    $("#logList li#" + file.id).find('p.progressValue').text('0%');
    }
    }
    /**
    * 文件上传过程中定时触发,更新进度显示
    * @param file 上传的文件
    * @param bytesCompleted 已上传大小
    * @param bytesTotal 文件总大小
    */
    function uploadProgress(file,bytesCompleted,bytesTotal) {
    var percentage = Math.round((bytesCompleted / bytesTotal) * 100);
    $("#logList li#" + file.id).find('div.progress').css('width',percentage + '%');
    $("#logList li#" + file.id).find('span.progressValue').text(percentage + '%');
    }



    //上传成功动作
    function replyUploadSuccess(file, serverData) {
    try {


    var data = JSON.parse(serverData);
    var size = $("div .btn-group").attr("data-size");
    layer.msg("附件(" + file.name + ")上传成功", 1, {type: 1}, function () {
    //显示附件信息
    var html = '<div class="btn-group" data-size="0" style="margin-left: 70px;" id="' + data.fileId + '"><input type="checkbox" class="annex"' +
    ' style="float:left;" checked name="annex[' + data.fileId + ']" value="' + file.name + '" ><div name="filename" style="float:left;" >' + file.name + '</div>' +
    '<a style="margin-left:20px;cursor:pointer;float:left; " onclick="delAnnex(this)" >删除</a></div> ';

    var item = $("#logList li#" + file.id);
    item.find('div.progress').css('width','100%');
    item.find('span.progressValue').css('color','red').text('100%');
    item.addClass('success').find('p.status').html('上传完成!');

    if(size==null ||size=='undefied'){
    $("#showAnnex").append(html);
    $("div .btn-group").attr("data-size", file.size);
    }else{
    var total_size = size * 1 + file.size * 1;
    $("div .btn-group").attr("data-size", total_size);
    var max_size = $("div .btn-group").attr("data-size");
    if(max_size>=52428800){
    alert("附件总大小不超过 50M"); return ;
    }else{
    $("#showAnnex").append(html);
    }
    }
    //绑定文件删除事件
    $(".annex").change(function () {
    if (!$(this).is(':checked')) {
    $(this).parent().remove();
    }
    //TODO 检查是否显示上传框
    });
    });
    } catch (ex) {
    this.debug(ex);
    alert(ex);
    }
    }

    //上传文件
    function replyFileDialogComplete(numFilesSelected, numFilesQueued) {
    try {
    this.startUpload();
    } catch (ex) {
    this.debug(ex);
    }
    }

    //删除附件操作
    function delAnnex(obj) {
    var annex = obj.parentNode.firstChild.value;
    $.ajax({
    type: "get",
    url: "/email/draft/del-annex?annex=" + annex,
    dataType: "json",
    success: function (data) {
    if (data.status == 'y') {
    obj.parentNode.remove();
    layer.msg(data.info, 1, 9);
    $_this.parent().parent().remove();
    } else {
    layer.alert(data.info);
    }
    }
    });
    }
  • 相关阅读:
    JSP的作用域与COOKIE
    jsp数据交互
    JSP基本使用方式
    分层架构的初步理解
    JDBC的基本应用
    HTML5新标签
    弹性布局
    解决js获取兄弟节点的兼容问题
    js去重函数(封装函数)
    封装日期函数
  • 原文地址:https://www.cnblogs.com/kobigood/p/4773257.html
Copyright © 2020-2023  润新知