上传文件swfUploadConfig.js

/*/*
 * Unobstrusive swf upload widget using jQuery.
 *example : $(‘:file.uo_widget_form_input_file_swf_upload‘).uoWidgetFormInputFileSwfUpload({});
 *
 * @author     Fran?ois Béliveau <[email protected]>
 **/
var uo_widget_form_input_file_swf_upload_config = {};
var uo_widget_form_input_file_swf_upload_count  = 0;
(function($) {

  $.fn.uoWidgetFormInputFileSwfUpload = function(customConfiguration)
  {
    // default configuration
    var configuration = {
      labels: {
        browse: ‘browse‘
      },
      images: {
        browse: ‘/sf_unobstrusive_widget/images/default/uo_widget_form_input_file_swf_upload/folder_explore.png‘
      },
      upload_auto: false,
      upload_url: false,
      file_post_name: ‘swf_upload_file‘,

      // Flash file settings
      file_size_limit: ‘10240‘, //10 MB
      file_types: ‘*.*‘,
      file_types_description: ‘All files‘,
      file_upload_limit: ‘0‘,
      file_queue_limit: ‘1‘,

      // Button Settings
      button_width: 16,
      button_height: 16,

      // Flash Settings
      flash_url : "/sf_unobstrusive_widget/vendor/swf_upload/swfupload.swf", 

      // Debug settings
      debug: false
    };

    $.extend(true, configuration, customConfiguration);

    return this.each(function(index)
    {
      var $widget         = $(this);
      var $widgetId       = $widget.attr(‘id‘);
      var $widgetName     = $widget.attr(‘name‘);
      var $widgetFileName = false;
      var $swfUpload      = false;
      var $index          = uo_widget_form_input_file_swf_upload_count;
      var handlers = {
        swfupload_loaded_handler: false,
        file_dialog_start_handler: false,
        file_queue_error_handler: false,
        file_dialog_complete_handler: false,
        upload_start_handler: false,
        upload_progress_handler: false,
        upload_error_handler: false,
        upload_success_handler: false,
        upload_complete_handler: false,
        file_queued_handler: false,
        swfupload_loaded_handler: false,
        swfupload_loaded_handler: false
      };

      // merge default and custom configuration
      if (typeof(uo_widget_form_input_file_swf_upload_config[$widgetId]) == ‘object‘)
      {
        for (handlerName in handlers)
        {
          if (typeof(uo_widget_form_input_file_swf_upload_config[$widgetId][handlerName]) == ‘function‘)
          {
            handlers[handlerName] = uo_widget_form_input_file_swf_upload_config[$widgetId][handlerName];
          }
        }
      }

      /**
       * Initialize widget
       */
      function init()
      {
        // prevent initialize twice
        if ($widget.hasClass(‘uo_widget_form_input_file_swf_upload_ON‘))
        {
          return $widget;
        }

        if (typeof(SWFUpload) != "function")
        {
          alert(‘Unable to initialize SWFUpload widget: SWFUpload is not defined‘);
          return $widget;
        }

        $widget.removeClass(‘uo_widget_form_input_file_swf_upload‘);
        $widget.addClass(‘uo_widget_form_input_file_swf_upload_ON‘);

        config = getConfiguration();
        if (config.upload_url)
        {
          $widget.after(getHtmlTemplate(config))
          var newWidget   = $widget.next();
          $widget.remove();

          $widget         = newWidget;
          $widgetFileName = $(‘#‘+$widgetId);

          $swfUpload = new SWFUpload(config);
          uo_widget_form_input_file_swf_upload_count++;
        }
        else
        {
          alert(‘Unable to initialize SWFUpload widget: invalid upload url‘);
        }
      }

      /**
       * Return widget‘s specific configuration
       */
      function getConfiguration()
      {
        var result = uo_widget_form_input_file_swf_upload_config[$widgetId] || {};
        result     = $.extend(true, configuration, result);

        // Event handler settings
        result.swfupload_loaded_handler     = swfUploadLoaded,
        result.file_dialog_start_handler    = fileDialogStart;
        result.file_queue_error_handler     = fileQueueError;
        result.file_dialog_complete_handler = fileDialogComplete;
        result.upload_start_handler         = uploadStart;
        result.upload_progress_handler      = uploadProgress;
        result.upload_error_handler         = uploadError;
        result.upload_success_handler       = uploadSuccess;
        result.upload_complete_handler      = uploadComplete;

        if (undefined == result.custom_settings)
        {
          result.custom_settings = {};
        }
        result.custom_settings.progress_target   = $widgetId+‘_flash‘,
        result.custom_settings.upload_successful = false;

        result.button_window_mode = SWFUpload.WINDOW_MODE.TRANSPARENT;

        result.button_placeholder_id    = $widgetId+‘_browse‘;
        if (result.images.browse)
        {
          result.button_image_url = result.images.browse;
        }
        else
        {
          result.button_text = result.labels.browse;
        }

        if (result.upload_auto)
        {
          result.file_queued_handler = fileQueuedAutoUpload;
        }
        else
        {
          result.file_queued_handler = fileQueued;
        }

        return result
      }

      /**
       * Return widget‘s HTML template
       */
      function getHtmlTemplate(config)
      {
        result = ‘<div class="uo_widget_form_input_file_swf_upload_ON_container">‘
                 + ‘  <div class="field">‘
                 + ‘    <input id="‘+$widgetId+‘" type="text" class="text" readonly="readonly" />‘
                 + ‘    <span id="‘+$widgetId+‘_browse">‘+config.labels.browse+‘</span>‘
                 + ‘  </div>‘
                 //This is where the file progress gets shown
                 + ‘  <div class="flash" id="‘+$widgetId+‘_flash"></div>‘
                 //This is where the file ID is stored after SWFUpload uploads the file and gets the ID back from upload PHP script
                 + ‘  <input type="hidden" name="‘+$widgetName+‘" value="" />‘
                 + ‘</div>‘

        return $(result);
      }

      /**
       * Start upload
       */
      function doUpload(e)
      {
        try
        {
          $swfUpload.startUpload();
        }
        catch(ex){}

        return false;
      }

      /**
       * Called by the queue complete handler to submit the form
       */
      function uploadDone()
      {
      	try
        {
          $swfUpload.destroy();
          $widget.parents(‘form:first‘)
            .unbind(‘submit‘, doUpload)
            .submit();
      	}
        catch(ex)
        {
      		alert("Error submitting form");
      	}
      }

      /**
       * Cancel upload if allready start
       */
      function fileDialogStart()
      {
      	$swfUpload.cancelUpload();

        if (typeof(handlers.file_dialog_start_handler) == ‘function‘)
        {
          handlers.file_dialog_start_handler();
        }
      }

      /**
       * Handle this error separately because we don‘t want to create a FileProgress element for it.
       */
      function fileQueueError(file, errorCode, message)
      {
        try
        {
          switch (errorCode)
          {
            case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
              alert("You have attempted to queue too many files.\n" + (message === 0 ? "You have reached the upload limit." : "You may select " + (message > 1 ? "up to " + message + " files." : "one file.")));
              return false;
            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
              alert("The file you selected is too big.");
              this.debug("Error Code: File too big, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
              return false;
            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
              alert("The file you selected is empty.  Please select another file.");
              this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
              return false;
            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
              alert("The file you choose is not an allowed file type.");
              this.debug("Error Code: Invalid File Type, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
              return false;
            default:
              alert("An error occurred in the upload. Try again later.");
              this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
              return false;
          }
        }
        catch(e){}

        if (typeof(handlers.file_queue_error_handler) == ‘function‘)
        {
          handlers.file_queue_error_handler(file, errorCode, message);
        }
      }

      function fileQueued(file)
      {
        $widget.parents(‘form:first‘)
          .unbind(‘submit‘, doUpload)
          .submit(doUpload);
        $widgetFileName.val(file.name);

        if (typeof(handlers.file_queued_handler) == ‘function‘)
        {
          handlers.file_queued_handler(file);
        }
      }

      function fileQueuedAutoUpload(file)
      {
        $widgetFileName.val(file.name);
        doUpload();

        if (typeof(handlers.file_queued_handler) == ‘function‘)
        {
          handlers.file_queued_handler(file);
        }
      }

      function uploadProgress(file, bytesLoaded, totalBytes)
      {
        try
        {
          var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);

          file.id = "singlefile";	// This makes it so FileProgress only makes a single UI element, instead of one for each file
          var progress = new FileProgress(file, this.customSettings.progress_target);
          progress.setProgress(percent);
          progress.setStatus("Uploading...");
        }
        catch(e){}

        if (typeof(handlers.upload_progress_handler) == ‘function‘)
        {
          handlers.upload_progress_handler(file, bytesLoaded, totalBytes);
        }
      }

      function uploadSuccess(file, serverData, receivedResponse)
      {
        try
        {
          file.id = "singlefile";	// This makes it so FileProgress only makes a single UI element, instead of one for each file
          var progress = new FileProgress(file, this.customSettings.progress_target);
          progress.setComplete();
          progress.setStatus("Complete.");
          progress.toggleCancel(false);

          if (serverData === " ")
          {
            this.customSettings.upload_successful = false;
          }
          else
          {
            this.customSettings.upload_successful = true;
            $(‘input[name="‘+$widgetName+‘"]‘, $widget).val(serverData);
          }
        }
        catch(e){}

        if (typeof(handlers.upload_success_handler) == ‘function‘)
        {
          handlers.upload_success_handler(file, serverData, receivedResponse);
        }
      }

      function uploadComplete(file)
      {
        try
        {
          if (this.customSettings.upload_successful)
          {
            var config = getConfiguration();
            if (!config.upload_auto)
            {
              uploadDone();
            }
          }
          else
          {
            file.id = "singlefile";	// This makes it so FileProgress only makes a single UI element, instead of one for each file
            var progress = new FileProgress(file, this.customSettings.progress_target);
            progress.setError();
            progress.setStatus("File rejected");
            progress.toggleCancel(false);

            $widgetFileName.val(‘‘);

            alert("There was a problem with the upload.\nThe server did not accept it.");
          }
        }
        catch(e){}

        if (typeof(handlers.upload_complete_handler) == ‘function‘)
        {
          handlers.upload_complete_handler(file);
        }
      }

      function uploadError(file, errorCode, message)
      {
        try
        {
          if (errorCode === SWFUpload.UPLOAD_ERROR.FILE_CANCELLED)
          {
            // Don‘t show cancelled error boxes
            return;
          }

          $widgetFileName.val(‘‘);

          // Handle this error separately because we don‘t want to create a FileProgress element for it.
          switch (errorCode)
          {
            case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
              alert("There was a configuration error.  You will not be able to upload a resume at this time.");
              this.debug("Error Code: No backend file, File name: " + file.name + ", Message: " + message);
              return;
            case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
              alert("You may only upload 1 file.");
              this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
              return;
            case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
            case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
              break;
            default:
              alert("An error occurred in the upload. Try again later.");
              this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
              return;
          }

          file.id = "singlefile";	// This makes it so FileProgress only makes a single UI element, instead of one for each file
          var progress = new FileProgress(file, this.customSettings.progress_target);
          progress.setError();
          progress.toggleCancel(false);

          switch (errorCode)
          {
            case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
              progress.setStatus("Upload Error");
              this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
              break;
            case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
              progress.setStatus("Upload Failed.");
              this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
              break;
            case SWFUpload.UPLOAD_ERROR.IO_ERROR:
              progress.setStatus("Server (IO) Error");
              this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
              break;
            case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
              progress.setStatus("Security Error");
              this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
              break;
            case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
              progress.setStatus("Upload Cancelled");
              this.debug("Error Code: Upload Cancelled, File name: " + file.name + ", Message: " + message);
              break;
            case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
              progress.setStatus("Upload Stopped");
              this.debug("Error Code: Upload Stopped, File name: " + file.name + ", Message: " + message);
              break;
          }
        }
        catch(ex){}

        if (typeof(handlers.upload_error_handler) == ‘function‘)
        {
          handlers.upload_error_handler(file, errorCode, message);
        }

  

时间: 2024-10-01 03:48:03

上传文件swfUploadConfig.js的相关文章

js方法实现--上传文件功能js实现

function createUploadForm(fileElementId, data, curFileList) { var id = new Date().getTime(); var formId = 'jUploadForm' + id; //给form添加一个独一无二的id var form = jQuery('<form action="" method="POST" name="' + formId + '" id=&qu

前端之web上传文件的方式

前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传文件方式介绍 在web浏览器上传文件一般有以下几种方式: form表单上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe上传文件 其中form提交数据之后会整个刷新页面:js通过ajax上传文件虽然不会刷新整个页面,但是他们都是通过使用formdata对

Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常

在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, buttonID, allowedExts) { $.jUploader({ button: buttonID, // 这里设置按钮id eventType: 1, //触发类型 addeventbutton: buttonID, // 要绑定事件的元素的id filenamed: buttonID + 'd

js 上传文件后缀名的判断 var flag=false;应用

js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

不带插件 ,自己写js,实现批量上传文件及进度显示

今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的.然后自己查阅各种资料,经过自己总结,最终完成了这个功能. 如果大家有什么问题可以提出来,一起交流,学习.有什么不对的地方也指出来,我也虚心学习.自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家. 条件:我采用struts2,java ,ajax,FormData实现; 1.实现的逻辑

利用ajaxfileupload.js异步上传文件

1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="enclosure"> <button id="upClick" >上传</button> 注意这里的input控件的id和name必须一致:这样在后台利用springMVC接受文件的时候能对应起来: 3.JS代码 <script type=&q

上传文件中使用ajaxfileupload.js碰到的问题

在做上传图片时需要用到异步上传值服务器,当时选用了ajax的ajaxfileupload可以上传. 这里写下踩过的坑 1:使用$.ajaxFileUpload({});函数,网页报错,提示没有这个函数. 解决:导入ajaxfileupload.js文件.简单 2:上传成功了没有执行回调,即$.ajaxFileUpload({ url:", //你处理上传文件的服务端 type: 'POST', fileElementId:'file',#文件在html中的id dataType: 'json',

js上传文件带参数,并且,返回给前台文件路径,解析上传的xml文件,存储到数据库中

ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '&qu