JqueryプラグインUploadify_jqueryに基づく画像アップロードのプログレスバーのリアルタイム表示

まず、uploadify について学習します。詳細は次のとおりです。

uploadify は、シンプルで使いやすい複数ファイルのアップロード ソリューションです。 jquery プラグインとして、uploadify は使いやすく、高度にカスタマイズ可能です。

アップロード機能:

簡単に言うと、uploadify は jquery に基づいたファイル アップロード プラグインです。その機能的特徴は次のように要約されます。

1)、単一ファイルまたは複数ファイルのアップロードをサポートし、同時にアップロードされるファイルの数を制御できます。
2) php、.net、java など、サーバー側で使用するさまざまな言語をサポートします。
3). アップロードするファイルの種類とサイズ制限はパラメータで設定できます
4) ファイルを選択した後に自動的にアップロードするかどうかはパラメータで設定できます
5) 拡張が容易で、各ステップのコールバック関数 (onselect、oncancel...) を制御できます。
6). インターフェイスパラメータとcssによる外観の制御
7) アップロードの進行状況にイベント コールバックを提供し、アップロードの進行状況をリアルタイムで表示します
8) 開始する前に、プラグイン インストール パッケージをローカルにダウンロードして参照する必要があります。詳細な実装についてはコード コメントを参照してください。以下のコードを開始します。

1. html コード

<div id="webapplogo_file" style="display: block; width: 800px; background-color: #fff;">
      <ul>
        <li style="margin-left: 213px;"><span class="black_blod14">logo图标：</span></li>
        <li style="margin-left: 3px;">
          <input type="text" readonly="readonly" id="text_webapplogo" name="app_logo" class="appipt1" value="<%=applogo %>" /></li>
        <li style="padding-top: 1px;">
          <input type="file" id="webapplogo" name="webapplogo" />
        </li>
        <li><span style="display: none; margin-left: 5px; padding-left: 20px; color: #ea5200;
          font-size: 12px; background: url('images/icon_03.gif' ) no-repeat 0px 0px;" id="textporapplogo">
          请上传logo图标！</span></li>
        <li style="margin-left: 220px;"><span class="grey999" style="margin-left: 90px; float: left;">
          尺寸72px*72px，png格式,建议使用 图标psd模板 制作</span>
          <div id="qid_webapplogo" class="filequeue"></div>
          <table id="webapplogo_tab" width="50%" border="0" cellspacing="0" cellpadding="0"
            align="center" class="grey999" style="display: none; margin-left: 90px; float: left;">
            <tr>
              <td align="center" valign="bottom">
                <img  src="/static/imghw/default1.png"  data-src="images/icon_02.gif"  class="lazy"    style="max-width:90%" id="img_64" border="0" / alt="JqueryプラグインUploadify_jqueryに基づく画像アップロードのプログレスバーのリアルタイム表示" ><br />
                (64*64)
              </td>
              <td align="center" valign="bottom">
                <img  src="/static/imghw/default1.png"  data-src="images/icon_02.gif"  class="lazy"    style="max-width:90%" id="img_48" border="0" / alt="JqueryプラグインUploadify_jqueryに基づく画像アップロードのプログレスバーのリアルタイム表示" ><br />
                (48*48)
              </td>
              <td align="center" valign="bottom">
                <img  src="/static/imghw/default1.png"  data-src="images/icon_02.gif"  class="lazy"    style="max-width:90%" id="img_32" border="0" / alt="JqueryプラグインUploadify_jqueryに基づく画像アップロードのプログレスバーのリアルタイム表示" ><br />
                (32*32)
              </td>
              <td align="center" valign="bottom">
                <img  src="/static/imghw/default1.png"  data-src="images/icon_02.gif"  class="lazy"    style="max-width:90%" id="img_16" border="0" / alt="JqueryプラグインUploadify_jqueryに基づく画像アップロードのプログレスバーのリアルタイム表示" ><br />
                (16*16)
              </td>
            </tr>
          </table>
        </li>
      </ul>
    </div>

2. javascript コード (重要な部分)

$("#webapplogo").uploadify({ 
      'uploader': 'js/uploadify-v2.1.4/uploadify.swf',//进度条，uploadify里面含有
      'script': 'uploadapplogo.ashx',//一般处理程序
      'cancelimg': 'js/uploadify-v2.1.4/cancel.png',//取消图片路径
      'folder': 'imagelogo',//上传文件夹名
      'auto': true, //文件添加到上传队列后，自动进行上传。默认为false
      'multi': false,//是否允许多文件上传。默认为false
      'fileext':'*.gif;*.jpg;*.jpeg;*.png',//允许上传的文件类型，使用分号(”;)”分割 例如:*.jpg;*.gif,默认为null(所有文件类型)
      'filedesc':'不超过2m的图片 (*.gif;*.jpg;*.png)',
      'sizelimit': 2048000, //允许上传的文件大小(kb) 此为2m
      'onselectonce': function(event,data) { //在单文件或多文件上传时，选择文件时触发
        //event 事件对象(the event object)
        //data 选择的操作信息
        //data.filesselected 选择文件操作中选中的文件数量
        $('#status-message').text(data.filesselected + ' 文件正在等待上传…….'); 
      },
      'oncomplete': function(event, queueid, fileobj, response, data) {//当单个文件上传完成后触发
        //event:事件对象(the event object)
        //id:该文件在文件队列中的唯一表示
        //fileobj:选中文件的对象，他包含的属性列表
        //response:服务器端返回的response文本，我这里返回的是处理过的文件名称
        //data：文件队列详细信息和文件上传的一般数据

        alert("文件:" + fileobj.name + " 上传成功！");
        //设置图片名称
        $("#applogo").attr("value",response);
        //设置输入框的值
        $("#text_webapplogo").attr("value",fileobj.name);
        //设置图片路径
        $("#img_64").attr("src","imagelogo/64_"+response);
        $("#img_48").attr("src","imagelogo/48_"+response);
        $("#img_32").attr("src","imagelogo/32_"+response);
        $("#img_16").attr("src","imagelogo/16_"+response);
        //图片路径设置完成后，显示图片
        $("#webapplogo_tab").css("display","block");
      },
      'onerror': function(event, queueid, fileobj) {//当单个文件上传出错时触发
        alert("文件:" + fileobj.name + " 上传失败！");
      },
      'buttonimg':'images/bn_04.gif',//浏览按钮的图片路径
      'width':60,//浏览按钮的宽和高
      'height':24
      ,'queueid':'qid_webapplogo'//页面上作为文件上传队列的元素的id
    });

3. ファイルアップロードのサーバー側処理

/// <summary>
  /// 上传文件
  /// </summary>
  public class UploadApplogo : IHttpHandler
  {
    System.Drawing.Image image, image64, image48, image32, image16; //定义image类的对象
    protected string imagePath;//图片路径
    protected string imageType;//图片类型
    protected string imageName;//图片名称
    protected string fileName;//图片名称
    //提供一个回调方法,用于确定Image对象在执行生成缩略图操作时何时提前取消执行
    //如果此方法确定 GetThumbnailImage 方法应提前停止执行，则返回 true；否则返回 false
    System.Drawing.Image.GetThumbnailImageAbort callb = null;

    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "text/plain";
      HttpPostedFile UploadImage = context.Request.Files["FileData"];
      //物理路径
      string uploadpath = HttpContext.Current.Server.MapPath(context.Request["folder"] + "\\");

      if (UploadImage != null)
      {
        //是否有目录，如没有就创建
        if (!Directory.Exists(uploadpath))
        {
          Directory.CreateDirectory(uploadpath);
        }
        //客户端文件完全名称
        string filename = UploadImage.FileName;
        string extname = filename.Substring(filename.LastIndexOf(".") + 1);
        //为不重复，设置文件名
        fileName = Guid.NewGuid().ToString() + "." + extname;

        //context.Response.Write("1");
        context.Response.Write(fileName);
      }
      else
      {
        context.Response.Write("0");
      }

      string mPath;      

      imagePath = UploadImage.FileName;
      //取得图片类型
      imageType = imagePath.Substring(imagePath.LastIndexOf(".") + 1);
      //取得图片名称
      imageName = imagePath.Substring(imagePath.LastIndexOf("\\") + 1);
      Stream imgStream = UploadImage.InputStream;//流文件，准备读取上载文件的内容
      int imgLen = UploadImage.ContentLength;//上载文件大小

      //建立虚拟路径
      mPath = HttpContext.Current.Server.MapPath(context.Request["folder"]);
      //保存到虚拟路径
      UploadImage.SaveAs(mPath + "\\" + fileName);
      ////显示原图
      //imageSource.ImageUrl = "upFile/" + imageName;
      //为上传的图片建立引用
      image = System.Drawing.Image.FromFile(mPath + "\\" + fileName);

      //生成缩略图
      image64 = image.GetThumbnailImage(64, 64, callb, new System.IntPtr());
      //把缩略图保存到指定的虚拟路径
      image64.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\64_" + fileName);
      //释放image64对象的资源
      image64.Dispose();

      //生成缩略图
      image48 = image.GetThumbnailImage(48, 48, callb, new System.IntPtr());
      image48.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\48_" + fileName);
      image48.Dispose();

      //生成缩略图
      image32 = image.GetThumbnailImage(32, 32, callb, new System.IntPtr());
      image32.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\32_" + fileName);
      image32.Dispose();

      //生成缩略图
      image16 = image.GetThumbnailImage(16, 16, callb, new System.IntPtr());
      image16.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\16_" + fileName);
      image16.Dispose();

      //释放image对象占用的资源
      image.Dispose();
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }

4. 効果は次のとおりです。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。