HTML5+ajaxでプレビュー画像エフェクトを作成する方法

今回は HTML5+ajax を使用してプレビュー画像効果を作成する方法を説明します。 HTML5+ajax でプレビュー画像効果を作成する際の 注意事項 は何ですか。実際の事例を見てみましょう。

1. 画像のアップロードなどについて XHTMLの時代では、画像のアップロードにはHTMLファイルコントロールを使用しており、一度にアップロードできる画像は1枚だけです。複数の画像を一度にアップロードするには、Flashを使用する方法があります。たとえば、swfupload.js です。残念ながら、Flash ファイルをページと同じ親フォルダーに置く必要があり、JavaScript ファイルのサイズもかなり大きくなるなど、使用にはいくつかの複雑な点があります。

File UploadPlug-in」の記事を翻訳、編集しましたが、このプラグインのハイライトは、非表示の iframe フレーム ページを使用して Ajax アップロードをシミュレートすることです。一度にアップロードできる画像は 1 つだけです。写真は複数回アップロードできます。

2. デモ ページ

3. コア スケルトン スクリプトの簡単な分析 1 つ目はファイル アップロード用のコア ファイルですが、これは時間がかかりましたここ二晩でゆっくり作りました。ファイル名は: zxxFile.js (右クリックしてダウンロードできます)

var ZXXFILE = {
  //骨架们...
}

我们按照上面表格中的骨架进行示意。demo页面借用了比较流行的jQuery库，骨架+血肉 = 插件，当然，demo页面并不是奔着插件去的（虽然只需稍加修改），因为页面的UI显然不够插件的份。也就是说，利用zxxFile.js骨架，配合点你自己属性的JavaScript库就可以书写属于你自己的基于HTML5的多文件Ajax上传插件啦！

四、demo页面的些代码demo页面代码整体逻辑如下：

var params = {
  //血肉们
};
ZXXFILE = $.extend(ZXXFILE, params);
ZXXFILE.init();

fileInput首先是file控件元素，如下：

fileInput: $("#fileImage").get(0)因为是DOM元素，所以应用了jQuery的get方法。下面两个参数同。

demo页面中的file控件元素支持多文件选择，其隐藏的玄机就是下面代码中大红高亮的部分：

dragDrop和upButton拖拽区域和上传按钮(默认隐藏)：

dragDrop: $("#fileDragArea").get(0),
upButton: $("#fileSubmit").get(0)

urlAjax上传地址，没什么好说的，取的是表单的action地址：

url: $("#uploadForm").attr("action")

filter方法对选择的文件进行过滤。file控件什么文件都能选，而demo页面是图片上传相关的demo；空间大小有限，超大尺寸的图片还是挡着为好。显然，要对上传文件进行过滤。于是，就有了如下的过滤脚本：

filter: function(files) {
  var arrFiles = [];
  for (var i = 0, file; file = files[i]; i++) {
    if (file.type.indexOf("image") == 0) {
      if (file.size >= 512000) {
        alert('您这张"'+ file.name +'"图片大小过大，应小于500k'); 
      } else {
        arrFiles.push(file); 
      }  
    } else {
      alert('文件"' + file.name + '"不是图片。'); 
    }
  }
  return arrFiles;
}

zxxFile.js会自动对过滤后的文件对象列表进行整合，以准确上传。

onSelect方法文件（这里就是图片）选择后执行的方法。在本实例页面中，onSelect方法的主要任务就是本地图片在浏览器中的预览。本地图片上传之前在浏览器中预览的核心脚本就是：

var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
  htmlImage = '';
}
reader.readAsDataURL(file);

在本demo页面中，该部分完成脚本如下，虽好像有些长度，其实内容就是装载一些HTML代码而已：

onSelect: function(files) {
  var html = '', i = 0;
  //等待载入gif动画
  $("#preview").html('
');
  var funAppendImage = function() {
    file = files[i];
    if (file) {
      var reader = new FileReader()
      reader.onload = function(e) {
        html = html + '
' + file.name + ''+ 
          '删除
' +
          '
'+ 
          '' +
        '
';
        
        i++;
        funAppendImage();
      }
      reader.readAsDataURL(file);
    } else {
      //图片相关HTML片段载入
      $("#preview").html(html);
      if (html) {
        //删除方法
        $(".upload_delete").click(function() {
          ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
          return false; 
        });
        //提交按钮显示
        $("#fileSubmit").show(); 
      } else {
        //提交按钮隐藏
        $("#fileSubmit").hide(); 
      }
    }
  };
  //执行图片HTML片段的载人
  funAppendImage(); 
}

细心的你可能发现到上面的HTML元素中基本上都用到了i这个索引，作用是方便后面删除可以找到相应的元素。
然后，还有一个需要注意的就是删除事件——执行了ZXXFILE.funDeleteFile()方法，这是必须的，真正将图片从文件列表中删除，同时用来触发onDelete方法的回调。

onDelete方法图片上传完毕或是删除之时执行飞方法。本实例是让其渐隐：

onDelete: function(file) {
  $("#uploadList_" + file.index).fadeOut();
}

onDragOver方法文件拖到拖拽元素上时执行的方法，本实例就是增加了个类名，如下：

onDragOver: function() {
  $(this).addClass("upload_drag_hover");
}

onDragLeave方法文件移出元素上时执行的方法，本实例就是去掉了个类名，如下：

onDragLeave: function() {
  $(this).addClass("upload_drag_hover");
}

onProgress方法
上传中触发的方法。本demo效果就是图片左上角有个有着圆角黑色半透明背景元素，里面的百分比值不断增加。代码：

onProgress: function(file, loaded, total) {
  var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%';
  eleProgress.show().html(percent);
}

onSuccess方法当前图片上传成功后执行的方法。本demo就是提示返回的图片地址信息：

onSuccess: function(file, response) {
  $("#uploadInf").append(""
上传成功，图片地址是：" + response + ""
");
}

onFailure方法图片上传嗝屁时尿出的方法。本demo为提示，然后图片浅透明：

onFailure: function(file) {
  $("#uploadInf").append("
图片" + file.name + "上传失败！
"); 
  $("#uploadImage_" + file.index).css("opacity", 0.2);
}

onComplete方法当所有图片都上传完毕之后，本实例页面把file控件的value值置空，同时按钮隐藏了：

onComplete: function() {
  //提交按钮隐藏
  $("#fileSubmit").hide();
  //file控件value置空
  $("#fileImage").val("");
  $("#uploadInf").append("
当前图片全部上传完毕，可继续添加上传。
");
}

PHP页面相关代码

$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {
  file_put_contents(
    'uploads/' . $fn,
    file_get_contents('php://input')
  );
  echo "http://www.zhangxinxu.com/study/201109/uploads/$fn";
  exit();
}

以上就是主要的些功能或交互代码。至于CSS样式部分以及HTML代码中的一些细节我就懒得捡芝麻了。您有兴趣可以通过查看源代码观摩观摩。

5. HTML5 ファイルの Ajax アップロードの現在の適用範囲 IE ブラウザーだけでなく、最新の Safari ブラウザーや Opera も HTML5 のプレビュー可能な複数画像の Ajax アップロードを完全にはサポートしていません。これを学ぶために何をしていますか？少なくとも今はこのような鳥はいない。

確かに、大多数のユーザーが使用する外部プロジェクトや Web ページの一部にこのテクノロジーを使用するには時期尚早です。ただし、企業のイントラネット プロジェクトでは、これを適用してもまったく問題ありません。非常に奇妙な問題を発見しました。多くの場合、イントラネット Web ページは下位バージョンの IE をサポートしていますが、最新のブラウザーはサポートしていません。これは完全に間違った道を進んでいます。

最近、当社ではイントラネットプロジェクトの改革に着手し、Chromeなどの最新ブラウザ（もちろんIEブラウザも使用可能）をベースとしたイントラネット開発を開始しており、社内スタッフはChromeブラウザを使用せざるを得なくなっています。弊社に関する限り、UI 効果、インタラクション、スピード体験など、非常に良い反応をいただいています。

明らかに、少なくとも当社では、将来、イントラネットの編集者や秘書向けに複数画像のアップロード機能を提供したい場合、HTML5 ファイルを直接使用してアップロードできるようになり、それがこの記事の内容です。シンプルさ、スピード、そしてスピードは、開発が幸せで価値のあるものであることを実感させてくれます。

また、この記事のデモページは例として記載したものであり、間違いがあったことをお詫び申し上げます。 zxxFile.js はリリースされたばかりでまだ実践されていません。貴重なご意見をお待ちしておりますので、よろしくお願いいたします。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Ajax はプログレスバー効果を備えたファイルアップロードを実装します

Ajax での readyState と status の使用方法

以上がHTML5+ajaxでプレビュー画像エフェクトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。