asp.net中Fine Uploader文件上传组件使用介绍

<link href="static/css/fineuploader.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet">

<script src="static/script/fineupload/header.js"></script>
<script src="static/script/fineupload/util.js"></script>
<script src="static/script/fineupload/button.js"></script>
<script src="static/script/fineupload/handler.base.js"></script>
<script src="static/script/fineupload/handler.form.js"></script>
<script src="static/script/fineupload/handler.xhr.js"></script>
<script src="static/script/fineupload/uploader.basic.js"></script>
<script src="static/script/fineupload/dnd.js"></script>
<script src="static/script/fineupload/uploader.js"></script>

<div id="bootstrapped-fine-uploader"></div>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('bootstrapped-fine-uploader'),
request: {
endpoint: 'server/handlerfunction'
},
text: {
uploadButton: '<i class="icon-upload icon-white"></i> Click me now and upload a product image'
},
template:
'<div class="qq-uploader span12">' +
'<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
'<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
'<span class="qq-drop-processing"><span>{dropProcessingText}</span>'+
'<span class="qq-drop-processing-spinner"></span></span>' +
'<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
'</div>',
classes: {
success: 'alert alert-success',
fail: 'alert alert-error'
},
debug: true
});
}
window.onload = createUploader;
</script>

validation:
       {
             allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            sizeLimit: 204800 // 200 kB = 200 * 1024 bytes
      }

  callbacks:
  {
          onSubmit: function(id, fileName) {
            $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>');
          },
          onUpload: function(id, fileName) {
            $('#file-' + id).addClass('alert-info')
                            .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +
                            'Initializing ' +
                            '“' + fileName + '”');
          }
  }

    params:
    {               
        argument1: "value1",               
        argument2: "value2"               
    },

  $('#triggerUpload').click(function() {
          uploader2.uploadStoredFiles();
      });

    request:
      {
          endpoint: 'server/handlerfunction'
      },

   request:
   {
       endpoint: 'controller/php.php'
   }

  /****************************************
  Example of how to use this uploader class...
  You can uncomment the following lines (minus the require) to use
  hese as your defaults.

  // list of valid extensions, ex. array("jpeg", "xml", "bmp")
  $allowedExtensions = array();
  // max file size in bytes
  $sizeLimit = 10 * 1024 * 1024;
  //the input name set in the javascript
  $inputName = 'qqfile'

  require('valums-file-uploader/server/php.php');
  $uploader = new qqFileUploader($allowedExtensions, $sizeLimit, $inputName);

  // Call handleUpload() with the name of the folder, relative to PHP's getcwd()
  $result = $uploader->handleUpload('uploads/');

  // to pass data through iframe you will need to encode all html tags
  header("Content-Type: text/plain");
  echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

  /******************************************/

  $allowedExtensions = array("jpeg", "jpg", "bmp", "png");
  $sizeLimit = 10 * 1024 * 1024;
  $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
  $result = $uploader->handleUpload('uploads/'); //folder for uploaded files
  echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

     /**
       * Handle the uploaded file
       * @param string $uploadDirectory
       * @param string $replaceOldFile=true
       * @returns array('success'=>true) or array('error'=>'error message')
       */
      function handleUpload($uploadDirectory, $replaceOldFile = FALSE){
          if (!is_writable($uploadDirectory)){
              return array('error' => "Server error. Upload directory isn't writable.");
          }

          if (!$this->file){
              return array('error' => 'No files were uploaded.');
          }

          $size = $this->file->getSize();

          if ($size == 0) {
              return array('error' => 'File is empty');
          }

          if ($size > $this->sizeLimit) {
              return array('error' => 'File is too large');
          }

          $pathinfo = pathinfo($this->file->getName());
          $filename = $pathinfo['filename'];
          //$filename = md5(uniqid());
          $ext = @$pathinfo['extension'];        // hide notices if extension is empty

          if($this->allowedExtensions && !in_array(strtolower($ext), $this->allowedExtensions)){
              $these = implode(', ', $this->allowedExtensions);
              return array('error' => 'File has an invalid extension, it should be one of '. $these . '.');
          }

          $ext = ($ext == '') ? $ext : '.' . $ext;

          if(!$replaceOldFile){
              /// don't overwrite previous files that were uploaded
              while (file_exists($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)) {
                  $filename .= rand(10, 99);
              }
          }

          $this->uploadName = $filename . $ext;

          if ($this->file->save($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)){
              return array('success'=>true);
          } else {
              return array('error'=> 'Could not save uploaded file.' .
                  'The upload was cancelled, or server error encountered');
          }

      }   

  $uploadDirectory = $_SERVER['DOCUMENT_ROOT']."DS".$uploadDirectory;

  if (!file_exists($uploadDirectory)) {
              return array('error' => "Server error. Upload directory dones't exist.");
          }